/*
Theme Name: ZeroY Starter
Author: ZeroY Studio
Description: QINFENG B2B theme. The site framework: every page of 网站规划.md is a theme template, the content types render the fields of inc/content-model.json, and the static pages render a placeholder until their copy arrives.
Version: 0.6.0
*/

/*
 * Framework styling only: enough for the placeholder pages to be readable while
 * the design is still to come. The Deep Green and Ink values are the brand
 * colours of DESIGN(20260921-052233).md; the design stage replaces this file
 * with the real tokens and components.
 */
:root {
    color-scheme: light;
    /* Primary Brand Palette per DESIGN.md */
    /* Site accent: deep navy. This token held the bright grass green
       #55C83A until the site-wide recolour, so its name is kept for its uses. */
    --brand: #012C44;
    --signal: #D4FF00;
    /* Site accent: bright teal. This token carried the brand deep green
       until the site-wide recolour, so its name is kept for its 130+ uses. */
    --deep: #00B9BC;
    --olive: #527700;
    --ink: #15211E;
    --slate: #5D6B67;
    --soft: #F5F7F6;
    --mist: #E9EEEC;
    --pale: #EDF7E9;
    --sand: #EEE9E1;
    --white: #FFFFFF;
    --warning: #D58A24;
    
    /* Legacy variables mapping */
    --qf-deep-green: var(--deep);
    --qf-ink: var(--ink);
    --qf-muted: var(--slate);
    --qf-line: var(--mist);

    /* Typography */
    --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Elevation & Shadows */
    --qf-shadow: 0 15px 42px rgba(21, 33, 30, 0.09);
    --qf-shadow-hover: 0 22px 50px rgba(0, 185, 188, 0.16);
    --qf-radius: 14px;
    --qf-radius-lg: 24px;
    --qf-transition: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink);
    background: #FFFFFF;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    letter-spacing: -0.035em;
    font-weight: 800;
    color: var(--ink);
}

a {
    color: var(--deep);
    transition: color var(--qf-transition);
}

.qf-shell {
    width: min(100% - 2.5rem, 76rem);
    margin-inline: auto;
}

.qf-skip {
    position: absolute;
    left: -9999px;
}

.qf-skip:focus {
    left: 1rem;
    top: 1rem;
    padding: .5rem .75rem;
    background: #FFFFFF;
}

/*
 * Primary navigation ------------------------------------------------------
 * One horizontal bar on desktop: brand left, nav right, everything centred.
 * A grouped item opens either a narrow dropdown panel (--list) anchored to
 * its own item or a full-width mega panel (--mega) spanning the header.
 * State is read from attributes only: html.qf-nav-js (the site script is
 * running), li[data-open="true"] (that panel is open) and
 * nav[data-nav-open="true"] (the mobile menu is open). Without the script the
 * nav stays fully visible, and every panel is reachable by keyboard through
 * :focus-within on desktop and the caret button on mobile.
 */
.qf-header {
    position: relative;
    z-index: 30;
    border-bottom: 1px solid var(--qf-line);
    --qf-nav-shell: min(100% - 2.5rem, 76rem);
    --qf-nav-panel-bg: #FFFFFF;
    --qf-nav-panel-line: var(--qf-line);
    --qf-nav-shadow: 0 1rem 2.25rem rgba(0, 185, 188, .14);
    --qf-nav-hover-bg: rgba(0, 185, 188, .06);
    --qf-nav-tint: rgba(0, 185, 188, .05);
    --qf-nav-woven: repeating-linear-gradient(135deg, rgba(0, 185, 188, .12) 0 2px, rgba(0, 185, 188, 0) 2px 7px);
    --qf-nav-dur: 160ms;
}

.qf-header-inner {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
}

.qf-brand {
    margin: 0;
    min-width: 0;
}

.qf-brand-link {
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: .04em;
    text-decoration: none;
}

.qf-brand-link:hover,
.qf-brand-link:focus {
    color: var(--qf-deep-green);
    text-decoration: underline;
}

.qf-brand-tagline {
    display: block;
    font-size: .75rem;
    color: var(--qf-muted);
}

/* The list itself: a column on mobile, one row from 64rem up. */
.qf-nav {
    min-width: 0;
}

.qf-nav-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.qf-nav-item {
    position: relative;
    border-bottom: 1px solid var(--qf-line);
}

.qf-nav-item--group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.qf-nav-item--group > .qf-nav-link {
    flex: 1 1 auto;
}

.qf-nav-link {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: .4rem 0;
    color: var(--qf-ink);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--qf-nav-dur) ease, background-color var(--qf-nav-dur) ease;
}

.qf-nav-link:hover,
.qf-nav-link:focus {
    color: var(--qf-deep-green);
    text-decoration: underline;
}

/* Caret toggle: the caret is the only visible content (the label is clipped
   for screen readers, and stays in the button's accessible name). */
.qf-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: none;
    color: var(--qf-ink);
    font: inherit;
    cursor: pointer;
    transition: background-color var(--qf-nav-dur) ease, color var(--qf-nav-dur) ease;
}

.qf-nav-toggle:hover {
    background-color: var(--qf-nav-hover-bg);
    color: var(--qf-deep-green);
}

.qf-nav-caret {
    display: block;
    width: .45rem;
    height: .45rem;
    margin-top: -.1rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--qf-nav-dur) ease;
}

.qf-nav-item--group[data-open="true"] > .qf-nav-toggle .qf-nav-caret,
.qf-nav-menu[aria-expanded="true"] .qf-nav-caret {
    transform: rotate(-135deg);
}

.qf-nav-vh {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
}

/* The mobile menu button. [hidden] is in the HTML and the script removes it,
   so the guard keeps display:none winning over the rule below. */
.qf-nav-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    min-height: 2.75rem;
    padding: .5rem .75rem;
    border: 1px solid var(--qf-deep-green);
    border-radius: 2px;
    background: #FFFFFF;
    color: var(--qf-deep-green);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--qf-nav-dur) ease, color var(--qf-nav-dur) ease;
}

.qf-nav-menu:hover {
    background-color: var(--qf-nav-hover-bg);
}

.qf-nav-menu[hidden] {
    display: none;
}

/* Panels: static and full width on mobile, absolutely positioned from 64rem. */
.qf-nav-panel {
    display: none;
    flex-basis: 100%;
    width: 100%;
    padding: .5rem 0 1rem;
    border-top: 1px solid var(--qf-line);
    background: var(--qf-nav-panel-bg);
}

.qf-nav-item--group[data-open="true"] > .qf-nav-panel {
    display: block;
}

/* Mega panel content: the inner .qf-mega is itself the shell. */
.qf-mega {
    width: 100%;
    margin-inline: 0;
    padding: 0;
}

.qf-mega-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.qf-mega-block {
    min-width: 0;
}

.qf-mega-heading,
.qf-menu-heading {
    margin: 0 0 .6rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--qf-deep-green);
}

/* Product cards inside a mega panel: image, title, 2-line summary. */
.qf-mega-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.qf-mega-card {
    min-width: 0;
}

.qf-mega-card-link {
    display: block;
    color: var(--qf-ink);
    text-decoration: none;
}

.qf-mega-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 2px;
    background-color: var(--qf-nav-tint);
    object-fit: cover;
}

.qf-mega-card-title {
    display: block;
    margin-top: .55rem;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.35;
}

.qf-mega-card-summary {
    display: -webkit-box;
    overflow: hidden;
    margin-top: .15rem;
    font-size: .85rem;
    line-height: 1.45;
    color: var(--qf-muted);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.qf-mega-card-link:hover .qf-mega-card-title,
.qf-mega-card-link:focus .qf-mega-card-title {
    color: var(--qf-deep-green);
    text-decoration: underline;
}

/* A calm woven placeholder wherever a record has no image. */
.qf-mega-image--empty,
.qf-mega-thumb--empty,
.qf-menu-thumb--empty {
    background-color: var(--qf-nav-tint);
    background-image: var(--qf-nav-woven);
}

/* Compact industry rows: small square thumb beside title and summary. */
.qf-mega-terms {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.qf-mega-term {
    min-width: 0;
}

.qf-mega-term-link {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    min-height: 2.75rem;
    padding: .35rem 0;
    color: var(--qf-ink);
    text-decoration: none;
}

.qf-mega-thumb,
.qf-menu-thumb {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    aspect-ratio: 1;
    border-radius: 2px;
    background-color: var(--qf-nav-tint);
    object-fit: cover;
}

.qf-mega-term-text,
.qf-menu-text {
    display: block;
    min-width: 0;
}

.qf-mega-term-title,
.qf-menu-title {
    display: block;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.35;
}

.qf-mega-term-summary,
.qf-menu-summary {
    display: block;
    margin-top: .1rem;
    font-size: .8rem;
    line-height: 1.4;
    color: var(--qf-muted);
}

.qf-mega-term-link:hover .qf-mega-term-title,
.qf-mega-term-link:focus .qf-mega-term-title {
    color: var(--qf-deep-green);
    text-decoration: underline;
}

/* Narrow dropdown panels. Group headings are headings, not links. */
.qf-menu {
    display: grid;
    gap: 1.25rem;
}

.qf-menu--groups {
    grid-template-columns: minmax(0, 1fr);
}

.qf-menu-group {
    min-width: 0;
}

.qf-menu-list {
    display: grid;
    gap: .1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.qf-menu-item {
    min-width: 0;
}

.qf-menu-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 2.75rem;
    padding: .3rem 0;
    color: var(--qf-ink);
    font-size: .9rem;
    text-decoration: none;
    transition: color var(--qf-nav-dur) ease;
}

.qf-menu-link:hover,
.qf-menu-link:focus {
    color: var(--qf-deep-green);
    text-decoration: underline;
}

.qf-menu-item--media .qf-menu-link {
    align-items: flex-start;
    padding: .45rem 0;
}

/* Bottom strip of a mega panel. */
.qf-mega-foot {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.5rem;
    margin: 1.5rem 0 0;
    padding: .5rem 0 0;
    border-top: 1px solid var(--qf-line);
    list-style: none;
}

.qf-mega-foot-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
}

.qf-mega-foot-link:hover,
.qf-mega-foot-link:focus {
    color: var(--qf-deep-green);
    text-decoration: underline;
}

/* Request a Quote stays the one obvious action.
   Filled signal lime #D4FF00 with a deep navy label: lime is a light colour on
   the white header, so white type would disappear on it and the label has to be
   navy instead. Written as literals because the design doc fixes these two
   hexes; --brand now holds the navy, not the green its name suggests. */
.qf-nav-cta {
    padding: .5rem 0;
}

.qf-nav-cta .qf-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: .35rem .9rem;
    border: 1px solid #D4FF00;
    border-radius: 2px;
    background-color: #D4FF00;
    color: #012C44;
    font-weight: 600;
    transition: background-color var(--qf-nav-dur) ease, color var(--qf-nav-dur) ease, border-color var(--qf-nav-dur) ease;
}

.qf-nav-cta .qf-nav-link:hover,
.qf-nav-cta .qf-nav-link:focus {
    background-color: #012C44;
    border-color: #012C44;
    color: #D4FF00;
    text-decoration: none;
}

.qf-nav-cta .qf-nav-link:focus-visible {
    outline: 2px solid #012C44;
    outline-offset: 2px;
}

.qf-nav :focus-visible,
.qf-nav-menu:focus-visible {
    outline: 2px solid var(--qf-deep-green);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .qf-header .qf-nav,
    .qf-header .qf-nav *,
    .qf-header .qf-nav-menu,
    .qf-header .qf-nav-menu * {
        transition: none;
    }
}

/* ---- Mobile: one column, panels in the flow ---------------------------- */
@media (max-width: 63.99rem) {
    /* Visible once the script removes [hidden]; [hidden] still wins. */
    .qf-nav-menu {
        display: flex;
    }

    /* With the script the nav waits for the menu button; without qf-nav-js it
       stays fully visible and usable. */
    html.qf-nav-js .qf-nav:not([data-nav-open="true"]) {
        display: none;
    }

    .qf-nav {
        width: 100%;
    }

    .qf-nav-list {
        flex-direction: column;
        align-items: stretch;
    }

    .qf-nav-item {
        border-bottom: 1px solid var(--qf-line);
    }

    .qf-nav-item--group {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    /* Panels drop into the flow, full width, no shadow, no height cap. */
    .qf-nav-panel {
        position: static;
        display: none;
        flex-basis: 100%;
        width: 100%;
        max-height: none;
        padding: .5rem 0 1rem;
        border-top: 1px solid var(--qf-line);
        background: var(--qf-nav-panel-bg);
        box-shadow: none;
        overflow: visible;
    }

    .qf-nav-item--group[data-open="true"] > .qf-nav-panel {
        display: block;
    }

    /* The panel already sits inside the shell-width header, so the inner shell
       must not inset a second time. */
    .qf-mega,
    .qf-mega .qf-shell {
        width: 100%;
        margin-inline: 0;
        padding: 0;
    }

    .qf-mega-body {
        flex-direction: column;
        gap: 1.5rem;
    }

    .qf-mega-block {
        flex: 1 1 auto;
    }

    .qf-mega-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qf-mega-terms,
    .qf-menu--groups {
        grid-template-columns: minmax(0, 1fr);
    }

    .qf-mega-foot {
        margin-top: 1.25rem;
    }

    /* Touch targets stay at least 2.75rem tall. */
    .qf-nav-link,
    .qf-nav-toggle,
    .qf-nav-menu,
    .qf-menu-link,
    .qf-mega-term-link,
    .qf-mega-foot-link {
        min-height: 2.75rem;
    }

    .qf-nav-cta .qf-nav-link {
        padding-block: .5rem;
    }
}

/* ---- Desktop: one bar, brand left and nav right, panels out of flow ---- */
@media (min-width: 64rem) {
    .qf-header-inner {
        gap: 2rem;
    }

    .qf-brand {
        flex: 0 0 auto;
    }

    .qf-nav {
        margin-left: auto;
    }

    .qf-nav-menu {
        display: none;
    }

    .qf-nav-list {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 1.25rem;
    }

    /* Items are not positioned, so a mega panel spans the whole header rather
       than its own item; only an item that owns a narrow dropdown becomes the
       panel's anchor. */
    .qf-nav-item {
        position: static;
        border-bottom: 0;
    }

    .qf-nav-item--group {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: .25rem;
    }

    @supports selector(:has(*)) {
        .qf-nav-item--group:has(> .qf-nav-panel--list) {
            position: relative;
        }

        /* The last dropdown sits at the right edge of the bar, so open it
           leftwards: a wide group panel then cannot leave the viewport. */
        .qf-nav-item--group:has(+ .qf-nav-cta) > .qf-nav-panel--list {
            left: auto;
            right: 0;
        }
    }

    .qf-nav-item--group > .qf-nav-link {
        flex: 0 0 auto;
    }

    .qf-nav-link {
        min-height: 2.25rem;
        padding: .35rem 0;
    }

    .qf-nav-toggle {
        min-width: 1.75rem;
        min-height: 1.75rem;
        margin-left: 0;
    }

    .qf-nav-panel {
        position: absolute;
        top: 100%;
        display: none;
        flex-basis: auto;
        width: auto;
        max-height: none;
        padding: 0;
        border-top: 0;
        background: var(--qf-nav-panel-bg);
        z-index: 40;
    }

    /* Hover, keyboard focus inside, or the script's open state. */
    .qf-nav-item--group:hover > .qf-nav-panel,
    .qf-nav-item--group:focus-within > .qf-nav-panel,
    .qf-nav-item--group[data-open="true"] > .qf-nav-panel {
        display: block;
    }

    .qf-nav-panel--mega {
        left: 0;
        right: 0;
        max-height: 78vh;
        overflow-y: auto;
        border-top: 1px solid var(--qf-nav-panel-line);
        box-shadow: var(--qf-nav-shadow);
    }

    .qf-nav-panel--list {
        left: 0;
        right: auto;
        min-width: 16rem;
        max-width: min(22rem, calc(100vw - 3rem));
        padding: .9rem 1.1rem 1rem;
        border: 1px solid var(--qf-nav-panel-line);
        border-radius: 0 0 2px 2px;
        box-shadow: var(--qf-nav-shadow);
    }

    .qf-nav-panel--groups {
        min-width: min(30rem, calc(100vw - 3rem));
        max-width: min(36rem, calc(100vw - 3rem));
    }

    /* Mega content: back to shell width, and a row of blocks that share it. */
    .qf-mega {
        width: var(--qf-nav-shell);
        margin-inline: auto;
        padding: 1.5rem 0 1.25rem;
    }

    .qf-mega-body {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1.75rem 2rem;
    }

    /* A lone wide block fills the row (Products); wide and side share it. */
    .qf-mega-block--wide {
        flex: 2 1 32rem;
        min-width: 0;
    }

    .qf-mega-block--side {
        flex: 1 1 15rem;
        min-width: 0;
    }

    .qf-mega-cards {
        grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
        gap: 1.5rem 1.25rem;
    }

    .qf-mega-terms {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .35rem 1.5rem;
    }

    .qf-menu--groups {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem 1.75rem;
    }

    .qf-menu-link,
    .qf-mega-term-link {
        min-height: 2.25rem;
        padding: .25rem 0;
    }

    .qf-menu-item--media .qf-menu-link {
        padding: .4rem 0;
    }

    .qf-mega-foot {
        margin-top: 1.75rem;
        padding-top: .35rem;
    }

    .qf-mega-foot-link {
        min-height: 2.25rem;
        padding: .25rem 0;
    }

    .qf-nav-cta {
        padding: 0;
    }

    .qf-nav-cta .qf-nav-link {
        min-height: 2.25rem;
    }
}

/* A narrow desktop: the bar has to fit between 64rem and 80rem, so the labels,
   the gaps and the CTA tighten and the brand tagline steps aside until there is
   room for it again. */
@media (min-width: 64rem) and (max-width: 79.99rem) {
    .qf-brand-tagline {
        display: none;
    }

    .qf-nav-list {
        gap: .75rem;
    }

    .qf-nav-link {
        font-size: .9rem;
    }

    .qf-nav-toggle {
        min-width: 1.5rem;
    }

    .qf-nav-cta .qf-nav-link {
        padding-inline: .7rem;
    }
}

.qf-main {
    min-height: 50vh;
    padding: 3rem 0;
}

.qf-eyebrow {
    margin: 0 0 .5rem;
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--qf-muted);
}

.qf-title {
    margin: 0 0 1rem;
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
    line-height: 1.15;
}

.qf-planning {
    margin: 0 0 .75rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--qf-deep-green);
}

.qf-note,
.qf-cta {
    margin: 0 0 .5rem;
    font-size: .9rem;
    color: var(--qf-muted);
}

.qf-list {
    list-style: none;
    margin: 2rem auto 0;
    padding: 0;
}

.qf-list li {
    border-bottom: 1px solid var(--qf-line);
    padding: .5rem 0;
}

/*
 * The content templates: a record, its fields and the lists that hold records.
 * Still framework styling - readable and plain - built on the same two brand
 * colours, until the design stage replaces this file.
 */
.qf-entry {
    max-width: 52rem;
}

.qf-lead {
    margin: 0 0 1.5rem;
    font-size: 1.05rem;
    color: var(--qf-muted);
}

.qf-body > *:first-child {
    margin-top: 0;
}

.qf-body img {
    max-width: 100%;
    height: auto;
}

.qf-fields {
    margin: 2.5rem 0 0;
    border-top: 1px solid var(--qf-line);
}

.qf-field {
    border-bottom: 1px solid var(--qf-line);
    padding: 1.5rem 0;
}

.qf-field-label {
    margin: 0 0 .75rem;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--qf-deep-green);
}

.qf-field-body > *:last-child {
    margin-bottom: 0;
}

.qf-field-note {
    font-size: .85rem;
    color: var(--qf-muted);
}

.qf-table-wrap {
    overflow-x: auto;
}

.qf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
    text-align: left;
}

.qf-table th,
.qf-table td {
    border-bottom: 1px solid var(--qf-line);
    padding: .6rem .75rem .6rem 0;
    vertical-align: top;
}

.qf-table th {
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--qf-muted);
}

.qf-kv {
    margin: 0;
}

.qf-kv dt {
    font-weight: 600;
    margin-top: .75rem;
}

.qf-kv dt:first-child {
    margin-top: 0;
}

.qf-kv dd {
    margin: .15rem 0 0;
}

.qf-bullets,
.qf-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.qf-bullets li {
    border-bottom: 1px solid var(--qf-line);
    padding: .35rem 0;
}

.qf-bullets--links,
.qf-bullets--terms {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
}

.qf-bullets--links li,
.qf-bullets--terms li {
    border-bottom: 0;
    padding: 0;
}

.qf-checklist-item {
    border-bottom: 1px solid var(--qf-line);
    padding: .6rem 0;
}

.qf-checklist-question {
    margin: 0;
    font-weight: 600;
}

.qf-checklist-required {
    font-size: .7rem;
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--qf-deep-green);
}

.qf-checklist-help {
    margin: .15rem 0 0;
    font-size: .9rem;
    color: var(--qf-muted);
}

.qf-button {
    display: inline-block;
    border: 1px solid var(--qf-deep-green);
    border-radius: 2px;
    padding: .5rem 1rem;
    font-weight: 600;
    text-decoration: none;
}

.qf-cta-block {
    margin: 2.5rem 0 0;
    border-top: 1px solid var(--qf-line);
    padding-top: 1.5rem;
}

.qf-cta-note {
    margin: 0 0 .75rem;
    font-size: .9rem;
    color: var(--qf-muted);
}

.qf-archive-head {
    margin-bottom: 2rem;
}

.qf-cards {
    display: grid;
    gap: 1.5rem;
}

.qf-card {
    border: 1px solid var(--qf-line);
    border-radius: 2px;
    padding: 1.25rem;
}

.qf-card-title {
    margin: 0 0 .5rem;
    font-size: 1.15rem;
}

.qf-card-title a {
    text-decoration: none;
}

.qf-card-title a:hover,
.qf-card-title a:focus {
    text-decoration: underline;
}

.qf-card-summary {
    margin: 0;
    font-size: .95rem;
    color: var(--qf-muted);
}

.qf-card-meta {
    margin-top: .75rem;
    font-size: .8rem;
}

.qf-card-meta .qf-bullets li a {
    color: var(--qf-muted);
}

.qf-pagination {
    margin-top: 2rem;
}

.qf-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

@media (min-width: 48rem) {
    .qf-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/*
 * The inquiry form (parts/inquiry-form.php). Framework styling on the same
 * tokens as the rest of this file, until the design stage replaces it. Nothing
 * here is needed for the form to work: the markup posts without JavaScript and
 * every control is native.
 */
.qf-form {
    max-width: 52rem;
}

.qf-form-grid {
    display: grid;
    gap: 1.25rem;
    margin: 1.5rem 0 0;
}

.qf-form-item {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin: 0;
}

.qf-form-label {
    font-size: .85rem;
    font-weight: 600;
}

.qf-form-required {
    margin-left: .35rem;
    font-size: .7rem;
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--qf-muted);
}

.qf-form-input {
    width: 100%;
    border: 1px solid var(--qf-line);
    border-radius: 2px;
    padding: .5rem .6rem;
    font: inherit;
    color: var(--qf-ink);
    background-color: #FFFFFF;
}

.qf-form-input[aria-invalid="true"] {
    border-color: #B3261E;
}

.qf-form-hint {
    font-size: .8rem;
    color: var(--qf-muted);
}

.qf-form-error {
    margin: 1.5rem 0 0;
    border-left: 3px solid #B3261E;
    padding: .5rem .75rem;
    font-size: .9rem;
    background-color: rgba(179, 38, 30, .06);
}

.qf-form-error-message {
    margin: 0;
}

.qf-form-error-list {
    margin: .35rem 0 0;
    padding-left: 1.1rem;
    font-size: .85rem;
}

.qf-form-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.qf-form-consent .qf-form-label {
    display: flex;
    gap: .5rem;
    font-weight: 400;
}

.qf-form-submit {
    margin: 1.75rem 0 0;
}

.qf-form-button {
    font: inherit;
    cursor: pointer;
    background-color: var(--qf-deep-green);
    color: #FFFFFF;
}

.qf-form :focus-visible {
    outline: 2px solid var(--qf-deep-green);
    outline-offset: 2px;
}

@media (min-width: 48rem) {
    .qf-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qf-form-item--wide {
        grid-column: 1 / -1;
    }
}

/* ==========================================================================
   HOMEPAGE DESIGN & ANIMATION SYSTEM (DESIGN v5.0 IMPLEMENTATION)
   ========================================================================== */

/* Utility containers */
.qf-container {
    width: min(calc(100% - 48px), 1320px);
    margin-inline: auto;
}

.qf-wide {
    width: min(calc(100% - 24px), 1500px);
    margin-inline: auto;
}

.qf-section {
    padding: 100px 0;
    position: relative;
}

.qf-bg-sand { background-color: var(--sand); }
.qf-bg-soft { background-color: var(--soft); }
.qf-bg-pale { background-color: var(--pale); }

/* Eyebrows & Section Headers */
.qf-eyebrow {
    margin: 0 0 16px;
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--olive);
}

.qf-eyebrow--lime { color: var(--signal); }
.qf-eyebrow--signal { color: var(--signal); }
.qf-eyebrow--dark { color: #FFFFFF; }

.qf-section-title {
    font-size: clamp(1.6rem, 2.75vw, 2.5rem);
    line-height: 1.05;
    margin: 0 0 18px;
    letter-spacing: -0.04em;
    color: var(--ink);
}

.qf-lead {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--slate);
    max-width: 680px;
    margin: 0;
}

.qf-section-intro {
    text-align: center;
    margin-bottom: 54px;
}

.qf-section-intro .qf-lead {
    margin-inline: auto;
}

.qf-section-head-split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 52px;
}

.qf-center-action {
    text-align: center;
    margin-top: 48px;
}

/* Reusable Interactive Buttons with dynamic hover animations */
.qf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 28px;
    border-radius: 10px;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 800;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--qf-transition);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.qf-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.qf-btn--primary {
    background-color: var(--brand);
    color: #FFFFFF;
}

.qf-btn--primary:hover {
    background-color: var(--deep);
    color: #FFFFFF;
}

.qf-btn--light {
    background-color: #FFFFFF;
    color: var(--deep);
}

.qf-btn--light:hover {
    background-color: var(--signal);
    color: var(--deep);
}

.qf-btn--dark {
    background-color: var(--deep);
    color: #FFFFFF;
}

.qf-btn--dark:hover {
    background-color: var(--ink);
    color: var(--signal);
}

.qf-btn--ghost {
    background: transparent;
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.4);
}

.qf-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #FFFFFF;
    color: #FFFFFF;
}

.qf-btn--outline {
    background: transparent;
    color: var(--deep);
    border-color: var(--deep);
}

.qf-btn--outline:hover {
    background: var(--deep);
    color: #FFFFFF;
}

.qf-btn--signal {
    background-color: var(--signal);
    color: var(--deep);
}

.qf-btn--signal:hover {
    background-color: #FFFFFF;
    color: var(--deep);
}

.qf-btn--lg {
    min-height: 58px;
    padding: 0 34px;
    font-size: 1.05rem;
}

.qf-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    border: 2px solid var(--deep);
    background: #FFFFFF;
    color: var(--deep);
    font-size: 1.25rem;
    font-weight: 800;
    cursor: pointer;
    transition: all var(--qf-transition);
}

.qf-icon-btn:hover {
    background: var(--signal);
    transform: scale(1.05);
}

/* Gentle Keyframe Animations */
@keyframes qfFadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes qfSlideFade {
    from {
        opacity: 0.15;
        transform: translateX(18px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes qfPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(212, 255, 0, 0.6);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(212, 255, 0, 0);
    }
}

.qf-btn--pulse {
    animation: qfPulse 3s infinite;
}

/* Scroll Reveal States */
[data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal].qf-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* 1. HERO SECTION (TAMA-INSPIRED ANGULAR CUTS & LAYOUT) */
.qf-hero {
    position: relative;
    overflow: hidden;
    min-height: 780px;
    padding-top: 24px;
    background: #FFFFFF;
}

.qf-hero-slide {
    display: none;
}

.qf-hero-slide.active {
    display: block;
    animation: qfSlideFade 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.qf-hero-grid {
    display: grid;
    grid-template-columns: 32% 48% 20%;
    gap: 12px;
    min-height: 540px;
}

.qf-hero-copy {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 60px 48px 80px;
    background: var(--olive);
    color: #FFFFFF;
    clip-path: polygon(0 4%, 95% 0, 85% 88%, 0 100%);
    box-shadow: var(--qf-shadow);
}

.qf-hero-copy-inner {
    max-width: 440px;
}

.qf-hero-title {
    font-size: clamp(2.6rem, 4.5vw, 4.8rem);
    line-height: 0.94;
    margin: 0 0 20px;
    color: #FFFFFF;
    letter-spacing: -0.045em;
}

.qf-hero-lead {
    font-size: 1.1rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 32px;
}

.qf-hero-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.qf-hero-center {
    position: relative;
    overflow: hidden;
    margin-left: -40px;
    background: var(--pale);
    clip-path: polygon(8% 0, 100% 8%, 94% 94%, 0 100%);
}

.qf-hero-center img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.9);
    transition: transform 0.8s ease;
}

.qf-hero-slide.active .qf-hero-center img {
    transform: scale(1.03);
}

.qf-hero-center::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 48%;
    background: linear-gradient(transparent, rgba(0, 185, 188, 0.88));
}

.qf-hero-caption {
    position: absolute;
    z-index: 2;
    left: 12%;
    right: 12%;
    bottom: 50px;
    color: #FFFFFF;
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2vw, 2.1rem);
    font-weight: 800;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.qf-hero-side {
    position: relative;
    overflow: hidden;
    margin-left: -46px;
    clip-path: polygon(8% 4%, 100% 0, 100% 100%, 0 90%);
}

.qf-hero-side img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qf-hero-side::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(212, 255, 0, 0.2), rgba(1, 44, 68, 0.25));
}

.qf-hero-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 24px;
    color: var(--olive);
}

.qf-slide-count {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--deep);
}

.qf-progress-bars {
    display: flex;
    gap: 8px;
}

.qf-progress-bars button {
    width: 54px;
    height: 8px;
    border: 0;
    border-radius: 2px;
    background: rgba(1, 44, 68, 0.3);
    transform: skewX(-20deg);
    cursor: pointer;
    transition: background-color var(--qf-transition);
}

.qf-progress-bars button.active {
    background: var(--signal);
    box-shadow: 0 0 10px rgba(212, 255, 0, 0.8);
}

.qf-hero-landscape {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.95), transparent), repeating-linear-gradient(90deg, #F5F7F6 0 120px, #FFFFFF 120px 240px);
    opacity: 0.6;
    pointer-events: none;
}

/* 2. TRUST STRIP (EVIDENCE METRICS) */
.qf-trust-strip {
    position: relative;
    z-index: 5;
    background: #FFFFFF;
    border-top: 1px solid var(--mist);
    border-bottom: 1px solid var(--mist);
}

.qf-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.qf-trust-item {
    padding: 34px 28px;
    border-right: 1px solid var(--mist);
    transition: background-color var(--qf-transition);
}

.qf-trust-item:last-child {
    border-right: 0;
}

.qf-trust-item:hover {
    background-color: var(--soft);
}

.qf-trust-num-wrap {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}

.qf-trust-prefix {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--olive);
}

.qf-trust-num {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--deep);
    line-height: 1;
    letter-spacing: -0.03em;
}

.qf-trust-unit {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--brand);
}

.qf-trust-badge {
    display: inline-block;
    padding: 2px 8px;
    background: var(--pale);
    color: var(--deep);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.qf-trust-desc {
    display: block;
    font-size: 0.88rem;
    color: var(--slate);
    line-height: 1.4;
}

/* 3. PRODUCT RAIL & OVERSIZED CARDS */
.qf-product-shell {
    position: relative;
    width: 100%;
}

.qf-product-track {
    display: flex;
    gap: 28px;
    overflow-x: auto;
    padding: 30px 4vw 46px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.qf-product-track::-webkit-scrollbar {
    display: none;
}

.qf-product-card {
    flex: 0 0 380px;
    min-height: 620px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    border-radius: var(--qf-radius-lg);
    background: #FFFFFF;
    box-shadow: var(--qf-shadow);
    scroll-snap-align: start;
    transition: transform var(--qf-transition), box-shadow var(--qf-transition);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.qf-product-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--qf-shadow-hover);
}

.qf-product-card.featured {
    transform: translateY(-16px);
    border: 2px solid var(--brand);
}

.qf-product-card.featured:hover {
    transform: translateY(-24px);
    box-shadow: var(--qf-shadow-hover);
}

.qf-product-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 26px 28px 14px;
}

.qf-product-brand {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--deep);
    letter-spacing: -0.02em;
}

.qf-badge {
    padding: 6px 14px;
    border-radius: 0 12px 0 12px;
    background: var(--signal);
    color: var(--deep);
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.qf-product-header {
    padding: 0 28px 16px;
}

.qf-product-name {
    margin: 0 0 6px;
    font-size: 1.6rem;
    line-height: 1.2;
}

.qf-product-name a {
    color: var(--ink);
    text-decoration: none;
}

.qf-product-name a:hover {
    color: var(--deep);
}

.qf-product-sub {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--deep);
}

.qf-product-image-box {
    height: 290px;
    margin: 0 28px 20px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--pale);
    transition: transform var(--qf-transition);
}

.qf-product-card:hover .qf-product-image-box img {
    transform: scale(1.05);
}

.qf-product-image-box img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.qf-product-footer {
    padding: 0 28px 28px;
}

.qf-product-desc {
    margin: 0 0 18px;
    color: var(--slate);
    font-size: 0.92rem;
    line-height: 1.55;
    min-height: 48px;
}

.qf-product-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--olive);
    text-decoration: none;
    transition: transform var(--qf-transition), color var(--qf-transition);
}

.qf-product-action:hover {
    color: var(--deep);
    transform: translateX(4px);
}

.qf-rail-controls {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
}

/* 4. CUSTOM FIBC 6 DECISIONS GRID */
.qf-decision-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.qf-decision-card {
    padding: 34px 30px;
    border: 1px solid var(--mist);
    border-radius: var(--qf-radius);
    background: #FFFFFF;
    transition: all var(--qf-transition);
}

.qf-decision-card:hover {
    transform: translateY(-4px);
    border-color: var(--brand);
    box-shadow: 0 12px 30px rgba(1, 44, 68, 0.12);
}

.qf-decision-card:nth-child(even) {
    background: var(--pale);
}

.qf-decision-card--highlight {
    background: var(--signal) !important;
    color: var(--deep);
    border-color: transparent;
}

.qf-decision-card--highlight:hover {
    box-shadow: 0 12px 30px rgba(212, 255, 0, 0.35);
}

.qf-decision-step {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    color: var(--olive);
    margin-bottom: 24px;
}

.qf-decision-card--highlight .qf-decision-step {
    color: var(--deep);
}

.qf-decision-title {
    margin: 0 0 12px;
    font-size: 1.4rem;
    line-height: 1.25;
}

.qf-decision-desc {
    margin: 0;
    font-size: 0.94rem;
    color: var(--slate);
    line-height: 1.6;
}

.qf-decision-card--highlight .qf-decision-desc {
    color: rgba(0, 185, 188, 0.85);
    font-weight: 500;
}

/* The six-decisions section's "Open Complete Selection Guide" CTA is inverted for
   this one button at the owner's request: lake-teal #00B9BC at rest and deep navy
   #012C44 on hover, the reverse of the shared .qf-btn--primary. Scoped to the
   homepage #custom section, so every other primary button keeps Brand navy. */
#custom .qf-center-action .qf-btn--primary {
    background-color: var(--deep);
    color: #FFFFFF;
}

#custom .qf-center-action .qf-btn--primary:hover,
#custom .qf-center-action .qf-btn--primary:focus-visible {
    background-color: var(--brand);
    color: #FFFFFF;
}

/* 5. APPLICATION COLLAGE (ASYMMETRIC INDUSTRIAL VIEWS) */
.qf-app-collage {
    display: grid;
    grid-template-columns: 20% 28% 24% 28%;
    gap: 14px;
    align-items: stretch;
}

.qf-collage-col {
    display: grid;
    gap: 14px;
}

.qf-app-img {
    position: relative;
    overflow: hidden;
    min-height: 320px;
    background: var(--pale);
    border-radius: 6px;
}

.qf-clip-a {
    clip-path: polygon(0 0, 95% 5%, 100% 100%, 6% 95%);
}

.qf-clip-b {
    clip-path: polygon(6% 4%, 100% 0, 95% 95%, 0 100%);
}

.qf-clip-c {
    clip-path: polygon(0 6%, 94% 0, 100% 92%, 6% 100%);
}

.qf-app-short { min-height: 200px; }
.qf-app-tall { min-height: 420px; }

.qf-app-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.qf-app-img:hover img {
    transform: scale(1.06);
}

.qf-app-img::after {
    content: "";
    position: absolute;
    inset: 40% 0 0;
    background: linear-gradient(transparent, rgba(0, 185, 188, 0.75));
    transition: opacity var(--qf-transition);
}

.qf-app-tag {
    position: absolute;
    z-index: 2;
    left: 20px;
    bottom: 20px;
    padding: 8px 14px;
    border-radius: 6px;
    background: var(--signal);
    color: var(--deep);
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 6. WHY QINFENG: TAMA-STYLE SKEWED EXPANDING ACCORDION CARDS */
.qf-why-tama-wrapper {
    position: relative;
}

.qf-why-cards {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 640px;
    width: 100%;
}

.qf-why-card {
    position: relative;
    flex: 0.32;
    min-width: 82px;
    max-width: 96px;
    height: 540px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 18px;
    overflow: hidden;
    transform: skew(-3deg);
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    transition: flex 0.5s cubic-bezier(0.25, 1, 0.5, 1),
                max-width 0.5s cubic-bezier(0.25, 1, 0.5, 1),
                height 0.5s cubic-bezier(0.25, 1, 0.5, 1),
                border-radius 0.4s ease,
                box-shadow 0.4s ease;
}

/* Semi-transparent dark overlay for background legibility */
.qf-why-card-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(1, 44, 68, 0.45);
    border-radius: inherit;
    transition: background 0.4s ease;
    pointer-events: none;
}

/* Closed state button container */
.qf-why-closed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 52px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #FFFFFF;
    outline: none;
    z-index: 3;
    transition: opacity 0.25s ease;
}

.qf-why-closed-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
    transform: skew(3deg); /* Counter-skew container */
}

/* Vertical rotated text */
.qf-why-closed-title {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #FFFFFF;
    white-space: nowrap;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    transition: color 0.25s ease;
}

.qf-why-closed-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    color: #FFFFFF;
    transition: background 0.25s ease, transform 0.25s ease, color 0.25s ease;
}

.qf-why-card:not(.open):hover .qf-why-closed-title {
    color: var(--signal);
}

.qf-why-card:not(.open):hover .qf-why-closed-arrow {
    background: var(--signal);
    color: var(--ink);
    transform: scale(1.1);
}

/* Open State content container */
.qf-why-open {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 60px 52px;
    transition: opacity 0.35s ease 0.15s, visibility 0.35s ease 0.15s;
    z-index: 2;
}

.qf-why-open-inner {
    max-width: 640px;
    transform: skew(3deg); /* Counter-skew text inside card */
    color: #FFFFFF;
}

.qf-why-open-title {
    font-size: clamp(2rem, 3.2vw, 3.5rem);
    line-height: 1.1;
    margin: 0 0 16px;
    color: #FFFFFF;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

.qf-why-open-desc {
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
    margin: 0 0 28px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

/* OPEN ACTIVE STATE */
.qf-why-card.open {
    flex: 3.5;
    max-width: 100%;
    height: 640px;
    border-radius: 24px;
    cursor: default;
    box-shadow: 0 20px 50px rgba(1, 44, 68, 0.32);
}

.qf-why-card.open .qf-why-card-backdrop {
    background: linear-gradient(90deg, rgba(1, 44, 68, 0.88) 0%, rgba(1, 44, 68, 0.65) 55%, rgba(1, 44, 68, 0.25) 100%);
}

.qf-why-card.open .qf-why-closed {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.qf-why-card.open .qf-why-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* The four homepage capability cards are flat brand colours at the owner's
   request, one per card: Heritage #00B9BC, Expertise deep green #0D4B3E,
   Logistics Brand Green #55C83A, Innovation deep navy #012C44. Scoped
   with body.home because the same accordion is reused on the OEM page, which has
   its own palette. The placeholder photo is switched off — the cards carry the
   colours themselves — and each card's overlay repeats its own colour, so the
   fill stays exactly the hex above instead of the shared navy 45% wash (drop the
   background-image line if real photography ever replaces the placeholders). */
body.home #why-panel-1,
body.home #why-panel-2,
body.home #why-panel-3,
body.home #why-panel-4 {
    background-image: none !important;
}

/* Card 1 — 湖蓝绿 #00B9BC: white type, signal-lime eyebrow (unchanged defaults). */
body.home #why-panel-1 {
    background-color: #00B9BC !important;
}
body.home #why-panel-1 .qf-why-card-backdrop {
    background: rgba(0, 185, 188, 0.25) !important;
}
body.home #why-panel-1.open .qf-why-card-backdrop {
    background: linear-gradient(90deg, rgba(0, 185, 188, 0.94) 0%, rgba(0, 185, 188, 0.82) 55%, rgba(0, 185, 188, 0.6) 100%) !important;
}

/* Card 2 — 深绿 #0D4B3E: white type, signal-lime eyebrow (unchanged defaults). */
body.home #why-panel-2 {
    background-color: #0D4B3E !important;
}
body.home #why-panel-2 .qf-why-card-backdrop {
    background: rgba(13, 75, 62, 0.25) !important;
}
body.home #why-panel-2.open .qf-why-card-backdrop {
    background: linear-gradient(90deg, rgba(13, 75, 62, 0.94) 0%, rgba(13, 75, 62, 0.82) 55%, rgba(13, 75, 62, 0.6) 100%) !important;
}

/* Card 3 — Brand Green #55C83A: a light green, so its type turns deep navy
   #012C44 (title, eyebrow) and deep green #0D4B3E (body) with the dark
   text-shadow dropped, and the round arrow chip inverts to navy instead of the
   shared lime. */
body.home #why-panel-3 {
    background-color: #55C83A !important;
}
body.home #why-panel-3 .qf-why-card-backdrop {
    background: rgba(85, 200, 58, 0.25) !important;
}
body.home #why-panel-3.open .qf-why-card-backdrop {
    background: linear-gradient(90deg, rgba(85, 200, 58, 0.94) 0%, rgba(85, 200, 58, 0.82) 55%, rgba(85, 200, 58, 0.6) 100%) !important;
}
body.home #why-panel-3 .qf-why-closed-title,
body.home #why-panel-3 .qf-why-open-title {
    color: #012C44 !important;
    text-shadow: none !important;
}
body.home #why-panel-3 .qf-why-open-desc {
    color: #0D4B3E !important;
    text-shadow: none !important;
}
body.home #why-panel-3 .qf-why-open .qf-eyebrow {
    color: #012C44 !important;
}
body.home #why-panel-3 .qf-why-closed-arrow {
    background: rgba(1, 44, 68, 0.15) !important;
    color: #012C44 !important;
}
body.home #why-panel-3:not(.open):hover .qf-why-closed-title {
    color: #012C44 !important;
}
body.home #why-panel-3:not(.open):hover .qf-why-closed-arrow {
    background: #012C44 !important;
    color: #D4FF00 !important;
}

/* Card 4 — deep navy #012C44: a dark fill again, so it keeps the component's
   shared white type and signal-lime eyebrow and needs only its fill and the
   colour-matched overlay (the card 3 navy-type rules above no longer touch it). */
body.home #why-panel-4 {
    background-color: #012C44 !important;
}
body.home #why-panel-4 .qf-why-card-backdrop {
    background: rgba(1, 44, 68, 0.25) !important;
}
body.home #why-panel-4.open .qf-why-card-backdrop {
    background: linear-gradient(90deg, rgba(1, 44, 68, 0.94) 0%, rgba(1, 44, 68, 0.82) 55%, rgba(1, 44, 68, 0.6) 100%) !important;
}

/* 7. VISIBLE PRODUCTION PROCESS GRID */
.qf-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.qf-process-card {
    overflow: hidden;
    border-radius: var(--qf-radius);
    background: #FFFFFF;
    border: 1px solid var(--mist);
    transition: all var(--qf-transition);
}

.qf-process-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--qf-shadow);
}

.qf-process-img-box {
    height: 220px;
    overflow: hidden;
    background: var(--pale);
}

.qf-process-img-box img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.qf-process-card:hover .qf-process-img-box img {
    transform: scale(1.06);
}

.qf-process-body {
    padding: 24px;
}

.qf-process-num {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-top: -46px;
    position: relative;
    border-radius: 50%;
    background: var(--signal);
    color: var(--deep);
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

.qf-process-title {
    margin: 18px 0 8px;
    font-size: 1.25rem;
    line-height: 1.3;
}

.qf-process-desc {
    margin: 0;
    color: var(--slate);
    font-size: 0.88rem;
    line-height: 1.5;
}

/* 8. QUALITY MADE VISIBLE STRIP */
.qf-quality-strip {
    background: var(--deep);
    color: #FFFFFF;
}

.qf-quality-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    min-height: 640px;
}

.qf-quality-image {
    position: relative;
    overflow: hidden;
}

.qf-quality-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qf-quality-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(0, 185, 188, 0.35));
}

.qf-quality-copy {
    padding: 75px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.qf-quality-title {
    font-size: clamp(1.6rem, 2.4vw, 2.25rem);
    line-height: 1.05;
    margin: 0 0 16px;
    color: #FFFFFF;
}

.qf-quality-lead {
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 32px;
}

.qf-proof-list {
    display: grid;
    gap: 14px;
    margin-bottom: 34px;
}

.qf-proof-item {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 16px;
    align-items: center;
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    transition: all var(--qf-transition);
}

.qf-proof-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--signal);
}

.qf-proof-badge {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--signal);
    color: var(--deep);
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 800;
}

.qf-proof-name {
    display: block;
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: #FFFFFF;
    margin-bottom: 3px;
}

.qf-proof-sub {
    display: block;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
}

/* 9. TESTIMONIALS / CASE STUDIES SLIDER */
.qf-story-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.qf-story-copy {
    min-height: 360px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.qf-story-slide {
    animation: qfFadeInUp 0.5s ease both;
}

.qf-story-quote {
    margin: 0 0 24px;
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 2.8vw, 2.7rem);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -0.04em;
    color: var(--ink);
}

.qf-story-meta {
    margin: 0 0 28px;
    color: var(--slate);
    font-size: 0.95rem;
}

.qf-story-meta strong {
    color: var(--deep);
}

.qf-story-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.qf-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 0;
    background: rgba(1, 44, 68, 0.35);
    cursor: pointer;
    transition: all var(--qf-transition);
}

.qf-dot.active {
    background: var(--signal);
    box-shadow: 0 0 0 3px var(--deep);
    transform: scale(1.15);
}

.qf-story-image-box {
    height: 500px;
    overflow: hidden;
    clip-path: polygon(0 0, 95% 5%, 100% 100%, 6% 94%);
    border-radius: 12px;
    background: var(--brand);
}

.qf-story-image-box img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.35s ease, transform 0.8s ease;
}

.qf-story-image-box:hover img {
    transform: scale(1.04);
}

/* 10. PACKING & CONTAINER LOADING */
.qf-packing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 65px;
    align-items: center;
}

.qf-packing-image {
    height: 520px;
    overflow: hidden;
    clip-path: polygon(6% 4%, 100% 0, 94% 95%, 0 100%);
    border-radius: 12px;
    background: var(--pale);
}

.qf-packing-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.qf-packing-image:hover img {
    transform: scale(1.04);
}

.qf-spec-lines {
    margin: 32px 0 36px;
    border-top: 1px solid var(--mist);
    border-bottom: 1px solid var(--mist);
}

.qf-spec-line {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 0;
    border-bottom: 1px solid var(--mist);
}

.qf-spec-line:last-child {
    border-bottom: 0;
}

.qf-spec-line strong {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--deep);
}

.qf-spec-line span {
    color: var(--slate);
    font-size: 0.9rem;
}

/* 11. STREAMLINED RFQ FORM SECTION */
.qf-rfq-card {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    overflow: hidden;
    border-radius: var(--qf-radius-lg);
    box-shadow: var(--qf-shadow);
    border: 1px solid var(--mist);
    background: #FFFFFF;
}

.qf-rfq-sidebar {
    padding: 56px 48px;
    background: var(--brand);
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.qf-rfq-title {
    font-size: clamp(1.4rem, 1.9vw, 1.9rem);
    line-height: 1.1;
    margin: 0 0 16px;
    color: #FFFFFF;
}

.qf-rfq-desc {
    font-size: 1rem;
    line-height: 1.6;
    color: #FFFFFF;
    margin: 0 0 28px;
}

.qf-rfq-thumb {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
    box-shadow: 0 8px 24px rgba(0, 185, 188, 0.15);
}

.qf-rfq-thumb img {
    display: block;
    width: 100%;
    height: auto;
}

.qf-rfq-guarantees {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: #FFFFFF;
}

.qf-rfq-body {
    padding: 56px 52px;
    background: #FFFFFF;
}

.qf-rfq-body .qf-form {
    max-width: 100%;
}

.qf-rfq-body .qf-form-grid {
    margin-top: 0;
}

.qf-rfq-body .qf-form-input {
    border: 1px solid var(--mist);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 0.95rem;
    transition: all var(--qf-transition);
}

.qf-rfq-body .qf-form-input:focus {
    border-color: var(--deep);
    outline: 3px solid rgba(212, 255, 0, 0.65);
}

.qf-rfq-body .qf-form-button {
    background-color: var(--brand);
    color: #FFFFFF;
    border-radius: 8px;
    padding: 14px 28px;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 800;
    border: 2px solid transparent;
    transition: all var(--qf-transition);
}

.qf-rfq-body .qf-form-button:hover {
    background-color: var(--deep);
    color: #FFFFFF;
    transform: translateY(-2px);
}

/* 12. CALL TO ACTION BANNER */
.qf-cta-banner {
    position: relative;
    overflow: hidden;
    background: var(--brand);
    color: #FFFFFF;
    padding: 85px 0;
}

.qf-cta-banner::after {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    right: 6%;
    bottom: -220px;
    background: rgba(212, 255, 0, 0.45);
    transform: rotate(22deg);
    pointer-events: none;
}

.qf-cta-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.qf-cta-title {
    font-size: clamp(1.7rem, 2.75vw, 2.5rem);
    line-height: 1.05;
    margin: 0 0 14px;
    color: #FFFFFF;
}

.qf-cta-sub {
    font-size: 1.15rem;
    color: #FFFFFF;
    max-width: 600px;
    margin: 0;
}

.qf-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    flex-shrink: 0;
}

/* The homepage CTA band is Brand Green #55C83A at the owner's request; the shared
   band stays navy on every other page, so this is scoped with body.home. The
   headline keeps its white, while the eyebrow and the sub-line turn deep navy
   #012C44 to stay legible on the green. Both buttons are inverted on this band
   only: "Request Full RFQ Review" is signal lime #D4FF00 at rest and white on
   hover, "Contact Engineering" is white at rest and deep navy on hover. */
body.home .qf-cta-banner {
    background-color: #55C83A;
}

body.home .qf-cta-banner .qf-eyebrow--dark,
body.home .qf-cta-banner .qf-cta-sub {
    color: #012C44;
}

body.home .qf-cta-banner .qf-btn--light {
    background-color: #D4FF00;
    color: #012C44;
}

body.home .qf-cta-banner .qf-btn--light:hover,
body.home .qf-cta-banner .qf-btn--light:focus-visible {
    background-color: #FFFFFF;
    color: #012C44;
}

body.home .qf-cta-banner .qf-btn--dark {
    background-color: #FFFFFF;
    color: #012C44;
}

body.home .qf-cta-banner .qf-btn--dark:hover,
body.home .qf-cta-banner .qf-btn--dark:focus-visible {
    background-color: #012C44;
    color: #FFFFFF;
}

/* RESPONSIVE ADAPTATIONS */
@media (max-width: 1080px) {
    .qf-hero-grid {
        grid-template-columns: 44% 56%;
    }
    .qf-hero-side {
        display: none;
    }
    .qf-decision-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .qf-app-collage {
        grid-template-columns: 1fr 1fr;
    }
    .qf-why-cards {
        gap: 14px;
        min-height: 560px;
    }
    .qf-why-card {
        height: 480px;
        min-width: 70px;
    }
    .qf-why-card.open {
        height: 560px;
    }
    .qf-why-open {
        padding: 40px 32px;
    }
    .qf-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .qf-quality-grid,
    .qf-story-wrap,
    .qf-packing-grid,
    .qf-rfq-card {
        grid-template-columns: 1fr;
    }
    .qf-quality-copy {
        padding: 50px 32px;
    }
}

@media (max-width: 768px) {
    .qf-section {
        padding: 65px 0;
    }
    .qf-hero-grid {
        display: flex;
        flex-direction: column;
    }
    .qf-hero-copy {
        clip-path: polygon(0 0, 100% 0, 100% 93%, 0 100%);
        padding: 50px 24px 65px;
    }
    .qf-hero-center {
        margin: -25px 0 0;
        min-height: 380px;
        clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 100%);
    }
    .qf-hero-caption {
        bottom: 28px;
    }
    .qf-trust-grid {
        grid-template-columns: 1fr 1fr;
    }
    .qf-trust-item {
        padding: 24px 18px;
    }
    .qf-trust-item:nth-child(2) {
        border-right: 0;
    }
    .qf-trust-item:nth-child(-n+2) {
        border-bottom: 1px solid var(--mist);
    }
    .qf-section-head-split {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .qf-decision-grid {
        grid-template-columns: 1fr;
    }
    .qf-app-collage {
        grid-template-columns: 1fr;
    }
    .qf-process-grid {
        grid-template-columns: 1fr;
    }
    .qf-why-cards {
        flex-direction: column;
        gap: 12px;
        min-height: auto;
    }
    .qf-why-card {
        transform: none;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: 72px;
        flex: none;
        border-radius: 14px;
    }
    .qf-why-card-backdrop {
        background: rgba(1, 44, 68, 0.7);
    }
    .qf-why-closed {
        padding-top: 0;
        padding-inline: 20px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .qf-why-closed-inner {
        transform: none;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        gap: 12px;
    }
    .qf-why-closed-title {
        writing-mode: horizontal-tb;
        transform: none;
        font-size: 1.1rem;
        letter-spacing: 0.08em;
    }
    .qf-why-closed-arrow {
        width: 32px;
        height: 32px;
    }
    .qf-why-card.open {
        transform: none;
        height: auto;
        min-height: 420px;
        flex: none;
        border-radius: 16px;
    }
    .qf-why-card.open .qf-why-card-backdrop {
        background: linear-gradient(180deg, rgba(1, 44, 68, 0.6) 0%, rgba(1, 44, 68, 0.94) 100%);
    }
    .qf-why-open {
        padding: 32px 24px;
        position: relative;
    }
    .qf-why-open-inner {
        transform: none;
    }
    .qf-cta-inner {
        flex-direction: column;
        align-items: flex-start;
    }
    .qf-rfq-sidebar,
    .qf-rfq-body {
        padding: 36px 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   13. CONTACT PAGE SPECIFIC STYLES (CLEAN & MINIMALIST)
   ========================================================================== */
.qf-contact-simple {
    background: #FAFBFB;
}

/* Hero: copy on the left, support photo on the right over brush strokes.
   The photo card bleeds into the bottom edge of the band on desktop, so the
   section carries no bottom padding and the copy column keeps its own. */
.qf-contact-hero {
    position: relative;
    background: #EAF0E8;
    padding: 76px 0 0;
    color: var(--ink);
    overflow: hidden;
    border-bottom: 1px solid #DCE5D9;
}

.qf-contact-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    gap: 32px;
    align-items: end;
}

.qf-contact-hero-copy {
    position: relative;
    z-index: 2;
    max-width: 640px;
    padding-bottom: 84px;
    animation: qfFadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.qf-contact-hero-title {
    font-size: clamp(2.3rem, 4.1vw, 3.4rem);
    line-height: 1.06;
    color: var(--deep);
    margin: 0 0 24px;
    letter-spacing: -0.04em;
}

.qf-contact-hero-lead {
    font-size: 1.06rem;
    line-height: 1.62;
    color: #4A5B53;
    margin: 0 0 16px;
    max-width: 540px;
}

.qf-contact-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    margin-top: 30px;
}

.qf-contact-hero-link {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 800;
    color: var(--deep);
    text-decoration: none;
    border-bottom: 2px solid var(--brand);
    padding-bottom: 2px;
    transition: color var(--qf-transition), border-color var(--qf-transition);
}

.qf-contact-hero-link:hover,
.qf-contact-hero-link:focus-visible {
    color: var(--olive);
    border-color: var(--olive);
}

.qf-contact-hero-media {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    justify-self: center;
    align-self: end;
    animation: qfFadeInUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
}

/* Decorative brush strokes, drawn in the brand palette. They sit behind the
   photo and spill past it on every side; the section clips them. */
.qf-contact-hero-strokes {
    position: absolute;
    top: -13%;
    left: -9%;
    width: 118%;
    height: auto;
    z-index: 0;
    pointer-events: none;
}

.qf-contact-hero-photo {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    border-radius: 26px 26px 0 0;
    box-shadow: 0 24px 60px rgba(0, 185, 188, 0.16);
}

.qf-contact-body {
    padding: 64px 0 88px;
}

.qf-contact-grid {
    display: grid;
    grid-template-columns: 44% 56%;
    gap: 48px;
    align-items: flex-start;
}

/* Left info column */
.qf-contact-photo-box {
    position: relative;
    border-radius: var(--qf-radius);
    overflow: hidden;
    margin-bottom: 30px;
    background: var(--mist);
    border: 1px solid var(--mist);
}

.qf-contact-photo-box img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16 / 9.5;
    object-fit: cover;
}

.qf-contact-photo-badge {
    position: absolute;
    bottom: 14px;
    left: 14px;
    background: rgba(0, 185, 188, 0.9);
    color: var(--signal);
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 4px;
    letter-spacing: 0.04em;
}

.qf-info-cards {
    display: grid;
    gap: 20px;
    margin-bottom: 28px;
}

.qf-info-card {
    background: #FFFFFF;
    border: 1px solid var(--mist);
    border-radius: var(--qf-radius);
    padding: 24px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    box-shadow: 0 4px 14px rgba(21, 33, 30, 0.03);
}

.qf-info-icon {
    font-size: 1.6rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: var(--pale);
    color: var(--deep);
    flex-shrink: 0;
}

.qf-info-details h3 {
    font-size: 1.15rem;
    color: var(--deep);
    margin: 0 0 4px;
    line-height: 1.3;
}

.qf-info-name {
    font-size: 0.88rem;
    color: var(--slate);
    margin: 0 0 10px;
    font-weight: 500;
}

.qf-info-line {
    font-size: 0.88rem;
    color: var(--ink);
    margin: 0 0 6px;
    line-height: 1.5;
}

.qf-info-line strong {
    color: var(--deep);
}

.qf-info-line:last-child {
    margin-bottom: 0;
}

.qf-info-summary {
    background: #FFFFFF;
    border: 1px solid var(--mist);
    border-radius: var(--qf-radius);
    padding: 22px 24px;
    display: grid;
    gap: 12px;
}

.qf-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-size: 0.9rem;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--mist);
}

.qf-summary-row:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.qf-sum-label {
    color: var(--slate);
    font-weight: 600;
}

.qf-sum-val {
    color: var(--ink);
    text-align: right;
    font-weight: 500;
}

/* Right form column */
.qf-clean-form-card {
    background: #FFFFFF;
    border: 1px solid var(--mist);
    border-radius: var(--qf-radius-lg);
    box-shadow: 0 12px 36px rgba(21, 33, 30, 0.05);
    overflow: hidden;
}

.qf-clean-form-head {
    padding: 36px 40px 24px;
    border-bottom: 1px solid var(--mist);
    background: #FAFCFA;
}

.qf-clean-form-head h2 {
    font-size: 1.65rem;
    color: var(--deep);
    margin: 0 0 8px;
}

.qf-clean-form-head p {
    font-size: 0.95rem;
    color: var(--slate);
    margin: 0;
    line-height: 1.55;
}

.qf-clean-form-body {
    padding: 36px 40px 40px;
}

.qf-clean-form-body .qf-form-grid {
    margin-top: 0;
}

/* Submit button: signal lime #D4FF00 with a navy label, hovering to teal
   #00B9BC. The label is navy, not white, because white on lime is about 1.2:1
   and white on teal about 2.5:1, while navy is about 12.5:1 and 5.9:1. The
   site-wide .qf-button / .qf-form-button defaults are left as they are. */
.qf-clean-form-body .qf-form-button {
    background-color: var(--signal);
    border-color: var(--signal);
    color: #012C44;
}

.qf-clean-form-body .qf-form-button:hover,
.qf-clean-form-body .qf-form-button:focus-visible {
    background-color: var(--deep);
    border-color: var(--deep);
    color: #012C44;
    transform: translateY(-2px);
    outline: none;
}

@media (max-width: 960px) {
    /* Stacked hero: copy first, then the photo as a rounded card that no
       longer bleeds, so the band needs its own bottom padding again. */
    .qf-contact-hero {
        padding-top: 56px;
        padding-bottom: 56px;
    }
    .qf-contact-hero-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .qf-contact-hero-copy {
        max-width: none;
        padding-bottom: 0;
    }
    .qf-contact-hero-media {
        max-width: 440px;
        justify-self: start;
    }
    .qf-contact-hero-photo {
        border-radius: 22px;
    }
    .qf-contact-hero-strokes {
        top: 2%;
        left: -10%;
        width: 120%;
    }
    .qf-contact-hero-actions {
        margin-top: 24px;
    }
    .qf-contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .qf-clean-form-head,
    .qf-clean-form-body {
        padding: 28px 24px;
    }
    .qf-summary-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .qf-sum-val {
        text-align: left;
    }
}


/* ==========================================================================
   14. THANK YOU PAGE SPECIFIC STYLES
   ========================================================================== */
.qf-thankyou-page {
    background: #FAFBFB;
}

.qf-thankyou-hero {
    position: relative;
    background: #EAF0E8;
    padding: 84px 0 72px;
    color: var(--ink);
    overflow: hidden;
    border-bottom: 1px solid #DCE5D9;
}

.qf-thankyou-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.qf-thankyou-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.22;
    filter: saturate(0.85);
}

.qf-thankyou-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(246, 249, 245, 0.94) 0%, rgba(234, 242, 232, 0.90) 100%);
    z-index: 2;
}

.qf-thankyou-hero-content {
    position: relative;
    z-index: 3;
    max-width: 860px;
}

.qf-thankyou-badge-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    background: #FFFFFF;
    padding: 6px 16px;
    border-radius: 30px;
    border: 1px solid rgba(1, 44, 68, 0.35);
    box-shadow: 0 2px 8px rgba(0, 185, 188, 0.06);
}

.qf-thankyou-check-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--brand);
    color: #FFFFFF;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 900;
}

.qf-thankyou-badge-wrap .qf-eyebrow {
    margin: 0;
    color: var(--deep);
}

.qf-thankyou-title {
    font-size: clamp(2rem, 3.5vw, 3rem);
    line-height: 1.12;
    color: var(--deep);
    margin: 12px 0 16px;
    letter-spacing: -0.035em;
}

.qf-thankyou-subtitle {
    font-size: 1.15rem;
    line-height: 1.65;
    color: #4A5B53;
    margin: 0;
    max-width: 780px;
}

.qf-thankyou-body {
    padding: 64px 0 96px;
}

.qf-thankyou-card {
    background: #FFFFFF;
    border: 1px solid var(--mist);
    border-radius: var(--qf-radius-lg);
    box-shadow: 0 10px 30px rgba(21, 33, 30, 0.04);
    padding: 48px;
    margin-bottom: 56px;
}

.qf-thankyou-card-head {
    max-width: 680px;
    margin-bottom: 40px;
}

.qf-thankyou-card-head h2 {
    font-size: 1.85rem;
    color: var(--deep);
    margin: 0 0 10px;
}

.qf-thankyou-card-head p {
    font-size: 1.05rem;
    color: var(--slate);
    margin: 0;
    line-height: 1.6;
}

.qf-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

.qf-step-item {
    background: #FAFBFB;
    border: 1px solid var(--mist);
    border-radius: var(--qf-radius);
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform var(--qf-transition), border-color var(--qf-transition);
}

.qf-step-item:hover {
    transform: translateY(-4px);
    border-color: rgba(1, 44, 68, 0.5);
}

.qf-step-num {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--olive);
    margin-bottom: 12px;
    line-height: 1;
}

.qf-step-item h3 {
    font-size: 1.1rem;
    color: var(--ink);
    margin: 0 0 8px;
}

.qf-step-item p {
    font-size: 0.88rem;
    color: var(--slate);
    line-height: 1.55;
    margin: 0 0 16px;
    flex-grow: 1;
}

.qf-step-time {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--deep);
    background: var(--pale);
    padding: 4px 10px;
    border-radius: 4px;
    align-self: flex-start;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.qf-thankyou-direct-bar {
    background: #F4F7F5;
    border-radius: var(--qf-radius);
    padding: 24px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    border-left: 4px solid var(--brand);
}

.qf-direct-copy strong {
    display: block;
    font-size: 1.05rem;
    color: var(--deep);
    margin-bottom: 4px;
}

.qf-direct-copy p {
    font-size: 0.92rem;
    color: var(--slate);
    margin: 0;
}

/* Explore Section */
.qf-thankyou-explore {
    margin-top: 20px;
}

.qf-explore-head {
    margin-bottom: 28px;
}

.qf-explore-head h2 {
    font-size: 1.75rem;
    color: var(--deep);
    margin: 6px 0 0;
}

.qf-explore-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.qf-explore-card {
    background: #FFFFFF;
    border: 1px solid var(--mist);
    border-radius: var(--qf-radius);
    padding: 30px 26px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: transform var(--qf-transition), box-shadow var(--qf-transition), border-color var(--qf-transition);
}

.qf-explore-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(21, 33, 30, 0.06);
    border-color: var(--brand);
}

.qf-explore-icon {
    font-size: 2rem;
    margin-bottom: 14px;
    line-height: 1;
}

.qf-explore-card h3 {
    font-size: 1.2rem;
    color: var(--deep);
    margin: 0 0 8px;
}

.qf-explore-card p {
    font-size: 0.9rem;
    color: var(--slate);
    line-height: 1.55;
    margin: 0 0 18px;
    flex-grow: 1;
}

.qf-explore-link {
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--olive);
}

.qf-explore-card:hover .qf-explore-link {
    color: var(--brand);
}

@media (max-width: 1024px) {
    .qf-steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .qf-explore-grid {
        grid-template-columns: 1fr;
    }
    .qf-thankyou-card {
        padding: 32px 24px;
    }
}

@media (max-width: 768px) {
    .qf-steps-grid {
        grid-template-columns: 1fr;
    }
    .qf-thankyou-direct-bar {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }
}

/* ==========================================================================
   15. TAMA-STYLE BRAND OLIVE FOOTER
   ========================================================================== */
/* Footer band: teal accent background (#00B9BC) at the owner's request.
   The white text below is kept as-is; it reads at roughly 2.4:1 on this
   background, which is below WCAG AA for the small links. */
.qf-footer {
    background-color: #00B9BC;
    color: #FFFFFF;
    padding: 70px 0 40px;
    font-family: var(--font-body);
    position: relative;
    z-index: 10;
}

/* 1. Multi-column Nav Grid */
.qf-footer-nav-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 32px;
    margin-bottom: 24px;
}

.qf-fcol {
    display: flex;
    flex-direction: column;
}

.qf-fnav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.qf-fnav-list li a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 0.95rem;
    line-height: 1.4;
    transition: opacity var(--qf-transition), color var(--qf-transition);
    opacity: 0.95;
    font-weight: 500;
}

.qf-fnav-list li a:hover {
    opacity: 1;
    color: var(--signal);
    text-decoration: underline;
}

/* Contact us standalone link */
.qf-footer-contact-link-wrap {
    margin-top: 24px;
    margin-bottom: 60px;
}

.qf-footer-contact-link {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 1.55rem;
    font-weight: 700;
    font-family: var(--font-display);
    display: inline-block;
    transition: color var(--qf-transition), transform var(--qf-transition);
}

.qf-footer-contact-link:hover {
    color: var(--signal);
    transform: translateX(4px);
}

/* 2. Newsletter Subscription Area */
.qf-footer-newsletter-wrap {
    text-align: center;
    max-width: 980px;
    margin: 0 auto 50px;
}

.qf-newsletter-title {
    font-size: clamp(2.2rem, 3.8vw, 3.2rem);
    font-weight: 900;
    font-family: var(--font-display);
    color: #FFFFFF;
    margin: 0 0 10px;
    letter-spacing: -0.03em;
}

.qf-newsletter-desc {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.92);
    margin: 0 0 28px;
}

.qf-newsletter-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.qf-newsletter-inputs {
    display: grid;
    grid-template-columns: 1.4fr 1.1fr 1.1fr 1.4fr;
    gap: 14px;
    width: 100%;
}

.qf-news-field {
    position: relative;
    width: 100%;
}

.qf-news-input,
.qf-news-select {
    width: 100%;
    height: 48px;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    border-radius: 24px;
    padding: 0 20px;
    color: #FFFFFF;
    font-size: 0.92rem;
    font-family: var(--font-body);
    outline: none;
    transition: border-color var(--qf-transition), background-color var(--qf-transition);
}

.qf-news-input::placeholder {
    color: rgba(255, 255, 255, 0.82);
}

.qf-news-input:focus,
.qf-news-select:focus {
    border-color: #FFFFFF;
    background: rgba(255, 255, 255, 0.1);
}

.qf-news-select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 36px;
}

.qf-news-select option {
    background-color: #4A6114;
    color: #FFFFFF;
}

.qf-news-select-wrap .qf-select-arrow {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #FFFFFF;
    font-size: 0.85rem;
    pointer-events: none;
}

.qf-newsletter-consent {
    max-width: 820px;
    text-align: center;
    margin-top: 6px;
    margin-bottom: 8px;
}

.qf-consent-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
    cursor: pointer;
}

.qf-consent-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #FFFFFF;
    cursor: pointer;
    flex-shrink: 0;
}

.qf-newsletter-btn {
    display: inline-block;
    background: #FFFFFF;
    color: #5F7A1A;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    border: none;
    border-radius: 24px;
    padding: 12px 64px;
    cursor: pointer;
    transition: background-color var(--qf-transition), transform var(--qf-transition), box-shadow var(--qf-transition);
}

.qf-newsletter-btn:hover {
    background: #F1F4E8;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* 3. Horizontal Divider */
.qf-footer-divider {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    margin: 40px 0 36px;
}

/* 4. Center Brand Identity */
.qf-footer-center-brand {
    text-align: center;
    margin-bottom: 30px;
}

.qf-footer-brand-title {
    display: block;
    font-family: var(--font-display);
    font-size: 2.8rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    color: #FFFFFF;
    text-decoration: none;
    line-height: 1;
    margin-bottom: 6px;
    transition: opacity var(--qf-transition);
}

.qf-footer-brand-title:hover {
    opacity: 0.9;
}

.qf-footer-brand-sub {
    font-family: var(--font-display);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
}

/* 5. Bottom Horizontal Legal Links */
.qf-footer-bottom-legal {
    text-align: center;
}

.qf-legal-inline-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.qf-legal-inline-list li a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 500;
    opacity: 0.9;
    transition: opacity var(--qf-transition), text-decoration var(--qf-transition);
}

.qf-legal-inline-list li a:hover {
    opacity: 1;
    text-decoration: underline;
}

.qf-pipe {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.85rem;
    user-select: none;
}

/* Responsive Overrides for Footer */
@media (max-width: 1080px) {
    .qf-footer-nav-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
    }
    .qf-newsletter-inputs {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .qf-footer {
        padding: 50px 0 30px;
    }
    .qf-footer-nav-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .qf-newsletter-inputs {
        grid-template-columns: 1fr;
    }
    .qf-footer-contact-link {
        font-size: 1.35rem;
    }
    .qf-legal-inline-list {
        gap: 8px 10px;
    }
    .qf-pipe {
        display: none;
    }
    .qf-legal-inline-list li {
        width: 100%;
        margin-bottom: 4px;
    }
}

/* ==========================================================================
   16. ABOUT PAGE SPECIFIC STYLES & ANIMATIONS (REDESIGNED 6-SCREEN TAMA FLOW)
   ========================================================================== */
.qf-about-page {
    background: #FFFFFF;
    color: var(--ink);
}

/* Base Screen Padding & Spacing */
.qf-ab-screen {
    padding: 92px 0;
    position: relative;
}

.qf-ab-section-header {
    margin-bottom: 48px;
}

.qf-ab-header--center {
    text-align: center;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.qf-ab-section-tag {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #55C83A;
    margin-bottom: 12px;
}

.qf-ab-sec-title {
    font-size: clamp(2.1rem, 3.4vw, 2.9rem);
    line-height: 1.14;
    color: #092278;
    margin: 0 0 16px;
    letter-spacing: -0.035em;
    font-weight: 800;
}

.qf-ab-sec-lead {
    font-size: 1.08rem;
    line-height: 1.65;
    color: var(--slate);
    margin: 0;
    max-width: 680px;
}

.qf-ab-header--center .qf-ab-sec-lead {
    margin-left: auto;
    margin-right: auto;
}

/* --------------------------------------------------------------------------
   SCREEN 1: WHO WE ARE (Hero with curved transition)
   -------------------------------------------------------------------------- */
.qf-ab-hero {
    padding: 32px 0 84px;
    background: #FFFFFF;
}

.qf-ab-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--slate);
    margin-bottom: 32px;
}

.qf-ab-breadcrumb a {
    color: var(--slate);
    text-decoration: none;
    transition: color var(--qf-transition);
}

.qf-ab-breadcrumb a:hover {
    color: #55C83A;
}

.qf-ab-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
    align-items: center;
}

.qf-ab-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: #F4F8F4;
    border-radius: 30px;
    border: 1px solid #D6E8D5;
    margin-bottom: 20px;
}

.qf-ab-pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #55C83A;
}

.qf-ab-pill-text {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #092278;
}

.qf-ab-hero-title {
    font-size: clamp(2.4rem, 4.4vw, 3.8rem);
    line-height: 1.1;
    color: #092278;
    margin: 0 0 22px;
    letter-spacing: -0.04em;
    font-weight: 800;
}

.qf-ab-hero-lead {
    font-size: clamp(1.08rem, 1.4vw, 1.22rem);
    line-height: 1.68;
    color: var(--slate);
    margin: 0 0 32px;
}

.qf-ab-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.qf-btn--quote {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #55C83A;
    color: #FFFFFF;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
    padding: 14px 28px;
    border-radius: 8px;
    text-decoration: none;
    transition: all var(--qf-transition);
    box-shadow: 0 4px 14px rgba(85, 200, 58, 0.28);
}

.qf-btn--quote:hover {
    background: #46B22D;
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(85, 200, 58, 0.38);
}

.qf-btn--ghost {
    display: inline-flex;
    align-items: center;
    background: transparent;
    color: #092278;
    border: 1.5px solid #092278;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    padding: 13px 26px;
    border-radius: 8px;
    text-decoration: none;
    transition: all var(--qf-transition);
}

.qf-btn--ghost:hover {
    background: #092278;
    color: #FFFFFF;
}

.qf-ab-hero-visual {
    position: relative;
}

.qf-ab-hero-img-wrap {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(9, 34, 120, 0.1);
    background: #EAF0E8;
    aspect-ratio: 16 / 11;
}

.qf-ab-hero-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Light green arc curve overlay at the bottom of the hero photo */
.qf-ab-hero-arc-overlay {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 52px;
    pointer-events: none;
    line-height: 0;
}

.qf-ab-hero-arc-overlay svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* --------------------------------------------------------------------------
   SCREEN 2: OUR STORY (White background, Workshop + Copy + 3 Metrics)
   -------------------------------------------------------------------------- */
.qf-ab-story {
    background: #F4F8F4;
    border-top: 1px solid #E5EFE4;
    border-bottom: 1px solid #E5EFE4;
}

.qf-ab-story-grid {
    display: grid;
    grid-template-columns: 1fr 1.08fr;
    gap: 60px;
    align-items: center;
    margin-bottom: 64px;
}

.qf-ab-story-img-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 14px 36px rgba(21, 33, 30, 0.08);
    background: #E9ECE9;
}

.qf-ab-story-img-card img {
    width: 100%;
    height: auto;
    display: block;
}

.qf-ab-story-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(9, 34, 120, 0.92);
    backdrop-filter: blur(8px);
    color: #FFFFFF;
    padding: 12px 18px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    border-left: 3px solid #55C83A;
}

.qf-ab-story-badge strong {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 800;
    color: #FFFFFF;
}

.qf-ab-story-badge span {
    font-size: 0.78rem;
    color: #D4FF00;
}

.qf-ab-story-copy {
    padding: 10px 0;
}

.qf-ab-story-title {
    font-size: clamp(2rem, 3.2vw, 2.7rem);
    line-height: 1.15;
    color: #092278;
    margin: 0 0 20px;
    letter-spacing: -0.035em;
    font-weight: 800;
}

.qf-ab-story-lead {
    font-size: 1.12rem;
    line-height: 1.68;
    color: #092278;
    font-weight: 600;
    margin: 0 0 16px;
}

.qf-ab-story-body {
    font-size: 1rem;
    line-height: 1.68;
    color: var(--slate);
    margin: 0;
}

/* 3 Metrics Strip Underneath */
.qf-ab-metrics-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    background: #FFFFFF;
    border: 1px solid #D6E8D5;
    border-radius: 16px;
    padding: 40px 44px;
    box-shadow: 0 10px 30px rgba(9, 34, 120, 0.04);
}

.qf-ab-metric-col {
    position: relative;
}

.qf-ab-metric-col:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -14px;
    top: 10%;
    height: 80%;
    width: 1px;
    background: #E5EFE4;
}

.qf-ab-metric-num {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: var(--font-display);
    margin-bottom: 8px;
}

.qf-ab-metric-prefix {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--slate);
    text-transform: uppercase;
}

.qf-ab-metric-num strong {
    font-size: clamp(2.4rem, 3.5vw, 3.2rem);
    line-height: 1;
    font-weight: 800;
    color: #092278;
    letter-spacing: -0.04em;
}

.qf-ab-metric-unit,
.qf-ab-metric-plus {
    font-size: 1.5rem;
    font-weight: 800;
    color: #55C83A;
}

.qf-ab-metric-label {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: #092278;
    margin: 0 0 6px;
}

.qf-ab-metric-desc {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--slate);
    margin: 0;
}

/* --------------------------------------------------------------------------
   SCREEN 3: WHAT MATTERS TO US (Principles Accordion)
   -------------------------------------------------------------------------- */
.qf-ab-values {
    background: #FFFFFF;
}

.qf-ab-values-layout {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 54px;
    align-items: start;
}

.qf-ab-values-img-wrap {
    position: sticky;
    top: 110px;
    border-radius: 16px;
    overflow: hidden;
    background: #092278;
    box-shadow: 0 14px 36px rgba(9, 34, 120, 0.12);
}

.qf-ab-values-img-wrap img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.qf-ab-values-img-note {
    background: #092278;
    color: #FFFFFF;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.qf-note-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #D4FF00;
    color: #092278;
    font-weight: 900;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.qf-note-txt {
    font-size: 0.88rem;
    color: #FFFFFF;
    font-weight: 500;
}

.qf-ab-accordion {
    --disclosure-duration: 300ms;
    border-top: 2px solid #092278;
}

.qf-ab-acc-item {
    border-bottom: 1.5px solid #E2E8F0;
    transition: background-color var(--qf-transition);
}

.qf-ab-acc-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: color var(--qf-transition);
}

.qf-ab-acc-num {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    color: #55C83A;
    min-width: 28px;
}

.qf-ab-acc-heading {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    font-weight: 800;
    color: #092278;
    letter-spacing: -0.03em;
    flex-grow: 1;
}

.qf-ab-acc-toggle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid #092278;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    transition: background-color var(--qf-transition), border-color var(--qf-transition);
}

.qf-ab-acc-toggle::before,
.qf-ab-acc-toggle::after {
    content: "";
    position: absolute;
    background-color: #092278;
    transition: transform var(--qf-transition), opacity var(--qf-transition), background-color var(--qf-transition);
}

.qf-ab-acc-toggle::before {
    width: 12px;
    height: 2px;
}

.qf-ab-acc-toggle::after {
    width: 2px;
    height: 12px;
}

.qf-ab-acc-item[data-state="open"] .qf-ab-acc-toggle {
    background-color: #092278;
}

.qf-ab-acc-item[data-state="open"] .qf-ab-acc-toggle::before {
    background-color: #D4FF00;
}

.qf-ab-acc-item[data-state="open"] .qf-ab-acc-toggle::after {
    opacity: 0;
    transform: rotate(90deg);
}

.qf-ab-acc-panel {
    padding: 0 8px 28px 46px;
}

.qf-ab-acc-commitment {
    font-size: 1.15rem;
    line-height: 1.55;
    color: #092278;
    font-weight: 700;
    margin: 0 0 10px;
}

.qf-ab-acc-detail {
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--slate);
    margin: 0;
}

/* --------------------------------------------------------------------------
   SCREEN 4: OUR JOURNEY (3-Station Horizontal Timeline)
   -------------------------------------------------------------------------- */
.qf-ab-journey {
    background: #F7FAF7;
    border-top: 1px solid #E5EFE4;
    border-bottom: 1px solid #E5EFE4;
}

.qf-ab-timeline-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    align-items: stretch;
}

.qf-ab-timeline-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(9, 34, 120, 0.05);
    position: relative;
    transition: transform var(--qf-transition), box-shadow var(--qf-transition);
}

.qf-ab-timeline-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(9, 34, 120, 0.1);
}

.qf-ab-timeline-card--current {
    border-color: #55C83A;
    border-width: 2px;
}

.qf-ab-station-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: #092278;
    color: #FFFFFF;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.85rem;
    padding: 6px 14px;
    border-radius: 20px;
    z-index: 2;
}

.qf-ab-station-badge--active {
    background: #55C83A;
    color: #FFFFFF;
}

.qf-ab-station-photo {
    aspect-ratio: 16 / 10;
    background: #EBF0EA;
    overflow: hidden;
}

.qf-ab-station-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.qf-ab-timeline-card:hover .qf-ab-station-photo img {
    transform: scale(1.04);
}

.qf-ab-station-body {
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.qf-ab-station-period {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #55C83A;
    margin-bottom: 6px;
}

.qf-ab-station-title {
    font-size: 1.55rem;
    line-height: 1.2;
    color: #092278;
    margin: 0 0 14px;
    font-weight: 800;
}

.qf-ab-station-quote {
    font-size: 1.05rem;
    line-height: 1.5;
    font-weight: 700;
    color: #092278;
    margin: 0 0 10px;
}

.qf-ab-station-desc {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--slate);
    margin: 0;
}

/* --------------------------------------------------------------------------
   SCREEN 5: INSIDE QINFENG (Dual Capability Overview Cards)
   -------------------------------------------------------------------------- */
.qf-ab-inside {
    background: #FFFFFF;
}

.qf-ab-capabilities-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 36px;
}

.qf-ab-cap-card {
    background: #F7FAF7;
    border: 1px solid #D6E8D5;
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--qf-transition), box-shadow var(--qf-transition);
}

.qf-ab-cap-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(9, 34, 120, 0.08);
}

.qf-ab-cap-media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: #E8EFE8;
    overflow: hidden;
}

.qf-ab-cap-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.qf-ab-cap-card:hover .qf-ab-cap-media img {
    transform: scale(1.05);
}

.qf-ab-cap-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(9, 34, 120, 0.9);
    color: #FFFFFF;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 20px;
}

.qf-ab-cap-body {
    padding: 32px 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.qf-ab-cap-title {
    font-size: 1.75rem;
    line-height: 1.2;
    color: #092278;
    margin: 0 0 12px;
    font-weight: 800;
}

.qf-ab-cap-text {
    font-size: 1.08rem;
    line-height: 1.55;
    font-weight: 700;
    color: #092278;
    margin: 0 0 10px;
}

.qf-ab-cap-subtext {
    font-size: 0.94rem;
    line-height: 1.6;
    color: var(--slate);
    margin: 0 0 24px;
    flex-grow: 1;
}

.qf-ab-cap-footer {
    margin-top: auto;
}

.qf-ab-cap-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.98rem;
    color: #55C83A;
    text-decoration: none;
    transition: gap var(--qf-transition), color var(--qf-transition);
}

.qf-ab-cap-link:hover {
    color: #3FA027;
    gap: 12px;
}

/* --------------------------------------------------------------------------
   SCREEN 6: LET’S BUILD THE RIGHT BAG (Green Banner + Lime Button + Team Photo)
   -------------------------------------------------------------------------- */
.qf-ab-closing {
    background: #FFFFFF;
    padding-top: 32px;
    padding-bottom: 96px;
}

.qf-ab-closing-banner {
    background: linear-gradient(135deg, #55C83A 0%, #3CA822 100%);
    border-radius: 24px;
    overflow: hidden;
    padding: 64px 56px 48px;
    box-shadow: 0 20px 48px rgba(85, 200, 58, 0.25);
    color: #FFFFFF;
}

.qf-ab-closing-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 48px;
    align-items: center;
    margin-bottom: 56px;
}

.qf-ab-closing-sub {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #092278;
    background: rgba(255, 255, 255, 0.35);
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.qf-ab-closing-heading {
    font-size: clamp(2.3rem, 3.8vw, 3.4rem);
    line-height: 1.1;
    color: #FFFFFF;
    margin: 0 0 16px;
    letter-spacing: -0.04em;
    font-weight: 800;
}

.qf-ab-closing-lead {
    font-size: 1.35rem;
    line-height: 1.4;
    color: #D4FF00;
    font-weight: 800;
    margin: 0 0 12px;
}

.qf-ab-closing-desc {
    font-size: 1.05rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    max-width: 600px;
}

.qf-ab-closing-action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

/* Electric lime CTA button */
.qf-btn-signal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #D4FF00;
    color: #092278;
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: 800;
    padding: 18px 36px;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(9, 34, 120, 0.22);
    transition: all var(--qf-transition);
}

.qf-btn-signal:hover {
    background: #E4FF4D;
    color: #092278;
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(9, 34, 120, 0.32);
}

.qf-btn-arrow {
    font-size: 1.25rem;
    line-height: 1;
    transition: transform var(--qf-transition);
}

.qf-btn-signal:hover .qf-btn-arrow {
    transform: translateX(4px);
}

.qf-ab-action-hint {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    line-height: 1.4;
}

/* Sales Team Photo Strip Below Banner Copy */
.qf-ab-team-showcase {
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    padding-top: 40px;
}

.qf-ab-team-photo-wrap {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.15);
    aspect-ratio: 21 / 9;
    background: #092278;
}

.qf-ab-team-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.qf-ab-team-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 24px;
    background: linear-gradient(to top, rgba(9, 34, 120, 0.92) 0%, rgba(9, 34, 120, 0) 100%);
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.qf-ab-team-caption strong {
    font-family: var(--font-display);
    font-size: 0.98rem;
    color: #D4FF00;
}

.qf-ab-team-caption span {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.85);
}

/* --------------------------------------------------------------------------
   RESPONSIVE BEHAVIORS FOR 6-SCREEN LAYOUT
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .qf-ab-hero-grid,
    .qf-ab-story-grid,
    .qf-ab-values-layout,
    .qf-ab-closing-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .qf-ab-values-img-wrap {
        position: static;
    }

    .qf-ab-metrics-strip {
        grid-template-columns: 1fr;
        padding: 32px 28px;
    }

    .qf-ab-metric-col:not(:last-child)::after {
        display: none;
    }

    .qf-ab-timeline-track {
        grid-template-columns: repeat(3, minmax(280px, 1fr));
        overflow-x: auto;
        padding-bottom: 20px;
        scroll-snap-type: x mandatory;
    }

    .qf-ab-timeline-card {
        scroll-snap-align: start;
    }

    .qf-ab-capabilities-grid {
        grid-template-columns: 1fr;
    }

    .qf-ab-closing-banner {
        padding: 44px 32px 36px;
    }
}

@media (max-width: 680px) {
    .qf-ab-screen {
        padding: 60px 0;
    }

    .qf-ab-hero {
        padding: 24px 0 54px;
    }

    .qf-ab-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .qf-btn--quote,
    .qf-btn--ghost {
        justify-content: center;
    }

    .qf-ab-acc-trigger {
        padding: 18px 0;
    }

    .qf-ab-acc-panel {
        padding: 0 0 20px 0;
    }

    .qf-ab-closing-banner {
        padding: 36px 20px 28px;
        border-radius: 16px;
    }

    .qf-btn-signal {
        width: 100%;
        box-sizing: border-box;
    }
}


/* ==========================================================================
   EXPORT & SHIPPING SUPPORT PAGE (/export-shipping/)
   Built from DESIGN(20260921-052233).md: angled hero, 28px cards, Deep Green
   evidence panels, Signal Lime accents, Brand Green CTA. The carousel and the
   two accordions are the WP Behaviors components (data-behavior), so the
   reduced-motion handling, keyboard support and ARIA come from the library.
   ========================================================================== */

/* 1. Hero: Deep Green band with an angled bottom edge. */
.qf-export-hero {
    position: relative;
    overflow: hidden;
    padding: 104px 0 132px;
    background: var(--deep);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 54px), 0 100%);
}

.qf-export-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.qf-export-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.62;
}

/*
 * The hero veil is a light Deep Green wash rather than a solid band: it stays
 * strong enough behind the copy on the left to hold white text at AA contrast,
 * and fades out to the right so the photograph itself is visible.
 */
.qf-export-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(135deg, rgba(0, 185, 188, 0.72) 0%, rgba(0, 185, 188, 0.52) 52%, rgba(0, 185, 188, 0.28) 100%);
}

.qf-export-hero-content {
    position: relative;
    z-index: 3;
    max-width: 960px;
}

.qf-export-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 7px 18px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(212, 255, 0, 0.35);
}

.qf-export-hero-badge .qf-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--signal);
    flex-shrink: 0;
}

.qf-export-hero-badge .qf-eyebrow {
    margin: 0;
    color: var(--signal);
}

.qf-export-hero-title {
    font-size: clamp(2.1rem, 3.8vw, 3.3rem);
    line-height: 1.06;
    letter-spacing: -0.04em;
    color: #FFFFFF;
    margin: 14px 0 20px;
}

.qf-export-hero-lead {
    font-size: 1.15rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.84);
    max-width: 800px;
    margin: 0 0 34px;
}

.qf-export-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 34px;
}

/* Lime primary with a white hover; the logistics button is a solid white button
   with a deep-navy label at the owner's request, inverting to deep navy #012C44
   with a white label on hover and keyboard focus. */
.qf-export-hero-actions .qf-btn--primary {
    background-color: #D4FF00;
    color: #012C44;
}

.qf-export-hero-actions .qf-btn--primary:hover {
    background-color: #FFFFFF;
    color: #012C44;
}

.qf-export-hero-actions .qf-btn--outline {
    background: #FFFFFF;
    color: #012C44;
    border-color: #FFFFFF;
}

.qf-export-hero-actions .qf-btn--outline:hover,
.qf-export-hero-actions .qf-btn--outline:focus-visible {
    background: #012C44;
    color: #FFFFFF;
    border-color: #012C44;
}

.qf-export-hero-actions .qf-btn--primary:focus-visible,
.qf-export-hero-actions .qf-btn--outline:focus-visible {
    outline: 3px solid #D4FF00;
    outline-offset: 3px;
}

.qf-export-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.qf-export-hero-chips li {
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 700;
    color: #FFFFFF;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
}
/* 2. Export figures strip. */
.qf-export-stats {
    background: #FFFFFF;
    padding: 54px 0;
    border-bottom: 1px solid var(--mist);
}

.qf-export-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.qf-export-stat {
    border-left: 2px solid rgba(1, 44, 68, 0.4);
    padding-left: 20px;
    transition: transform var(--qf-transition), border-color var(--qf-transition);
}

.qf-export-stat:hover {
    transform: translateY(-3px);
    border-color: var(--brand);
}

.qf-export-stat-val {
    display: flex;
    align-items: baseline;
    gap: 4px;
    line-height: 1;
    margin-bottom: 6px;
}

.qf-export-stat-val strong,
.qf-export-stat-word {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 3.2vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--deep);
}

.qf-export-stat-plus,
.qf-export-stat-unit {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--brand);
}

.qf-export-stat--word .qf-export-stat-unit {
    font-size: 1.05rem;
    letter-spacing: 0.02em;
}

.qf-export-stat-label {
    display: block;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 4px;
}

.qf-export-stat-sub {
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--slate);
    margin: 0;
}

/* 3. Trade terms: 4 text-based delivery term cards in a clean horizontal grid, matching image spec */
.qf-export-terms {
    background: #FFFFFF;
}

.qf-export-terms-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.qf-export-term-card {
    background: #FFFFFF;
    border: 1px solid var(--mist);
    border-radius: 20px;
    padding: 36px 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: transform var(--qf-transition), border-color var(--qf-transition), box-shadow var(--qf-transition);
    box-shadow: 0 4px 18px rgba(21, 33, 30, 0.04);
}

.qf-export-term-card:hover {
    transform: translateY(-4px);
    border-color: rgba(1, 44, 68, 0.65);
    box-shadow: 0 14px 34px rgba(0, 185, 188, 0.09);
}

/* The four Incoterm circles (01-04) are signal lime #D4FF00 at the owner's
   request, with the numeral left deep navy: navy on lime is about 13:1, while
   white or lime type would sit near 1.2:1 on this fill. */
.qf-export-term-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border-radius: 999px;
    background: #D4FF00;
    color: var(--brand);
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 800;
    margin-bottom: 24px;
    line-height: 1;
}

.qf-export-term-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--ink);
    margin: 0 0 14px;
    letter-spacing: -0.02em;
}

.qf-export-term-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--slate);
    margin: 0;
}
.qf-export-acc-trigger:focus-visible,
.qf-export-faq-trigger:focus-visible {
    outline: 2px solid var(--olive);
    outline-offset: 2px;
}
/* 4. Responsibility matrix. The wrapper scrolls horizontally on a narrow screen. */
.qf-export-table-wrap {
    padding: 8px;
    background: #FFFFFF;
    border: 1px solid var(--mist);
    border-radius: 24px;
    box-shadow: 0 8px 26px rgba(21, 33, 30, 0.05);
    overflow-x: auto;
}

.qf-export-table {
    width: 100%;
    min-width: 880px;
    border-collapse: collapse;
}

.qf-export-table thead th {
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: left;
    color: #FFFFFF;
    background: var(--deep);
    padding: 16px 18px;
    white-space: nowrap;
}

.qf-export-table thead th:first-child {
    border-radius: 16px 0 0 0;
}

.qf-export-table thead th:last-child {
    border-radius: 0 16px 0 0;
}

.qf-export-table tbody tr:nth-child(even) {
    background: rgba(245, 247, 246, 0.75);
}

.qf-export-table tbody th {
    text-align: left;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--ink);
    padding: 16px 18px;
    max-width: 320px;
}

.qf-export-table td {
    padding: 16px 18px;
    vertical-align: middle;
}

.qf-export-cell {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-display);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 999px;
}

.qf-export-cell--us {
    background: var(--pale);
    color: var(--olive);
    border: 1px solid rgba(82, 119, 0, 0.25);
}

.qf-export-cell--buyer {
    background: var(--soft);
    color: var(--slate);
    border: 1px solid var(--mist);
}

.qf-export-cell--check {
    background: var(--sand);
    color: #7A5B18;
    border: 1px solid rgba(213, 138, 36, 0.35);
}

.qf-export-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    margin: 24px 0 0;
}

.qf-export-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--slate);
}

.qf-export-note {
    max-width: 1000px;
    margin: 20px 0 0;
    padding-left: 18px;
    border-left: 3px solid var(--brand);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--slate);
}

/* 5. Transport Modes: Image + Accordion Showcase (4 / 6 ratio) */
.qf-export-modes-showcase {
    display: grid;
    grid-template-columns: 4fr 6fr;
    gap: 24px;
    align-items: stretch;
}

.qf-export-mode-stage {
    position: relative;
    min-height: 560px;
    height: 100%;
    overflow: hidden;
    border-radius: 24px;
    background: var(--deep);
    box-shadow: 0 12px 36px rgba(0, 185, 188, 0.12);
}

.qf-export-mode-stage img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
    transition: opacity 0.4s ease, transform 0.8s ease;
}

.qf-export-mode-stage:hover img {
    transform: scale(1.02);
}

/*
 * Light Deep Green wash over the transport photograph: still dark at the
 * bottom where the white copy sits, clear towards the top of the picture.
 */
.qf-export-mode-overlay {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 120px 40px 40px;
    background: linear-gradient(to top, rgba(0, 185, 188, 0.84) 0%, rgba(0, 185, 188, 0.5) 55%, rgba(0, 185, 188, 0) 100%);
    color: #FFFFFF;
}

.qf-export-mode-eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lime);
    margin-bottom: 12px;
}

.qf-export-mode-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 2.5vw, 2.6rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
    color: #FFFFFF;
}

.qf-export-mode-desc {
    font-size: 0.98rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    margin: 0 0 24px;
    max-width: 90%;
}

.qf-export-mode-btn {
    align-self: flex-start;
}

/* Accordion list on right */
.qf-export-mode-accordion {
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: flex-start;
}

.qf-export-mode-item {
    overflow: hidden;
    border-radius: 20px;
    background: #F4F7F5;
    border: 1px solid var(--mist);
    transition: background-color var(--qf-transition),
                border-color var(--qf-transition),
                box-shadow var(--qf-transition);
}

.qf-export-mode-item.is-active {
    background: var(--brand);
    border-color: var(--brand);
    box-shadow: 0 10px 25px rgba(1, 44, 68, 0.22);
}

.qf-export-mode-trigger {
    display: flex;
    width: 100%;
    min-height: 84px;
    align-items: center;
    justify-content: space-between;
    padding: 22px 28px;
    border: 0;
    background: transparent;
    color: var(--deep);
    cursor: pointer;
    text-align: left;
    outline: none;
    transition: color var(--qf-transition);
}

.qf-export-mode-trigger:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

.qf-export-mode-tab-label {
    font-family: var(--font-display);
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--deep);
    transition: color var(--qf-transition);
}

.qf-export-mode-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #FFFFFF;
    color: var(--deep);
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

.qf-export-mode-panel {
    max-height: 0;
    overflow: hidden;
    padding: 0 28px;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.35s ease;
}

.qf-export-mode-item.is-active .qf-export-mode-panel {
    max-height: 400px;
    padding: 0 28px 24px;
}

.qf-export-mode-panel-text {
    margin: 0 0 14px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(0, 185, 188, 0.95);
}

.qf-export-mode-panel .qf-export-acc-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qf-export-mode-panel .qf-export-acc-list li {
    position: relative;
    padding-left: 18px;
    font-size: 0.88rem;
    line-height: 1.5;
    color: rgba(0, 185, 188, 0.92);
}

.qf-export-mode-panel .qf-export-acc-list li::before {
    content: "•";
    position: absolute;
    left: 4px;
    top: 0;
    color: var(--deep);
    font-weight: 800;
}

/* The open export mode is a navy surface, so its label and copy are white. */
.qf-export-mode-item.is-active .qf-export-mode-trigger,
.qf-export-mode-item.is-active .qf-export-mode-tab-label,
.qf-export-mode-item.is-active .qf-export-mode-panel-text,
.qf-export-mode-item.is-active .qf-export-acc-list li,
.qf-export-mode-item.is-active .qf-export-acc-list li::before {
    color: #FFFFFF;
}

/* Tablet & Mobile responsive fallback */
@media (max-width: 900px) {
    .qf-export-modes-showcase {
        grid-template-columns: 1fr;
    }

    .qf-export-mode-stage {
        min-height: 440px;
    }

    .qf-export-mode-overlay {
        padding: 80px 24px 28px;
    }
}

/* Legacy vertical accordion styles for FAQs and other references */
.qf-export-accordion {
    --disclosure-duration: 320ms;
    display: grid;
    gap: 14px;
}

.qf-export-acc-item {
    background: #FFFFFF;
    border: 1px solid var(--mist);
    border-radius: 24px;
    overflow: hidden;
    transition: border-color var(--qf-transition), box-shadow var(--qf-transition);
}

.qf-export-acc-item[data-state="open"] {
    border-color: rgba(1, 44, 68, 0.55);
    box-shadow: 0 12px 32px rgba(0, 185, 188, 0.08);
}

.qf-export-acc-trigger {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    min-height: 44px;
    padding: 24px 28px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.qf-export-acc-num {
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--brand);
}

.qf-export-acc-title {
    flex: 1;
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1.6vw, 1.45rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.qf-export-acc-icon {
    position: relative;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}

.qf-export-acc-icon::before,
.qf-export-acc-icon::after {
    content: "";
    position: absolute;
    background: var(--deep);
    border-radius: 2px;
    transition: transform var(--qf-transition), opacity var(--qf-transition);
}

.qf-export-acc-icon::before {
    top: 50%;
    left: 0;
    width: 22px;
    height: 2px;
    transform: translateY(-50%);
}

.qf-export-acc-icon::after {
    top: 0;
    left: 50%;
    width: 2px;
    height: 22px;
    transform: translateX(-50%);
}

[aria-expanded="true"] .qf-export-acc-icon::after {
    transform: translateX(-50%) scaleY(0);
    opacity: 0;
}

.qf-export-acc-inner {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 34px;
    padding: 0 28px 30px;
}

.qf-export-acc-media img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 18px;
    display: block;
}

.qf-export-acc-copy p {
    margin: 0 0 16px;
    font-size: 1.02rem;
    line-height: 1.68;
    color: var(--slate);
}

.qf-export-acc-list {
    display: grid;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.qf-export-acc-list li {
    position: relative;
    padding-left: 26px;
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--ink);
}

.qf-export-acc-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 12px;
    height: 2px;
    border-radius: 2px;
    background: var(--brand);
}
/* 6. Shipping release: ten conditions and the document set. */
.qf-export-ready-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 56px;
    align-items: start;
}

.qf-export-check-list {
    counter-reset: qf-export-check;
    display: grid;
    gap: 14px;
    list-style: none;
    margin: 34px 0 0;
    padding: 0;
}

.qf-export-check-list li {
    counter-increment: qf-export-check;
    position: relative;
    padding: 16px 20px 16px 62px;
    background: #FFFFFF;
    border: 1px solid var(--mist);
    border-radius: 16px;
    font-size: 0.99rem;
    line-height: 1.55;
    color: var(--ink);
    transition: border-color var(--qf-transition), transform var(--qf-transition);
}

.qf-export-check-list li::before {
    content: counter(qf-export-check, decimal-leading-zero);
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--brand);
}

.qf-export-check-list li:hover {
    border-color: rgba(1, 44, 68, 0.5);
    transform: translateX(4px);
}

.qf-export-ready-aside {
    display: grid;
    gap: 22px;
}

.qf-export-ready-media img {
    width: 100%;
    border-radius: 24px;
    display: block;
    box-shadow: var(--qf-shadow);
}

.qf-export-ready-card {
    padding: 30px 28px;
    background: var(--deep);
    border-radius: 24px;
}

.qf-export-ready-card h3 {
    font-size: 1.15rem;
    color: #FFFFFF;
    margin: 0 0 12px;
}

.qf-export-ready-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 18px;
}

.qf-export-ready-docs {
    display: grid;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.qf-export-ready-docs li {
    position: relative;
    padding-left: 22px;
    font-size: 0.92rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
}

.qf-export-ready-docs li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--signal);
    transform: rotate(45deg);
}

/* 7. Post-shipment milestones. */
.qf-export-track-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.qf-export-track-card {
    position: relative;
    padding: 30px 26px 26px;
    background: #FFFFFF;
    border: 1px solid var(--mist);
    border-radius: 22px;
    overflow: hidden;
    transition: transform var(--qf-transition), box-shadow var(--qf-transition), border-color var(--qf-transition);
}

.qf-export-track-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 26px;
    right: 26px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, var(--brand), var(--signal));
}

.qf-export-track-card:hover {
    transform: translateY(-4px);
    border-color: rgba(1, 44, 68, 0.45);
    box-shadow: var(--qf-shadow);
}

.qf-export-track-num {
    display: inline-block;
    margin-bottom: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--pale);
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: var(--olive);
}

.qf-export-track-card h3 {
    font-size: 1.1rem;
    margin: 0 0 8px;
}

.qf-export-track-card p {
    font-size: 0.94rem;
    line-height: 1.6;
    color: var(--slate);
    margin: 0;
}
/* 8. Destination check. */
.qf-export-dest-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 56px;
    align-items: center;
}

.qf-export-dest-media img {
    width: 100%;
    border-radius: 28px;
    display: block;
    box-shadow: var(--qf-shadow);
}

.qf-export-dest-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
}

.qf-export-dest-list li {
    position: relative;
    padding-left: 28px;
    font-size: 0.96rem;
    line-height: 1.55;
    color: var(--ink);
}

.qf-export-dest-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 14px;
    height: 14px;
    border: 2px solid var(--brand);
    border-radius: 4px;
}

.qf-export-warning {
    margin: 28px 0 0;
    padding: 16px 20px;
    background: rgba(213, 138, 36, 0.1);
    border-left: 3px solid var(--warning);
    border-radius: 0 14px 14px 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #6B4A12;
}

/* 9. Quote transparency. */
.qf-export-quote-panel {
    padding: 48px 50px;
    background: #FFFFFF;
    border: 1px solid var(--mist);
    border-radius: 28px;
    box-shadow: 0 10px 34px rgba(21, 33, 30, 0.06);
}

.qf-export-quote-copy h2 {
    max-width: 720px;
}

.qf-export-quote-copy p {
    max-width: 780px;
    margin: 0 0 30px;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--slate);
}

.qf-export-quote-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.qf-export-quote-list li {
    position: relative;
    padding-left: 30px;
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--ink);
}

.qf-export-quote-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: var(--signal);
}

.qf-export-quote-note {
    margin: 32px 0 0;
    padding-top: 24px;
    border-top: 1px solid var(--mist);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--slate);
}

/* 10. Trade questions accordion. */
.qf-export-faq-wrap {
    --disclosure-duration: 300ms;
    display: grid;
    gap: 12px;
    max-width: 900px;
    margin: 0 auto;
}

.qf-export-faq-item {
    background: #FFFFFF;
    border: 1px solid var(--mist);
    border-radius: 20px;
    overflow: hidden;
    transition: border-color var(--qf-transition);
}

.qf-export-faq-item[data-state="open"] {
    border-color: rgba(1, 44, 68, 0.5);
}

.qf-export-faq-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    min-height: 44px;
    padding: 22px 26px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.qf-export-faq-q {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.qf-export-faq-panel p {
    max-width: 780px;
    margin: 0;
    padding: 0 26px 24px;
    font-size: 0.98rem;
    line-height: 1.68;
    color: var(--slate);
}

/* 11. Centred section header, scoped to this page (About uses the same classes). */
.qf-export-page .qf-center-header {
    max-width: 820px;
    margin: 0 auto 54px;
    text-align: center;
}

.qf-export-page .qf-lead--centered {
    margin-inline: auto;
}

.qf-export-cta .qf-cta-title {
    max-width: 720px;
}

/* 11b. Closing CTA sits on Brand Green, with the lime / white button pair.
   White copy would not read on this band, so the eyebrow goes navy. */
.qf-export-cta {
    background: #55C83A;
}

.qf-export-cta::after {
    background: rgba(255, 255, 255, 0.18);
}

.qf-export-cta .qf-eyebrow--dark {
    color: #012C44;
}

/* The sub-copy carries the deliverable in one sentence, so it takes the same
   navy as the eyebrow and stays legible on the green band (~6.6:1). */
.qf-export-cta .qf-cta-sub {
    color: #012C44;
}

.qf-export-cta .qf-btn--light {
    background: #D4FF00;
    color: #012C44;
    box-shadow: 0 8px 24px rgba(1, 44, 68, 0.22);
}

.qf-export-cta .qf-btn--light:hover {
    background: #FFFFFF;
    color: #012C44;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(1, 44, 68, 0.3);
}

.qf-export-cta .qf-btn--dark {
    background: #FFFFFF;
    color: #012C44;
    border-color: #FFFFFF;
}

.qf-export-cta .qf-btn--dark:hover {
    background: #012C44;
    border-color: #012C44;
    color: #FFFFFF;
    transform: translateY(-2px);
}

.qf-export-cta .qf-btn--light:focus-visible,
.qf-export-cta .qf-btn--dark:focus-visible {
    outline: 3px solid #012C44;
    outline-offset: 3px;
}
/* 12. Responsive behaviour of the export page. */
@media (max-width: 1080px) {
    .qf-export-hero {
        padding: 88px 0 112px;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), 0 100%);
    }

    .qf-export-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 26px;
    }

    .qf-export-terms-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .qf-export-acc-inner {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .qf-export-ready-grid,
    .qf-export-dest-grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .qf-export-track-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .qf-export-quote-panel {
        padding: 38px 32px;
    }
}

@media (max-width: 720px) {
    .qf-export-hero {
        padding: 76px 0 96px;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), 0 100%);
    }

    /* Narrow screens: the copy runs across the full width, so the veil stays
       even instead of fading out to the right. */
    .qf-export-hero-overlay {
        background: linear-gradient(160deg, rgba(0, 185, 188, 0.78) 0%, rgba(0, 185, 188, 0.68) 55%, rgba(0, 185, 188, 0.55) 100%);
    }

    .qf-export-hero-title {
        font-size: clamp(2rem, 7vw, 2.5rem);
    }

    .qf-export-hero-lead {
        font-size: 1.05rem;
    }

    .qf-export-hero-actions .qf-btn {
        width: 100%;
    }

    .qf-export-stats-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .qf-export-term-facts div {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .qf-export-terms-grid {
        grid-template-columns: 1fr;
    }

    .qf-export-acc-trigger {
        gap: 14px;
        padding: 20px;
    }

    .qf-export-acc-inner {
        padding: 0 20px 24px;
    }

    .qf-export-check-list li {
        padding: 14px 16px 14px 54px;
    }

    .qf-export-dest-list,
    .qf-export-quote-list {
        grid-template-columns: 1fr;
    }

    .qf-export-track-grid {
        grid-template-columns: 1fr;
    }

    .qf-export-quote-panel {
        padding: 28px 22px;
    }

    .qf-export-ready-card {
        padding: 24px 22px;
    }

    .qf-export-faq-trigger {
        padding: 20px;
    }

    .qf-export-faq-panel p {
        padding: 0 20px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qf-export-stat:hover,
    .qf-export-track-card:hover,
    .qf-export-check-list li:hover {
        transform: none;
    }
}


/* ==========================================================================
   MANUFACTURING CAPABILITIES & FACTORY TOUR PAGE (/manufacturing/)
   Consistent with DESIGN(20260921-052233).md: angled Deep Green hero with light
   wash, key performance metrics strip, 10-stage interactive vertical workflow,
   capability matrix table, 100% virgin PP & batch traceability chain,
   in-house vs external testing cards, virtual tour photo grid, and transparent
   operational boundaries.
   ========================================================================== */

/* 1. Manufacturing Hero */
.qf-mfg-hero {
    position: relative;
    overflow: hidden;
    padding: 104px 0 132px;
    background: var(--deep);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 54px), 0 100%);
}

.qf-mfg-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.qf-mfg-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.62;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-mfg-hero:hover .qf-mfg-hero-bg img {
    transform: scale(1.02);
}

.qf-mfg-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(135deg, rgba(0, 185, 188, 0.88) 0%, rgba(13, 75, 62, 0.78) 55%, rgba(1, 44, 68, 0.88) 100%);
}

.qf-mfg-hero-content {
    position: relative;
    z-index: 3;
    max-width: 960px;
}

.qf-mfg-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 7px 18px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(212, 255, 0, 0.35);
    backdrop-filter: blur(8px);
}

.qf-mfg-hero-badge .qf-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--signal);
    flex-shrink: 0;
}

.qf-mfg-hero-badge .qf-eyebrow {
    margin: 0;
    color: var(--signal);
}

.qf-mfg-hero-title {
    font-size: clamp(2.1rem, 3.8vw, 3.3rem);
    line-height: 1.08;
    letter-spacing: -0.04em;
    color: #FFFFFF;
    margin: 14px 0 20px;
}

.qf-mfg-hero-lead {
    font-size: 1.15rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.88);
    max-width: 820px;
    margin: 0 0 34px;
}

.qf-mfg-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 34px;
}

.qf-mfg-hero-actions .qf-btn--primary {
    background-color: var(--signal);
    color: #012C44;
    border-color: var(--signal);
    font-weight: 800;
    box-shadow: 0 4px 18px rgba(212, 255, 0, 0.35);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-mfg-hero-actions .qf-btn--primary:hover {
    background-color: #FFFFFF;
    color: #012C44;
    border-color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 0 24px rgba(255, 255, 255, 0.7), 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* "View Capability Matrix" is a solid white button at the owner's request,
   turning Brand Green #55C83A on hover and keyboard focus. Its label stays deep
   navy #012C44: navy on #55C83A is about 6.6:1 where white would be about 2.2:1. */
.qf-mfg-hero-actions .qf-btn--outline {
    background-color: #FFFFFF;
    color: #012C44;
    border-color: #FFFFFF;
    font-weight: 700;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-mfg-hero-actions .qf-btn--outline:hover,
.qf-mfg-hero-actions .qf-btn--outline:focus-visible {
    background-color: #55C83A;
    color: #012C44;
    border-color: #55C83A;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(85, 200, 58, 0.4);
}

.qf-mfg-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.qf-mfg-hero-chips li {
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 700;
    color: #FFFFFF;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(4px);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.qf-mfg-hero-chips li:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: var(--signal);
    transform: translateY(-2px);
}

/* 2. Key Metrics Strip */
.qf-mfg-stats {
    background: #FFFFFF;
    padding: 56px 0;
    border-bottom: 1px solid var(--mist);
}

.qf-mfg-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.qf-mfg-stat {
    border-left: 3px solid rgba(1, 44, 68, 0.45);
    padding-left: 22px;
    transition: transform var(--qf-transition), border-color var(--qf-transition);
}

.qf-mfg-stat:hover {
    transform: translateY(-4px);
    border-color: var(--brand);
}

.qf-mfg-stat-val {
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1;
    color: var(--deep);
    margin-bottom: 8px;
}

.qf-mfg-stat-val .qf-counter {
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    letter-spacing: -0.04em;
}

.qf-mfg-stat-val .qf-stat-plus,
.qf-mfg-stat-val .qf-stat-unit {
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    color: var(--brand);
    font-weight: 800;
}

.qf-mfg-stat-label {
    display: block;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 4px;
}

.qf-mfg-stat-sub {
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--slate);
    margin: 0;
}

/* 3. Interactive 10-Stage Vertical Process Showcase */
.qf-mfg-stages {
    background: #FFFFFF;
}

.qf-mfg-workflow {
    margin-top: 48px;
    display: grid;
    gap: 32px;
}

.qf-mfg-stage-nav {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--mist) transparent;
}

.qf-mfg-stage-nav::-webkit-scrollbar {
    height: 6px;
}

.qf-mfg-stage-nav::-webkit-scrollbar-thumb {
    background: var(--mist);
    border-radius: 6px;
}

.qf-mfg-stage-tab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 12px 20px;
    background: var(--soft);
    border: 1px solid var(--mist);
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-mfg-stage-tab:hover {
    background: #FFFFFF;
    border-color: var(--brand);
    color: var(--deep);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 185, 188, 0.08);
}

.qf-mfg-stage-tab.is-active {
    background: var(--deep);
    border-color: var(--deep);
    color: #FFFFFF;
    box-shadow: 0 6px 20px rgba(0, 185, 188, 0.22);
}

.qf-mfg-stage-tab .qf-mfg-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0, 185, 188, 0.12);
    color: var(--deep);
    font-size: 0.74rem;
    font-weight: 800;
    transition: all 0.2s ease;
}

.qf-mfg-stage-tab.is-active .qf-mfg-step-num {
    background: var(--signal);
    color: var(--deep);
}

.qf-mfg-stage-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    background: var(--soft);
    border: 1px solid var(--mist);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: var(--qf-shadow);
}

.qf-mfg-stage-media {
    position: relative;
    min-height: 480px;
    background: var(--deep);
    overflow: hidden;
}

.qf-mfg-stage-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.35s ease, transform 0.45s ease;
}

.qf-mfg-stage-badge {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 2;
}

.qf-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.qf-status-pill.is-inhouse {
    background: rgba(0, 185, 188, 0.92);
    color: var(--signal);
    border: 1px solid rgba(212, 255, 0, 0.4);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(6px);
}

.qf-mfg-stage-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px;
}

.qf-mfg-step-tag {
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 12px;
}

.qf-mfg-step-title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.3vw, 2.2rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--deep);
    margin: 0 0 16px;
}

.qf-mfg-step-desc {
    font-size: 1.02rem;
    line-height: 1.65;
    color: #4A5B53;
    margin: 0 0 28px;
}

.qf-mfg-step-meta {
    display: grid;
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid var(--mist);
}

.qf-meta-lbl {
    display: block;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--slate);
    margin-bottom: 4px;
}

.qf-meta-val {
    display: block;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--ink);
    font-weight: 600;
}

/* 4. Manufacturing Capability Matrix Table */
.qf-mfg-matrix-sec {
    background: var(--soft);
}

.qf-mfg-table-wrap {
    margin-top: 48px;
    background: #FFFFFF;
    border: 1px solid var(--mist);
    border-radius: 28px;
    overflow-x: auto;
    box-shadow: 0 10px 34px rgba(21, 33, 30, 0.05);
}

.qf-mfg-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    font-size: 0.92rem;
    line-height: 1.55;
    text-align: left;
}

/* The capability-matrix header band is Brand Green #55C83A at the owner's
   request, with the column labels in deep navy #012C44: navy on #55C83A is
   about 6.6:1, where the old teal would be about 2.3:1 and white about 2.2:1. */
.qf-mfg-table thead {
    background: #55C83A;
    border-bottom: 2px solid #3CA822;
}

.qf-mfg-table th {
    padding: 20px 24px;
    font-family: var(--font-display);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #012C44;
    white-space: nowrap;
}

.qf-mfg-table td {
    padding: 20px 24px;
    border-bottom: 1px solid var(--mist);
    vertical-align: top;
    color: #4A5B53;
}

.qf-mfg-table tbody tr:last-child td {
    border-bottom: none;
}

.qf-mfg-table tbody tr {
    transition: background 0.18s ease;
}

.qf-mfg-table tbody tr:hover {
    background: #F4F8F4;
}

.qf-mfg-table td strong {
    color: var(--ink);
    font-size: 0.96rem;
}

.qf-tbl-sub {
    font-size: 0.8rem;
    color: var(--slate);
}

.qf-badge-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.qf-badge-pill.is-inhouse {
    background: rgba(0, 185, 188, 0.09);
    color: var(--deep);
    border: 1px solid rgba(0, 185, 188, 0.22);
}

.qf-badge-pill.is-external {
    background: rgba(213, 138, 36, 0.1);
    color: #9A6010;
    border: 1px solid rgba(213, 138, 36, 0.25);
}

/* 5. 100% Virgin PP Policy & Traceability Chain */
.qf-mfg-trace-sec {
    background: #FFFFFF;
}

.qf-mfg-trace-grid {
    margin-top: 48px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 32px;
}

.qf-mfg-trace-card {
    background: var(--soft);
    border: 1px solid var(--mist);
    border-radius: 28px;
    padding: 44px;
    transition: transform var(--qf-transition), box-shadow var(--qf-transition);
}

.qf-mfg-trace-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--qf-shadow-hover);
}

.qf-mfg-trace-card.is-highlight {
    background: linear-gradient(145deg, #F0F6F1 0%, #E7EFE9 100%);
    border-color: rgba(1, 44, 68, 0.35);
}

.qf-trace-card-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.qf-trace-icon {
    font-size: 2rem;
    line-height: 1;
}

.qf-trace-card-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--deep);
    margin: 0;
}

.qf-mfg-trace-card p {
    font-size: 0.98rem;
    line-height: 1.65;
    color: #4A5B53;
    margin: 0 0 24px;
}

.qf-trace-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.qf-trace-points li {
    font-size: 0.92rem;
    line-height: 1.55;
    color: #33433C;
    padding-left: 20px;
    position: relative;
}

.qf-trace-points li::before {
    content: "•";
    position: absolute;
    left: 4px;
    top: 0;
    color: var(--brand);
    font-size: 1.4rem;
    line-height: 1.2;
}

.qf-trace-points li strong {
    color: var(--deep);
}

.qf-trace-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.qf-trace-steps li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    background: #FFFFFF;
    border: 1px solid var(--mist);
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink);
    transition: all 0.2s ease;
}

.qf-trace-steps li:hover {
    border-color: var(--brand);
    transform: translateX(4px);
}

.qf-trace-steps li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0, 185, 188, 0.08);
    color: var(--deep);
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 800;
    flex-shrink: 0;
}

/* "Complete 9-Step Batch Traceability Chain" card — brand green panel.
   Brand Green #55C83A is the first brand colour of DESIGN(20260921-052233).md,
   so the surface is written as its literal hex rather than var(--brand), which
   now holds the deep navy after the site-wide recolour. Navy + signal lime keep
   the copy readable on the green surface (white on #55C83A would not be). */
.qf-mfg-trace-card.is-trace {
    background: #55C83A;
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 18px 44px rgba(85, 200, 58, 0.26);
}

.qf-mfg-trace-card.is-trace:hover {
    box-shadow: 0 24px 56px rgba(85, 200, 58, 0.36);
}

.qf-mfg-trace-card.is-trace .qf-trace-card-title {
    color: #012C44;
}

.qf-mfg-trace-card.is-trace p {
    color: rgba(1, 44, 68, 0.9);
}

.qf-mfg-trace-card.is-trace .qf-trace-steps li {
    background: #FFFFFF;
    border-color: rgba(1, 44, 68, 0.12);
}

.qf-mfg-trace-card.is-trace .qf-trace-steps li:hover {
    border-color: #012C44;
}

.qf-mfg-trace-card.is-trace .qf-trace-steps li span {
    background: #012C44;
    color: #D4FF00;
}

/* 6. Testing Capabilities: In-House Rig vs Third Party */
.qf-mfg-testing-sec {
    background: var(--soft);
}

.qf-mfg-compare-grid {
    margin-top: 48px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.qf-mfg-compare-card {
    background: #FFFFFF;
    border: 1px solid var(--mist);
    border-radius: 28px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(21, 33, 30, 0.05);
    transition: transform var(--qf-transition), box-shadow var(--qf-transition);
}

.qf-mfg-compare-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--qf-shadow-hover);
}

.qf-compare-head {
    padding: 36px 36px 24px;
    border-bottom: 1px solid var(--mist);
}

.qf-compare-title {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.22;
    color: var(--deep);
    margin: 14px 0 8px;
}

.qf-compare-lead {
    font-size: 0.94rem;
    color: var(--slate);
    margin: 0;
}

.qf-compare-body {
    padding: 32px 36px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    flex-grow: 1;
}

.qf-compare-media {
    border-radius: 18px;
    overflow: hidden;
    background: var(--mist);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.qf-compare-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 600 / 380;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.qf-mfg-compare-card:hover .qf-compare-media img {
    transform: scale(1.03);
}

.qf-compare-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 16px;
}

.qf-compare-list li {
    font-size: 0.92rem;
    line-height: 1.55;
    color: #4A5B53;
}

.qf-compare-list li strong {
    display: block;
    color: var(--ink);
    font-size: 0.95rem;
    margin-bottom: 2px;
}

/* 7. Virtual Factory Tour Gallery */
.qf-mfg-tour-sec {
    background: #FFFFFF;
}

.qf-mfg-tour-grid {
    margin-top: 48px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.qf-mfg-tour-card {
    margin: 0;
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    background: var(--deep);
    box-shadow: 0 8px 24px rgba(21, 33, 30, 0.06);
    transition: transform var(--qf-transition), box-shadow var(--qf-transition);
}

.qf-mfg-tour-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--qf-shadow-hover);
}

.qf-mfg-tour-card img {
    width: 100%;
    aspect-ratio: 600 / 420;
    object-fit: cover;
    display: block;
    opacity: 0.88;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.qf-mfg-tour-card:hover img {
    transform: scale(1.05);
    opacity: 0.96;
}

.qf-mfg-tour-card figcaption {
    padding: 22px 24px;
    background: #FFFFFF;
    border: 1px solid var(--mist);
    border-top: none;
    border-radius: 0 0 22px 22px;
}

.qf-mfg-tour-card figcaption strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--deep);
    margin-bottom: 4px;
}

.qf-mfg-tour-card figcaption span {
    display: block;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--slate);
}

/* 8. Operational Boundaries */
.qf-mfg-boundary-sec {
    background: var(--soft);
}

.qf-mfg-boundary-grid {
    margin-top: 48px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.qf-mfg-bound-card {
    background: #FFFFFF;
    border: 1px solid var(--mist);
    border-radius: 28px;
    padding: 44px;
    transition: transform var(--qf-transition), box-shadow var(--qf-transition);
}

.qf-mfg-bound-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--qf-shadow-hover);
}

.qf-mfg-bound-card.is-in {
    border-top: 4px solid var(--brand);
}

.qf-mfg-bound-card.is-out {
    border-top: 4px solid var(--warning);
}

.qf-bound-tag {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.qf-mfg-bound-card.is-in .qf-bound-tag {
    color: var(--brand);
}

.qf-mfg-bound-card.is-out .qf-bound-tag {
    color: #B36B00;
}

.qf-mfg-bound-card h3 {
    font-size: 1.45rem;
    line-height: 1.25;
    color: var(--deep);
    margin: 0 0 16px;
}

.qf-mfg-bound-card p {
    font-size: 0.98rem;
    line-height: 1.65;
    color: #4A5B53;
    margin: 0 0 24px;
}

.qf-mfg-bound-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.qf-mfg-bound-card li {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--ink);
}

/* 9. Closing CTA Banner on Manufacturing Page */
.qf-mfg-cta {
    background: #55C83A;
}

.qf-mfg-cta::after {
    background: rgba(255, 255, 255, 0.18);
}

.qf-mfg-cta .qf-eyebrow {
    color: #012C44;
}

.qf-mfg-cta .qf-cta-title {
    color: #FFFFFF;
}

.qf-mfg-cta .qf-cta-sub {
    color: rgba(255, 255, 255, 0.95);
}

/* "Request Technical Specs" — signal lime fill, hover white.
   Lime is a light fill, so the label is navy #012C44 in both states
   (white on lime is about 1.2:1, white on white is invisible). */
.qf-mfg-cta .qf-btn--light {
    background-color: var(--signal);
    color: #012C44;
    border-color: var(--signal);
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(1, 44, 68, 0.18);
}

.qf-mfg-cta .qf-btn--light:hover,
.qf-mfg-cta .qf-btn--light:focus-visible {
    background-color: #FFFFFF;
    color: #012C44;
    border-color: #FFFFFF;
    box-shadow: 0 12px 30px rgba(1, 44, 68, 0.28);
}

/* "View Quality Control" — white fill, hover deep navy.
   White on the green band, navy label; inverting to navy fill with a white
   label on hover keeps the pair legible at both steps. */
.qf-mfg-cta .qf-btn--dark {
    background-color: #FFFFFF;
    color: #012C44;
    border-color: #FFFFFF;
    box-shadow: 0 8px 24px rgba(1, 44, 68, 0.18);
}

.qf-mfg-cta .qf-btn--dark:hover,
.qf-mfg-cta .qf-btn--dark:focus-visible {
    background-color: #012C44;
    color: #FFFFFF;
    border-color: #012C44;
    box-shadow: 0 12px 30px rgba(1, 44, 68, 0.32);
}

/* Responsive adjustments */
@media (max-width: 1080px) {
    .qf-mfg-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }

    .qf-mfg-stage-showcase {
        grid-template-columns: 1fr;
    }

    .qf-mfg-stage-media {
        min-height: 380px;
    }

    .qf-mfg-stage-content {
        padding: 36px 32px;
    }

    .qf-mfg-trace-grid,
    .qf-mfg-compare-grid,
    .qf-mfg-boundary-grid {
        grid-template-columns: 1fr;
    }

    .qf-mfg-tour-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 720px) {
    .qf-mfg-hero {
        padding: 76px 0 96px;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), 0 100%);
    }

    .qf-mfg-hero-overlay {
        background: linear-gradient(160deg, rgba(0, 185, 188, 0.78) 0%, rgba(0, 185, 188, 0.68) 55%, rgba(0, 185, 188, 0.55) 100%);
    }

    .qf-mfg-hero-title {
        font-size: clamp(2rem, 7vw, 2.5rem);
    }

    .qf-mfg-hero-actions .qf-btn {
        width: 100%;
    }

    .qf-mfg-stats-grid,
    .qf-mfg-tour-grid {
        grid-template-columns: 1fr;
    }

    .qf-mfg-trace-card,
    .qf-mfg-bound-card {
        padding: 28px 24px;
    }

    .qf-compare-head,
    .qf-compare-body {
        padding: 24px 22px;
    }
}

/* ==========================================================================
   OUR PROCESS PAGE (/our-process/)
   Built from DESIGN(20260921-052233).md §5.8: an angled Deep Green hero, a flat
   figures band, the ten-step vertical timeline whose connector is Mist Gray and
   whose step numbers are Signal Lime, the four written gates, the split
   sections, the timing list, the Deep Green trial-to-repeat band and the process
   accordion. The figures use the count-up behaviour and the questions the
   accordion/disclosure pair (data-behavior), so ARIA, keyboard support and
   reduced motion come from the installed runtime.

   Sections:
    1. Hero: the ten-step promise on an angled Deep Green band
    2. Figures strip: what the process commits to, in numbers
    3. The ten-step timeline: you provide / we deliver / in writing
    4. The four written confirmation gates
    5. Split sections: sample, timing and what we need from you
    6. The timing list: what the process commits to, in days
    7. Trial-to-repeat band: first use to a fixed specification
    8. Process questions accordion
    9. Closing call to action
   10. Responsive behaviour
   ========================================================================== */

/* 1. Hero: Deep Green band with an angled bottom edge. The veil stays strong on
   the left, where the copy sits, and fades out to the right over the photo. */
.qf-path-hero {
    position: relative;
    overflow: hidden;
    padding: 104px 0 132px;
    background: var(--deep);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 54px), 0 100%);
}

.qf-path-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.qf-path-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.62;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-path-hero:hover .qf-path-hero-bg img {
    transform: scale(1.02);
}

.qf-path-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(135deg, rgba(0, 185, 188, 0.72) 0%, rgba(0, 185, 188, 0.52) 52%, rgba(0, 185, 188, 0.28) 100%);
}

.qf-path-hero-content {
    position: relative;
    z-index: 3;
    max-width: 960px;
}

.qf-path-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 7px 18px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(212, 255, 0, 0.35);
}

.qf-path-hero-badge .qf-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--signal);
    flex-shrink: 0;
}

.qf-path-hero-badge .qf-eyebrow {
    margin: 0;
    color: var(--signal);
}

/* The ten-step H1 is white on this teal band, which reads at about 2.5:1 before
   the veil and better over the darkened side of it. The owner tried the signal
   lime #D4FF00 and asked for white again, so lime is not used on this title. */
.qf-path-hero-title {
    font-size: clamp(2.1rem, 4.2vw, 3.5rem);
    line-height: 1.04;
    letter-spacing: -0.04em;
    color: #FFFFFF;
    margin: 14px 0 20px;
}

.qf-path-hero-lead {
    font-size: 1.1rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.88);
    max-width: 720px;
    margin: 0 0 34px;
}

.qf-path-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 34px;
}

/* "Start a Project" — signal lime fill, hover white. Lime is a light fill, so
   the label stays navy #012C44 in both states (white on lime is about 1.2:1,
   and white on the white hover would be invisible). */
.qf-path-hero-actions .qf-btn--primary {
    background-color: var(--signal);
    color: #012C44;
    border-color: var(--signal);
}

.qf-path-hero-actions .qf-btn--primary:hover,
.qf-path-hero-actions .qf-btn--primary:focus-visible {
    background-color: #FFFFFF;
    color: #012C44;
    border-color: #FFFFFF;
}

/* "See the Ten Steps" — white fill, hover deep navy. Over the teal hero the
   white block reads as the secondary action; the navy hover inverts it. */
.qf-path-hero-actions .qf-btn--outline {
    background-color: #FFFFFF;
    color: #012C44;
    border-color: #FFFFFF;
}

.qf-path-hero-actions .qf-btn--outline:hover,
.qf-path-hero-actions .qf-btn--outline:focus-visible {
    background-color: #012C44;
    color: #FFFFFF;
    border-color: #012C44;
}

.qf-path-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.qf-path-hero-chips li {
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 700;
    color: #FFFFFF;
    padding: 8px 14px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* 2. Figures strip: a flat white band directly under the angled hero. No shadow,
   so it reads as the end of the hero rather than as a floating card. */
.qf-path-stats {
    background: #FFFFFF;
    padding: 56px 0;
    border-bottom: 1px solid var(--mist);
}

.qf-path-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.qf-path-stat {
    border-left: 3px solid rgba(1, 44, 68, 0.45);
    padding-left: 22px;
    transition: transform var(--qf-transition), border-color var(--qf-transition);
}

.qf-path-stat:hover {
    transform: translateY(-3px);
    border-color: var(--brand);
}

.qf-path-stat-val {
    display: flex;
    align-items: baseline;
    gap: 6px;
    line-height: 1;
    margin-bottom: 8px;
}

.qf-path-count,
.qf-path-count strong {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 3.4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--deep);
}

.qf-path-stat-unit {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--olive);
}

.qf-path-stat-label {
    display: block;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--slate);
    margin-bottom: 6px;
}

.qf-path-stat-sub {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--slate);
}

/* Filter bar for process phases */
.qf-path-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
    padding: 8px;
    background: var(--soft);
    border: 1px solid var(--mist);
    border-radius: 999px;
    width: fit-content;
    max-width: 100%;
}

.qf-path-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-path-filter-btn:hover {
    background: #FFFFFF;
    color: var(--deep);
    box-shadow: 0 4px 12px rgba(0, 185, 188, 0.08);
}

.qf-path-filter-btn.is-active {
    background: var(--deep);
    color: #FFFFFF;
    box-shadow: 0 4px 16px rgba(0, 185, 188, 0.25);
}

.qf-path-filter-btn .qf-filter-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--olive);
    transition: background 0.2s ease;
}

.qf-path-filter-btn.is-active .qf-filter-dot {
    background: var(--signal);
}

/* 3. The ten-step timeline. */
   before them, so it stays behind every card; each card is transparent in its
   own left gutter, which is what lets the neutral connector run down the gutter
   and behind the Signal Lime number. The number is inset 5px so its white 4px
   ring masks the rail without eating the card's 1px left border. */
.qf-path-steps {
    background: #FFFFFF;
}

.qf-path-timeline {
    position: relative;
    padding-left: 96px;
}

.qf-path-rail {
    position: absolute;
    left: 26px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--mist);
}

.qf-path-step {
    position: relative;
    background: #FFFFFF;
    border: 1px solid var(--mist);
    border-radius: 20px;
    padding: 30px 34px;
    margin-bottom: 22px;
    box-shadow: 0 4px 18px rgba(21, 33, 30, 0.04);
    transition: transform var(--qf-transition), border-color var(--qf-transition), box-shadow var(--qf-transition);
}

.qf-path-step:last-child {
    margin-bottom: 0;
}

.qf-path-step:hover {
    transform: translateY(-4px);
    border-color: rgba(1, 44, 68, 0.65);
    box-shadow: 0 14px 34px rgba(0, 185, 188, 0.09);
}

.qf-path-step.is-focused {
    border-color: rgba(0, 185, 188, 0.6);
    box-shadow: 0 12px 28px rgba(0, 185, 188, 0.08);
}

/* The number sits in the timeline's left gutter, centred on the rail: the step
   card starts at 96px, so a badge 54px wide at -96px has its centre at 27px,
   which is where the 2px rail is. The white ring masks the rail behind it. */
.qf-path-step-head {
    position: static;
}

.qf-path-step-heading {
    min-width: 0;
}

.qf-path-step-num {
    position: absolute;
    left: -96px;
    top: 30px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--signal);
    color: var(--deep);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 0 0 4px #FFFFFF;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.qf-path-step:hover .qf-path-step-num,
.qf-path-step-num.is-active-node {
    transform: scale(1.1);
    box-shadow: 0 0 0 4px #FFFFFF, 0 6px 18px rgba(212, 255, 0, 0.45);
}

.qf-path-step-title {
    margin: 0 0 10px;
    font-size: 1.35rem;
    line-height: 1.25;
    color: #012C44 !important;
}

.qf-path-step-sum {
    margin: 0;
    max-width: 640px;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--slate);
}

.qf-path-step-body {
    margin: 22px 0 0;
    padding: 0;
}

.qf-path-row {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 22px;
    padding: 16px 0;
    border-top: 1px solid var(--mist);
}

.qf-path-row-label {
    margin: 0;
    padding-top: 2px;
    font-family: var(--font-display);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--olive);
}

.qf-path-row-text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.62;
    color: var(--slate);
}

/* The written gate is the only row that carries a decision, so it is tinted and
   barred with Signal Lime instead of being a third neutral line. Its own top
   border is dropped: the tinted box is the separator. */
.qf-path-row--write {
    margin-top: 8px;
    padding: 16px 20px;
    border-top: 0;
    border-left: 3px solid var(--signal);
    border-radius: 12px;
    background: rgba(212, 255, 0, 0.16);
}

.qf-path-row--write .qf-path-row-label {
    color: var(--deep);
}

/* 4. WORKFLOW / HOW WE WORK: Horizontal Minimal Flow Bar (From application to approved specification) */
/* The band uses the shared --soft surface so it reads as the same paper as the
   .qf-bg-soft sections elsewhere, instead of the cooler neutral grey #E8ECEB it
   carried, which sat apart from every other surface on the site. The dot rings
   below have to match this surface, since they mask the connector rail. */
.qf-process-flow-sec {
    background: var(--soft);
    padding: 96px 0 108px;
}

.qf-flow-head {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 60px;
    align-items: flex-start;
    margin-bottom: 72px;
}

.qf-flow-eyebrow {
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--olive);
    margin: 0 0 16px;
}

.qf-flow-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 3.8vw, 3.4rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.04em;
    color: var(--ink);
    margin: 0;
}

.qf-flow-lead {
    font-size: 1.08rem;
    line-height: 1.68;
    color: var(--slate);
    margin: 12px 0 0;
}

.qf-flow-timeline-wrap {
    position: relative;
    padding-top: 18px;
}

.qf-flow-line {
    position: absolute;
    top: 24px;
    left: 8px;
    right: 8px;
    height: 1px;
    background: rgba(21, 33, 30, 0.14);
    z-index: 1;
}

.qf-flow-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 28px;
}

.qf-flow-step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.qf-flow-node-wrap {
    position: relative;
    margin-bottom: 24px;
}

.qf-flow-dot {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--deep);
    box-shadow: 0 0 0 4px var(--soft);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.qf-flow-step:hover .qf-flow-dot {
    transform: scale(1.3);
    box-shadow: 0 0 0 5px var(--soft), 0 4px 14px rgba(0, 185, 188, 0.45);
}

.qf-flow-num {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--olive);
    margin-bottom: 12px;
}

.qf-flow-step-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--ink);
    margin: 0 0 10px;
    transition: color 0.2s ease;
}

.qf-flow-step:hover .qf-flow-step-title {
    color: #012C44;
}

.qf-flow-step-desc {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--slate);
    margin: 0;
}

@media (max-width: 1080px) {
    .qf-flow-head {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 48px;
    }

    .qf-flow-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px 24px;
    }

    .qf-flow-line {
        display: none;
    }
}

@media (max-width: 640px) {
    .qf-flow-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* 5. Split sections: the sample, the timing and the six answers, each a copy
   column beside a photograph. --reverse puts the photograph on the left. The
   page's own .qf-path-sample and .qf-path-need hooks carry no rules: the two
   bands take their colour from the shared .qf-bg-pale and .qf-bg-soft. */
.qf-path-split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 60px;
    align-items: center;
}

.qf-path-split--reverse {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}

.qf-path-split-body {
    min-width: 0;
}

.qf-path-split-lead {
    margin: 0 0 24px;
    max-width: 620px;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--slate);
}

.qf-path-split-media {
    margin: 0;
    position: relative;
    border-radius: 22px;
    overflow: hidden;
}

.qf-path-split-media img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 900 / 620;
    object-fit: cover;
    border-radius: 22px;
    box-shadow: var(--qf-shadow);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-path-split-media:hover img {
    transform: scale(1.03);
}

.qf-path-split-media figcaption {
    margin-top: 14px;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--slate);
}

.qf-path-subhead {
    margin: 34px 0 14px;
    font-size: 1.05rem;
    color: var(--deep);
}

/* Deliberately not the tick list: an olive cross marks a boundary we hold
   rather than a benefit we claim. */
.qf-path-honest-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--slate);
}

.qf-path-honest-list li {
    position: relative;
    padding-left: 26px;
}

.qf-path-honest-list li::before {
    content: "✕";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--olive);
    font-weight: 800;
}

/* 6. The timing list: a definition list of commitments, one row per line. */
.qf-path-timing {
    background: #FFFFFF;
}

.qf-path-timing-list {
    margin: 0;
    display: grid;
}

.qf-path-timing-row {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 24px;
    padding: 18px 0;
    border-top: 1px solid var(--mist);
}

.qf-path-timing-row:last-child {
    border-bottom: 1px solid var(--mist);
}

.qf-path-timing-row dt {
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--deep);
}

.qf-path-timing-row dd {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--slate);
}

/* 7. Trial-to-repeat band: Deep Green with the first-use photograph behind it,
   the four steps to a fixed specification as translucent cards. */
.qf-path-repeat {
    position: relative;
    overflow: hidden;
    background: var(--deep);
    padding: 96px 0;
}

.qf-path-repeat-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.qf-path-repeat-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.3;
}

.qf-path-repeat-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(135deg, rgba(0, 185, 188, 0.88), rgba(0, 185, 188, 0.62));
}

.qf-path-repeat-inner {
    position: relative;
    z-index: 3;
}

.qf-path-repeat-head {
    max-width: 820px;
}

.qf-path-repeat-title {
    margin: 0 0 18px;
    font-size: clamp(1.7rem, 2.8vw, 2.5rem);
    line-height: 1.06;
    letter-spacing: -0.04em;
    color: #FFFFFF;
}

.qf-path-repeat-lead {
    margin: 0;
    max-width: 720px;
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}

.qf-path-repeat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 44px;
}

.qf-path-repeat-item {
    background: #012C44 !important;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 18px;
    padding: 30px 24px;
    box-shadow: 0 12px 32px rgba(1, 44, 68, 0.45);
    transition: transform var(--qf-transition), background var(--qf-transition), border-color var(--qf-transition), box-shadow var(--qf-transition);
}

.qf-path-repeat-item:hover {
    transform: translateY(-5px);
    background: #063958 !important;
    border-color: #67D031;
    box-shadow: 0 18px 40px rgba(1, 44, 68, 0.6);
}

.qf-path-repeat-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: #67D031;
    color: #012C44;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 800;
    line-height: 1;
}

.qf-path-repeat-item h3,
.qf-path-repeat-title-item {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: 1.18rem;
    font-weight: 800;
    line-height: 1.3;
    color: #FFFFFF !important;
}

.qf-path-repeat-item p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82) !important;
}

.qf-path-repeat-note {
    margin: 32px 0 0;
    max-width: 900px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

/* 8. Process questions: the same disclosure/accordion treatment as the export
   page, so a question opens the same way on both. The runtime marks the open
   item with data-state and the open trigger with aria-expanded. */
.qf-path-faq {
    background: #FFFFFF;
}

.qf-path-faq-head {
    max-width: 820px;
    margin: 0 auto 44px;
    text-align: center;
}

.qf-path-faq-wrap {
    --disclosure-duration: 300ms;
    display: grid;
    gap: 14px;
    max-width: 880px;
    margin-inline: auto;
}

.qf-path-faq-item {
    background: #FFFFFF;
    border: 1px solid var(--mist);
    border-radius: 20px;
    overflow: hidden;
    transition: border-color var(--qf-transition);
}

.qf-path-faq-item[data-state="open"] {
    border-color: rgba(1, 44, 68, 0.5);
}

.qf-path-faq-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    min-height: 44px;
    padding: 22px 26px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.qf-path-faq-trigger:focus-visible {
    outline: 2px solid var(--olive);
    outline-offset: 2px;
}

.qf-path-faq-q {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.qf-path-acc-icon {
    position: relative;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}

.qf-path-acc-icon::before,
.qf-path-acc-icon::after {
    content: "";
    position: absolute;
    background: var(--deep);
    border-radius: 2px;
    transition: transform var(--qf-transition), opacity var(--qf-transition);
}

.qf-path-acc-icon::before {
    top: 50%;
    left: 0;
    width: 22px;
    height: 2px;
    transform: translateY(-50%);
}

.qf-path-acc-icon::after {
    top: 0;
    left: 50%;
    width: 2px;
    height: 22px;
    transform: translateX(-50%);
}

[aria-expanded="true"] .qf-path-acc-icon::after {
    transform: translateX(-50%) scaleY(0);
    opacity: 0;
}

.qf-path-faq-panel p {
    max-width: 780px;
    margin: 0;
    padding: 0 26px 24px;
    font-size: 0.98rem;
    line-height: 1.68;
    color: var(--slate);
}

/* 9. Closing call to action: the shared brand-green band; the copy column is
   capped so the two buttons stay beside it instead of being pushed off the row. */
.qf-path-cta {
    background: #55C83A;
}

.qf-path-cta::after {
    background: rgba(255, 255, 255, 0.18);
}

.qf-path-cta .qf-eyebrow {
    color: #012C44;
}

.qf-path-cta .qf-cta-title {
    color: #FFFFFF;
    max-width: 620px;
}

.qf-path-cta .qf-cta-sub {
    color: rgba(255, 255, 255, 0.95);
    max-width: 560px;
}

/* "Start a Project" on the green band — signal lime fill, hover white, navy
   label in both states so the light fills stay readable. */
.qf-path-cta .qf-btn--light {
    background-color: var(--signal);
    color: #012C44;
    border-color: var(--signal);
}

.qf-path-cta .qf-btn--light:hover,
.qf-path-cta .qf-btn--light:focus-visible {
    background-color: #FFFFFF;
    color: #012C44;
    border-color: #FFFFFF;
}

/* "Contact the Team" on the green band — white fill, hover deep navy. */
.qf-path-cta .qf-btn--dark {
    background-color: #FFFFFF;
    color: #012C44;
    border-color: #FFFFFF;
}

.qf-path-cta .qf-btn--dark:hover,
.qf-path-cta .qf-btn--dark:focus-visible {
    background-color: #012C44;
    color: #FFFFFF;
    border-color: #012C44;
}

/* 10. Responsive behaviour of the process page. */
@media (max-width: 1080px) {
    .qf-path-gates-grid,
    .qf-path-repeat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .qf-path-split,
    .qf-path-split--reverse {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* One column: the photograph follows the copy everywhere, so the reversed
       split stops reversing. */
    .qf-path-split--reverse .qf-path-split-media {
        order: 2;
    }
}

@media (max-width: 720px) {
    .qf-path-hero {
        padding: 76px 0 96px;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), 0 100%);
    }

    /* Narrow screens: the copy runs the full width, so the veil stays even
       instead of fading out to the right. */
    .qf-path-hero-overlay {
        background: linear-gradient(160deg, rgba(0, 185, 188, 0.78) 0%, rgba(0, 185, 188, 0.68) 55%, rgba(0, 185, 188, 0.55) 100%);
    }

    .qf-path-hero-title {
        font-size: clamp(2rem, 7vw, 2.5rem);
    }

    .qf-path-hero-lead {
        font-size: 1.05rem;
    }

    .qf-path-hero-actions .qf-btn {
        width: 100%;
    }

    .qf-path-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }

    /* The gutter narrows with the badge and the rail moves with both, so the
       connector still runs through the centre of every number. */
    .qf-path-timeline {
        padding-left: 60px;
    }

    .qf-path-step {
        padding: 24px 22px;
    }

    .qf-path-step-num {
        left: -60px;
        top: 24px;
        width: 38px;
        height: 38px;
        font-size: 0.82rem;
    }

    .qf-path-rail {
        left: 18px;
    }

    .qf-path-row,
    .qf-path-timing-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .qf-path-gates-grid,
    .qf-path-repeat-grid {
        grid-template-columns: 1fr;
    }

    .qf-path-faq-trigger {
        padding: 20px;
    }

    .qf-path-faq-panel p {
        padding: 0 20px 20px;
    }
}

@media (max-width: 480px) {
    .qf-path-hero {
        padding: 64px 0 82px;
    }

    .qf-path-stats-grid {
        grid-template-columns: 1fr;
    }

    .qf-path-hero-chips li {
        font-size: 0.78rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qf-path-step:hover,
    .qf-path-stat:hover,
    .qf-path-gate:hover {
        transform: none;
    }
}

/* ==========================================================================
   16. ABOUT PAGE — FAITHFUL TAMA LAYOUT & VISUAL SPECIFICATION
   Color Palette:
   - Primary: Brand Green #55C83A
   - Secondary: Deep Navy Blue #012C44
   - Auxiliary: Fresh Grass Green #67D031
   - Contrast/Punch: Fluorescent Signal Lime #D4FF00
   - Accent: Bright Lake Teal / Cyan #00B9BC
   - Backgrounds: Crisp White #FFFFFF & Subtle Green Tints #F4F8F4, #EBF5E9
   ========================================================================== */

.qf-tama-about {
    background: #FFFFFF;
    color: #012C44;
}

/* Base Headings & Badges */
.qf-t-section {
    padding: 96px 0;
    position: relative;
}

.qf-t-sec-header {
    margin-bottom: 52px;
    max-width: 820px;
}

.qf-t-pretitle {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #55C83A;
    background: #EBF5E9;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.qf-t-title {
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 3.1vw, 2.7rem);
    font-weight: 800;
    line-height: 1.15;
    color: #012C44;
    letter-spacing: -0.035em;
    margin: 0 0 16px;
}

.qf-t-lead {
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.6;
    color: #4A5B68;
    margin: 0;
}

/* --- 1. HERO SECTION (GRAINPRO-STYLE EDITORIAL HERO, PHOTO ON BRAND TEAL) --- */
.qf-t-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 82vh;
    padding: 96px 0 0;
    background: #00B9BC;
}

/*
 * Hero background photograph. The box overhangs the section by 60px top and
 * bottom so the scroll parallax can move it without opening a seam, and the
 * teal section background stays underneath as the fallback surface: if the
 * image never loads the hero is still a legible, on-brand panel.
 */
.qf-t-hero-media {
    position: absolute;
    top: -60px;
    bottom: -60px;
    left: 0;
    right: 0;
    z-index: 0;
    overflow: hidden;
    will-change: transform;
}

/* HERO BACKGROUND <picture> WRAPPERS — every page hero now shares one image
   spec: 1920x880px on desktop, 1080x1350px (4:5) on a portrait screen - a phone, or a tablet held upright - with the browser
   fetching only the one it needs. The <picture> element has to carry the same
   100% box as the image inside it, or this inline element collapses to text
   height and the photograph disappears. */
.qf-t-hero-media picture,
.qf-cf-hero-bg picture,
.qf-sg-hero-bg picture,
.qf-mfg-hero-bg picture,
.qf-oem-hero-bg picture,
.qf-path-hero-bg picture,
.qf-pack-hero-bg picture,
.qf-qc-hero-bg picture,
.qf-st-hero-bg picture,
.qf-tc-hero-bg picture {
    display: block;
    width: 100%;
    height: 100%;
}

.qf-t-hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
    transform: scale(1.06);
    animation: qfTHeroSettle 2.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes qfTHeroSettle {
    from {
        transform: scale(1.06);
    }
    to {
        transform: scale(1);
    }
}

/*
 * Brand scrim: deep navy on the left, where the eyebrow, H1, lead and buttons
 * sit, opening up to lake teal on the right so the photograph still reads.
 * The lower band blends the photograph into the solid navy jump strip.
 */
.qf-t-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(96deg, rgba(1, 44, 68, 0.92) 0%, rgba(1, 44, 68, 0.82) 34%, rgba(0, 105, 118, 0.56) 68%, rgba(0, 185, 188, 0.30) 100%),
        linear-gradient(180deg, rgba(1, 44, 68, 0.34) 0%, rgba(1, 44, 68, 0.04) 34%, rgba(1, 44, 68, 0.60) 100%);
}

@media (prefers-reduced-motion: reduce) {
    .qf-t-hero-media {
        will-change: auto;
    }

    .qf-t-hero-media img {
        animation: none;
        transform: none;
    }
}

.qf-t-hero-shell {
    position: relative;
    z-index: 3;
    padding-bottom: 52px;
}

/* Bottom section jump strip on the deep navy base */
.qf-t-hero-tabs {
    position: relative;
    z-index: 3;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    background: #012C44;
}

.qf-t-hero-tabs-shell {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.qf-t-hero-tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 22px 18px;
    font-family: var(--font-display);
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
    transition: color 0.3s ease, background 0.3s ease;
}

.qf-t-hero-tab:last-child {
    border-right: 0;
}

.qf-t-hero-tab-num {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: #D4FF00;
}

.qf-t-hero-tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: #012C44;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-t-hero-tab:hover,
.qf-t-hero-tab:focus-visible {
    color: #012C44;
    background: #67D031;
    outline: none;
}

.qf-t-hero-tab:hover .qf-t-hero-tab-num,
.qf-t-hero-tab:focus-visible .qf-t-hero-tab-num {
    color: #012C44;
}

.qf-t-hero-tab:hover::after,
.qf-t-hero-tab:focus-visible::after {
    transform: scaleX(1);
}

.qf-t-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 28px;
}

.qf-t-breadcrumb a {
    color: #FFFFFF;
    text-decoration: none;
    transition: color 0.2s ease;
}

.qf-t-breadcrumb a:hover {
    color: #55C83A;
}

.qf-breadcrumb-sep {
    color: rgba(255, 255, 255, 0.5);
}

.qf-breadcrumb-current {
    color: #FFFFFF;
    font-weight: 700;
}

.qf-t-hero-head {
    max-width: 860px;
}

.qf-t-hero-eyebrow {
    display: inline-block;
    font-size: clamp(0.9rem, 1.1vw, 1rem);
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: 0.01em;
    margin-bottom: 18px;
}

/* "About QINFENG" carries signal lime #D4FF00 at the owner's request. The H1 sits
   in the deep-navy half of the hero scrim, where lime reads about 13:1, so the
   eyebrow, lead, breadcrumb and buttons around it stay white. */
.qf-t-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 5.2vw, 4.4rem);
    font-weight: 800;
    line-height: 1.06;
    color: #D4FF00;
    letter-spacing: -0.04em;
    margin: 0 0 22px;
}

.qf-t-hero-lead {
    font-size: clamp(1.05rem, 1.5vw, 1.22rem);
    line-height: 1.62;
    color: #FFFFFF;
    font-weight: 400;
    margin: 0;
    max-width: 740px;
}

.qf-t-hero-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 36px;
}

@media (max-width: 640px) {
    .qf-t-hero-btns {
        gap: 12px;
    }

    .qf-t-hero-btns .qf-btn-t-primary,
    .qf-t-hero-btns .qf-btn-t-navy {
        width: 100%;
        justify-content: space-between;
        padding: 15px 24px;
    }
}

/* --- 1b. OUR STORY & KEY FACTORY METRICS --- */
.qf-t-story {
    background: #FFFFFF;
    padding: 88px 0 96px;
}

.qf-t-story-head {
    max-width: 920px;
    margin-bottom: 48px;
}

.qf-t-story-line {
    display: block;
    width: 64px;
    height: 4px;
    border-radius: 2px;
    background: #55C83A;
    margin-bottom: 24px;
}

.qf-t-story-title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.35vw, 2.1rem);
    font-weight: 800;
    color: #012C44;
    letter-spacing: -0.03em;
    line-height: 1.16;
    margin: 0 0 18px;
}

.qf-t-story-desc {
    font-size: 1.08rem;
    line-height: 1.7;
    color: #5A6B78;
    margin: 0;
}

/* Anchor offset for the hero jump strip */
.qf-t-values,
.qf-t-milestones,
.qf-t-activities,
.qf-t-team {
    scroll-margin-top: 24px;
}

/* Tama 4-Col Metrics Strip */
.qf-tama-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    background: #FFFFFF;
    border: 1px solid #D6E8D5;
    border-radius: 16px;
    padding: 36px 32px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

.qf-t-metric-item {
    position: relative;
    padding-right: 16px;
}

.qf-t-metric-item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 15%;
    height: 70%;
    width: 1px;
    background: #E5EFE4;
}

.qf-t-metric-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    color: #00B9BC;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

.qf-t-metric-val {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 8px;
    font-family: var(--font-display);
}

.qf-t-metric-val strong {
    font-size: clamp(2.4rem, 3.2vw, 3rem);
    font-weight: 800;
    line-height: 1;
    color: #012C44;
    letter-spacing: -0.04em;
}

.qf-t-metric-unit,
.qf-t-metric-plus {
    font-size: 1.5rem;
    font-weight: 800;
    color: #55C83A;
}

.qf-t-metric-name {
    display: block;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: #012C44;
    margin-bottom: 6px;
}

.qf-t-metric-detail {
    font-size: 0.86rem;
    line-height: 1.5;
    color: #6C7A87;
    margin: 0;
}

/* --- 2. OUR VALUES SECTION (TAMA 4 TABS / CARDS) --- */
.qf-t-values {
    background: #FFFFFF;
}

/* --- 2. OUR VALUES SECTION (TAMA HORIZONTAL ACCORDION) --- */
.qf-t-values {
    background: #FFFFFF;
}

.qf-t-val-accordion {
    display: flex;
    gap: 16px;
    height: 540px;
    width: 100%;
}

.qf-t-val-item {
    position: relative;
    flex: 1;
    overflow: hidden;
    border-radius: 20px;
    cursor: pointer;
    background: #012C44;
    transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease;
    box-shadow: 0 10px 30px rgba(1, 44, 68, 0.08);
    outline: none;
}

.qf-t-val-item:focus-visible {
    box-shadow: 0 0 0 3px #55C83A, 0 12px 36px rgba(1, 44, 68, 0.16);
}

.qf-t-val-item.is-active {
    flex: 3.4;
    cursor: default;
    box-shadow: 0 16px 40px rgba(1, 44, 68, 0.18);
}

.qf-t-val-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.qf-t-val-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.05);
    transition: transform 0.8s ease;
}

.qf-t-val-item.is-active .qf-t-val-bg img {
    transform: scale(1);
}

/* Flat colour layer only: each of the four panels keeps its own solid brand colour. */
.qf-t-val-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(1, 44, 68, 0.28);
    transition: background 0.4s ease;
}

.qf-t-val-item.is-active .qf-t-val-overlay {
    background: rgba(1, 44, 68, 0.52);
}

/* Collapsed Header (Visible when collapsed, repositioned when active) */
.qf-t-val-header {
    position: absolute;
    left: 24px;
    bottom: 28px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    transition: opacity 0.3s ease, transform 0.4s ease;
}

.qf-t-val-item.is-active .qf-t-val-header {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
}

.qf-t-val-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #FFFFFF;
    color: #012C44;
    font-size: 0.92rem;
    font-weight: 800;
}

.qf-t-val-tab-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: 0.05em;
    margin: 0;
    writing-mode: horizontal-tb;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

/* Expanded Content (Visible when active) */
.qf-t-val-content {
    position: absolute;
    inset: 0;
    z-index: 4;
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 580px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-16px);
    transition: opacity 0.4s ease 0.15s, transform 0.4s ease 0.15s;
}

.qf-t-val-item.is-active .qf-t-val-content {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.qf-t-val-tag {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 800;
    color: #D4FF00;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.qf-t-val-heading {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.2vw, 2.1rem);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.2;
    margin: 0 0 16px;
}

.qf-t-val-body {
    font-size: 0.98rem;
    line-height: 1.62;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 20px;
}

.qf-t-val-points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.qf-t-val-points li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
    font-weight: 600;
    color: #FFFFFF;
}

.qf-t-val-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FFFFFF;
    color: #012C44;
    font-size: 0.78rem;
    flex-shrink: 0;
}

/* --- 3. OUR MILESTONES SECTION (TAMA TIMELINE + YEAR BAR) --- */
.qf-t-milestones {
    background: #FFFFFF;
    border-top: 1px solid #E6EFE6;
}

.qf-t-milestone-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 40px;
    gap: 24px;
}

.qf-t-carousel-nav {
    display: flex;
    gap: 12px;
}

.qf-t-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FFFFFF;
    border: 1px solid #D6E8D5;
    color: #012C44;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.92rem;
    padding: 10px 20px;
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.qf-t-nav-btn:hover:not(:disabled) {
    background: #55C83A;
    border-color: #55C83A;
    color: #012C44;
}

.qf-t-nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.qf-milestone-track-wrap {
    overflow: hidden;
    margin-bottom: 36px;
}

.qf-milestone-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 16px 4px 28px;
    scrollbar-width: thin;
    scrollbar-color: #55C83A #EBF5E9;
}

.qf-milestone-card {
    flex: 0 0 340px;
    scroll-snap-align: start;
    background: #F4F8F4;
    border: 1px solid #D6E8D5;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.qf-milestone-card:hover,
.qf-milestone-card.is-active {
    transform: translateY(-4px);
    border-color: #55C83A;
    box-shadow: 0 14px 30px rgba(1, 44, 68, 0.08);
}

.qf-ms-year-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    background: #012C44;
    color: #D4FF00;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.9rem;
    padding: 4px 12px;
    border-radius: 14px;
    letter-spacing: 0.04em;
}

.qf-ms-img {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #E0EDE0;
}

.qf-ms-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.qf-milestone-card:hover .qf-ms-img img {
    transform: scale(1.04);
}

.qf-ms-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.qf-ms-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    color: #012C44;
    margin: 0 0 10px;
    line-height: 1.3;
}

.qf-ms-text {
    font-size: 0.92rem;
    line-height: 1.6;
    color: #4A5B68;
    margin: 0;
}

/* Tama Year Bar Navigation */
.qf-tama-year-bar {
    position: relative;
    padding: 20px 0;
}

.qf-year-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: #D6E8D5;
    z-index: 1;
}

.qf-year-buttons {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    overflow-x: auto;
    padding: 8px 0;
    gap: 16px;
}

.qf-year-btn {
    background: #FFFFFF;
    border: 2px solid #D6E8D5;
    color: #012C44;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 800;
    padding: 8px 18px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.qf-year-btn:hover {
    border-color: #55C83A;
    color: #55C83A;
}

.qf-year-btn.is-active {
    background: #55C83A;
    border-color: #55C83A;
    color: #012C44;
    box-shadow: 0 4px 14px rgba(85, 200, 58, 0.35);
}

/* --- 4. TOGETHER WE GROW FOR CHANGE (TAMA COMMITMENT BANNER) --- */
.qf-t-commitment-section {
    padding: 60px 0;
    background: #FFFFFF;
}

.qf-t-commit-card {
    background: linear-gradient(135deg, #012C44 0%, #063958 100%);
    border-radius: 24px;
    padding: 64px 72px;
    display: grid;
    grid-template-columns: 1.4fr 0.8fr;
    gap: 48px;
    align-items: center;
    position: relative;
    overflow: hidden;
    color: #FFFFFF;
    box-shadow: 0 20px 50px rgba(1, 44, 68, 0.2);
}

.qf-t-commit-card::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(85, 200, 58, 0.2) 0%, rgba(1, 44, 68, 0) 70%);
    pointer-events: none;
}

.qf-commit-eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #D4FF00;
    margin-bottom: 16px;
}

.qf-commit-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.2vw, 2.8rem);
    font-weight: 800;
    line-height: 1.18;
    color: #FFFFFF;
    margin: 0 0 18px;
}

.qf-commit-desc {
    font-size: 1.1rem;
    line-height: 1.65;
    color: #C3D5E2;
    margin: 0 0 32px;
    max-width: 620px;
}

.qf-commit-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* --- Editorial pill buttons (hero + commitment banner) --- */
.qf-btn-t-primary,
.qf-btn-t-navy,
.qf-btn-t-white {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 32px;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    border-radius: 30px;
    border: 2px solid transparent;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.qf-btn-t-arrow {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Bright grass green, hover white */
.qf-btn-t-primary {
    background: #67D031;
    color: #FFFFFF;
}

.qf-btn-t-primary:hover,
.qf-btn-t-primary:focus-visible {
    background: #FFFFFF;
    color: #012C44;
    border-color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(1, 44, 68, 0.28);
    outline: none;
}

/* Deep navy, hover brand green */
.qf-btn-t-navy {
    background: #012C44;
    color: #FFFFFF;
}

.qf-btn-t-navy:hover,
.qf-btn-t-navy:focus-visible {
    background: #55C83A;
    color: #FFFFFF;
    border-color: #55C83A;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(1, 44, 68, 0.34);
    outline: none;
}

/* White, hover brand green */
.qf-btn-t-white {
    background: #FFFFFF;
    color: #012C44;
}

.qf-btn-t-white:hover,
.qf-btn-t-white:focus-visible {
    background: #55C83A;
    color: #FFFFFF;
    border-color: #55C83A;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(85, 200, 58, 0.34);
    outline: none;
}

.qf-btn-t-primary:hover .qf-btn-t-arrow,
.qf-btn-t-primary:focus-visible .qf-btn-t-arrow,
.qf-btn-t-navy:hover .qf-btn-t-arrow,
.qf-btn-t-navy:focus-visible .qf-btn-t-arrow,
.qf-btn-t-white:hover .qf-btn-t-arrow,
.qf-btn-t-white:focus-visible .qf-btn-t-arrow {
    transform: translateX(5px);
}

.qf-commit-graphic {
    display: flex;
    justify-content: center;
    align-items: center;
}

.qf-commit-circle-outer {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 3px dashed #55C83A;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px;
    animation: qfSpin 40s linear infinite;
}

@keyframes qfSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.qf-commit-circle-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #55C83A;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #012C44;
    text-align: center;
    animation: qfSpinCounter 40s linear infinite;
}

@keyframes qfSpinCounter {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

.qf-commit-circ-pct {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
}

.qf-commit-circ-label {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

/* --- 5. INDUSTRIAL ACTIVITIES (TAMA FARMING ACTIVITIES CAROUSEL) --- */
.qf-t-activities {
    background: #F4F8F4;
    border-top: 1px solid #E6EFE6;
    border-bottom: 1px solid #E6EFE6;
}

.qf-t-act-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 44px;
    gap: 24px;
}

.qf-act-track-wrap {
    overflow: hidden;
}

.qf-act-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 12px 4px 28px;
    scrollbar-width: thin;
    scrollbar-color: #55C83A #EBF5E9;
}

.qf-act-card {
    flex: 0 0 340px;
    scroll-snap-align: start;
    background: #FFFFFF;
    border: 1px solid #D6E8D5;
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.qf-act-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(1, 44, 68, 0.08);
}

.qf-act-media {
    position: relative;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    background: #EBF5E9;
}

.qf-act-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.qf-act-card:hover .qf-act-media img {
    transform: scale(1.04);
}

.qf-act-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(1, 44, 68, 0.9);
    color: #FFFFFF;
    font-family: var(--font-display);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 4px 12px;
    border-radius: 12px;
}

.qf-act-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.qf-act-name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    color: #012C44;
    margin: 0 0 10px;
    line-height: 1.3;
}

.qf-act-desc {
    font-size: 0.92rem;
    line-height: 1.6;
    color: #4A5B68;
    margin: 0 0 20px;
    flex-grow: 1;
}

.qf-act-link {
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 800;
    color: #55C83A;
    text-decoration: none;
    transition: color 0.2s ease, gap 0.2s ease;
}

.qf-act-link:hover {
    color: #012C44;
}

/* --- 6. OUR FIELD OF EXPERTISE (TAMA DUAL FEATURE BLOCKS) --- */
.qf-t-expertise {
    background: #FFFFFF;
}

.qf-t-exp-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 36px;
}

.qf-t-exp-card {
    background: #F4F8F4;
    border: 1px solid #D6E8D5;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.qf-t-exp-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(1, 44, 68, 0.08);
}

.qf-exp-media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #E8EFE8;
}

.qf-exp-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.qf-t-exp-card:hover .qf-exp-media img {
    transform: scale(1.04);
}

.qf-exp-body {
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.qf-exp-pill {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.75rem;
    font-weight: 800;
    color: #00B9BC;
    background: #EBF5E9;
    padding: 4px 12px;
    border-radius: 12px;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}

.qf-exp-title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 800;
    color: #012C44;
    line-height: 1.25;
    margin: 0 0 14px;
}

.qf-exp-desc {
    font-size: 1.02rem;
    line-height: 1.65;
    color: #4A5B68;
    margin: 0 0 20px;
}

.qf-exp-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qf-exp-list li {
    font-size: 0.92rem;
    font-weight: 600;
    color: #012C44;
    position: relative;
    padding-left: 20px;
}

.qf-exp-list li::before {
    content: "•";
    position: absolute;
    left: 4px;
    color: #55C83A;
    font-size: 1.2rem;
    line-height: 1;
}

/* --- 7. MEET OUR TEAM (TAMA TEAM CAROUSEL) --- */
.qf-t-team {
    background: #FFFFFF;
    border-top: 1px solid #E6EFE6;
}

.qf-t-team-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 44px;
    gap: 24px;
}

.qf-team-track-wrap {
    overflow: hidden;
}

.qf-team-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 12px 4px 28px;
    scrollbar-width: thin;
    scrollbar-color: #55C83A #EBF5E9;
}

.qf-team-card {
    flex: 0 0 280px;
    scroll-snap-align: start;
    background: #F4F8F4;
    border: 1px solid #D6E8D5;
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.qf-team-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(1, 44, 68, 0.08);
}

.qf-team-photo {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #E2ECE2;
}

.qf-team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.qf-team-card:hover .qf-team-photo img {
    transform: scale(1.04);
}

.qf-team-info {
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.qf-team-role {
    font-size: 0.8rem;
    font-weight: 800;
    color: #55C83A;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.qf-team-name {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 800;
    color: #012C44;
    margin: 0 0 10px;
    line-height: 1.25;
}

.qf-team-bio {
    font-size: 0.88rem;
    line-height: 1.55;
    color: #4A5B68;
    margin: 0;
}

/* --- 8. JOIN US / CLOSING ACTION BANNER (TAMA JOIN US) --- */
.qf-t-join {
    padding: 40px 0 96px;
    background: #FFFFFF;
}

.qf-t-join-banner {
    background: linear-gradient(135deg, #55C83A 0%, #3CA822 100%);
    border-radius: 24px;
    padding: 68px 56px;
    color: #FFFFFF;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 48px rgba(85, 200, 58, 0.28);
}

.qf-t-join-banner::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.qf-t-join-inner {
    max-width: 820px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.qf-join-eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #012C44;
    background: #D4FF00;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 20px;
}

.qf-join-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 3.8vw, 3.4rem);
    font-weight: 800;
    line-height: 1.15;
    color: #FFFFFF;
    margin: 0 0 18px;
    letter-spacing: -0.03em;
}

.qf-join-lead {
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.65;
    color: #FFFFFF;
    opacity: 0.96;
    margin: 0 0 20px;
}

.qf-join-slogan {
    font-size: 1.15rem;
    color: #012C44;
    margin: 0 0 36px;
}

.qf-join-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.qf-btn-signal--large {
    background: #D4FF00;
    color: #012C44;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
    padding: 16px 36px;
    border-radius: 32px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}

.qf-btn-signal--large:hover {
    background: #E4FF4D;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

.qf-btn-t-white {
    background: #FFFFFF;
    color: #012C44;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
    padding: 16px 32px;
    border-radius: 32px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.qf-btn-t-white:hover {
    background: #012C44;
    color: #FFFFFF;
    transform: translateY(-2px);
}

/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 1024px) {
    .qf-tama-metrics {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }

    .qf-t-metric-item:nth-child(2)::after {
        display: none;
    }

    .qf-t-val-accordion {
        flex-direction: column;
        height: auto;
    }

    .qf-t-val-item {
        min-height: 110px;
        flex: none;
    }

    .qf-t-val-item.is-active {
        min-height: 480px;
        flex: none;
    }

    .qf-t-commit-card {
        grid-template-columns: 1fr;
        padding: 48px 36px;
    }

    .qf-commit-graphic {
        order: -1;
    }

    .qf-t-exp-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .qf-t-section {
        padding: 60px 0;
    }

    .qf-t-hero {
        min-height: auto;
        padding: 64px 0 0;
        justify-content: flex-start;
    }

    /* Portrait-ish hero on phones: hold the subject high and darken vertically */
    .qf-t-hero-media img {
        object-position: center 32%;
    }

    .qf-t-hero-scrim {
        background:
            linear-gradient(180deg, rgba(1, 44, 68, 0.88) 0%, rgba(1, 44, 68, 0.66) 48%, rgba(1, 44, 68, 0.80) 100%);
    }

    .qf-t-hero-shell {
        padding-bottom: 36px;
    }

    .qf-t-hero-tabs-shell {
        grid-template-columns: repeat(2, 1fr);
    }

    .qf-t-hero-tab {
        padding: 16px 14px;
        font-size: 0.76rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }

    .qf-t-hero-tab:nth-child(2n) {
        border-right: 0;
    }

    .qf-t-hero-tab:nth-last-child(-n+2) {
        border-bottom: 0;
    }

    .qf-t-story {
        padding: 60px 0 64px;
    }

    .qf-tama-metrics {
        grid-template-columns: 1fr;
        padding: 28px 20px;
    }

    .qf-t-metric-item:not(:last-child)::after {
        display: none;
    }

    .qf-t-val-item.is-active {
        min-height: 520px;
        padding: 0;
    }

    .qf-t-val-content {
        padding: 32px 24px;
    }

    .qf-t-join-banner {
        padding: 44px 24px;
        border-radius: 18px;
    }

    .qf-join-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .qf-btn-signal--large,
    .qf-btn-t-white {
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   OEM & PRIVATE LABEL LANDING PAGE STYLES & DYNAMICS
   ========================================================================== */

.qf-oem-page {
    overflow-x: hidden;
}

/* 1. OEM Hero Section */
.qf-oem-hero {
    position: relative;
    padding: 108px 0 132px;
    background-color: #00B9BC !important;
    background-image: none !important;
    background: #00B9BC !important;
    color: #FFFFFF;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), 0 100%);
    overflow: hidden;
}

.qf-oem-hero-bg {
    display: none !important;
}

.qf-oem-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.18;
    filter: brightness(0.85) contrast(1.15);
    transform: scale(1);
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-oem-hero:hover .qf-oem-hero-bg img {
    transform: scale(1.03);
}

.qf-oem-hero-overlay {
    display: none !important;
}

.qf-oem-hero-content {
    position: relative;
    z-index: 3;
    max-width: 980px;
}

.qf-oem-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    margin-bottom: 24px;
    backdrop-filter: blur(8px);
}

.qf-oem-hero-badge .qf-badge-dot {
    width: 8px;
    height: 8px;
    background: #67D031;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(103, 208, 49, 0.8);
    animation: qfPulse 2s infinite;
}

/* The OEM hero H1 is white on this teal #00B9BC band, as it was before the owner
   tried signal lime #D4FF00 and asked for white again (2.5:1 for white over the
   band before the veil). Lime is not used on this title. */
.qf-oem-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 4.4vw, 3.8rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.04em;
    color: #FFFFFF;
    margin: 0 0 24px;
}

.qf-oem-hero-lead {
    font-size: clamp(1.05rem, 1.4vw, 1.22rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.84);
    margin: 0 0 36px;
    max-width: 840px;
}

.qf-oem-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 40px;
}

.qf-oem-hero-actions .qf-btn--primary {
    background: var(--signal);
    color: #012C44;
    font-weight: 800;
    border: 2px solid var(--signal);
    box-shadow: 0 4px 18px rgba(212, 255, 0, 0.35);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-oem-hero-actions .qf-btn--primary:hover {
    background: #FFFFFF;
    color: #012C44;
    border-color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 0 24px rgba(255, 255, 255, 0.7), 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* "Explore OEM Scope" (second hero button) is a white button with a deep navy
   label at the owner's request; hovering inverts it to deep navy #012C44 with a
   white label. It was navy-on-teal that hovered to brand green. */
.qf-oem-hero-actions .qf-btn--outline {
    background: #FFFFFF;
    color: #012C44;
    border: 2px solid #FFFFFF;
    font-weight: 700;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-oem-hero-actions .qf-btn--outline:hover,
.qf-oem-hero-actions .qf-btn--outline:focus-visible {
    background: #012C44;
    color: #FFFFFF;
    border-color: #012C44;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(1, 44, 68, 0.35);
}

.qf-oem-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.qf-oem-hero-chips li {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.qf-oem-hero-chips li::before {
    content: "✓";
    color: #67D031;
    font-weight: 800;
}

.qf-oem-hero-chips li:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #67D031;
}

/* 2. Key Metrics Strip */
.qf-oem-stats {
    background: #FFFFFF;
    padding: 48px 0;
    border-bottom: 1px solid #E5E9EB;
}

.qf-oem-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.qf-oem-stat {
    display: flex;
    flex-direction: column;
    padding-left: 20px;
    border-left: 3px solid #67D031;
    transition: transform 0.3s ease;
}

.qf-oem-stat:hover {
    transform: translateY(-3px);
}

.qf-oem-stat-val {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 8px;
}

.qf-oem-stat-val .qf-oem-counter {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 3.2vw, 3rem);
    font-weight: 800;
    line-height: 1;
    color: #012C44;
}

.qf-oem-stat-val .qf-stat-unit,
.qf-oem-stat-val .qf-stat-plus {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    color: #67D031;
}

.qf-oem-stat-label {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 800;
    color: #012C44;
    margin-bottom: 6px;
}

.qf-oem-stat-sub {
    font-size: 0.88rem;
    line-height: 1.45;
    color: #556662;
    margin: 0;
}

/* 3. Pathways Tabs Section */
.qf-oem-pathways-sec {
    background: #F4F7F6;
    padding: 96px 0;
}

.qf-oem-tabs-wrap {
    margin-top: 48px;
}

.qf-oem-tab-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    background: #FFFFFF;
    padding: 8px;
    border-radius: 14px;
    border: 1px solid #E0E6E5;
    box-shadow: 0 4px 16px rgba(1, 44, 68, 0.04);
}

.qf-oem-tab-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: all 0.25s ease;
}

.qf-oem-tab-btn .qf-oem-tab-num {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 800;
    color: #8C9E9A;
    transition: color 0.25s ease;
}

.qf-oem-tab-btn .qf-oem-tab-title {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: #4B5A56;
    transition: color 0.25s ease;
}

.qf-oem-tab-btn:hover {
    background: #F0F4F3;
}

.qf-oem-tab-btn.is-active {
    background: #55C83A;
    box-shadow: 0 6px 18px rgba(85, 200, 58, 0.35);
}

.qf-oem-tab-btn.is-active .qf-oem-tab-num {
    color: #012C44;
}

.qf-oem-tab-btn.is-active .qf-oem-tab-title {
    color: #FFFFFF;
}

.qf-oem-tab-content {
    margin-top: 24px;
}

.qf-oem-tab-panel {
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.qf-oem-tab-panel.is-active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.qf-oem-panel-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid #E0E6E5;
    border-radius: 20px;
    padding: 48px;
    box-shadow: 0 10px 30px rgba(1, 44, 68, 0.05);
}

.qf-oem-panel-tag {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #67D031;
    margin-bottom: 12px;
}

.qf-oem-panel-text h3 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    font-weight: 800;
    line-height: 1.2;
    color: #012C44;
    margin: 0 0 16px;
}

.qf-oem-panel-text p {
    font-size: 1rem;
    line-height: 1.65;
    color: #4B5A56;
    margin: 0 0 24px;
}

.qf-oem-panel-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.qf-oem-panel-points li {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #2F3E3B;
    position: relative;
    padding-left: 24px;
}

.qf-oem-panel-points li::before {
    content: "■";
    position: absolute;
    left: 0;
    color: #67D031;
    font-size: 0.75rem;
    top: 2px;
}

.qf-oem-panel-media {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(1, 44, 68, 0.08);
}

.qf-oem-panel-media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
    transition: transform 0.6s ease;
}

.qf-oem-panel-media:hover img {
    transform: scale(1.03);
}

/* 4. Branding Capabilities Grid */
.qf-oem-branding-sec {
    background: #FFFFFF;
    padding: 96px 0;
}

.qf-oem-branding-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 48px;
}

.qf-oem-brand-card {
    background: #F8FAFA;
    border: 1px solid #E2E8E7;
    border-radius: 16px;
    padding: 36px 30px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.qf-oem-brand-card:hover {
    transform: translateY(-6px);
    border-color: #67D031;
    box-shadow: 0 16px 36px rgba(1, 44, 68, 0.08);
    background: #FFFFFF;
}

.qf-oem-brand-icon {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background: #E8F5E9;
    color: #0D4B3E;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: background 0.3s ease, color 0.3s ease;
}

.qf-oem-brand-card:hover .qf-oem-brand-icon {
    background: #012C44;
    color: #67D031;
}

.qf-oem-brand-card h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.3;
    color: #012C44;
    margin: 0 0 12px;
}

.qf-oem-brand-card p {
    font-size: 0.92rem;
    line-height: 1.6;
    color: #556662;
    margin: 0 0 20px;
    flex-grow: 1;
}

.qf-oem-card-badge {
    align-self: flex-start;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    color: #012C44;
    background: #E5EFF3;
    padding: 4px 10px;
    border-radius: 6px;
}

/* 5. Artwork Guidelines & Checklist */
.qf-oem-artwork-sec {
    background: var(--soft);
    padding: 96px 0;
}

.qf-oem-artwork-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 40px;
    margin-top: 48px;
}

.qf-oem-artwork-card {
    background: #FFFFFF;
    border-radius: 18px;
    padding: 40px;
    border: 1px solid #D8E0DE;
    box-shadow: 0 6px 20px rgba(1, 44, 68, 0.04);
}

.qf-oem-artwork-card h3 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 800;
    color: #012C44;
    margin: 0 0 24px;
}

.qf-oem-specs-list dt {
    font-family: var(--font-display);
    font-weight: 800;
    color: #012C44;
    font-size: 0.95rem;
    margin-top: 14px;
}

.qf-oem-specs-list dd {
    margin: 4px 0 14px;
    font-size: 0.92rem;
    line-height: 1.55;
    color: #556662;
    padding-bottom: 14px;
    border-bottom: 1px solid #EDF2F1;
}

.qf-oem-specs-list dd:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.qf-oem-check-card {
    background: #55C83A;
    color: #012C44;
    border-radius: 18px;
    padding: 40px;
    box-shadow: 0 12px 36px rgba(85, 200, 58, 0.28);
}

.qf-oem-check-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.qf-oem-check-header .qf-badge-dot {
    width: 10px;
    height: 10px;
    background: #012C44;
    border-radius: 50%;
}

.qf-oem-check-header h3 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 800;
    color: #012C44;
    margin: 0;
}

.qf-oem-check-desc {
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(1, 44, 68, 0.78);
    margin: 0 0 24px;
}

.qf-oem-check-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.qf-oem-check-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    background: #FFFFFF;
    border: 1px solid #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(1, 44, 68, 0.1);
    cursor: pointer;
    transition: all 0.25s ease;
}

.qf-oem-check-item:hover {
    box-shadow: 0 8px 18px rgba(1, 44, 68, 0.18);
    transform: translateY(-1px);
}

.qf-oem-check-item.is-checked {
    background: #012C44;
    border-color: #012C44;
    box-shadow: 0 8px 18px rgba(1, 44, 68, 0.26);
}

.qf-oem-check-item .qf-check-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(1, 44, 68, 0.08);
    color: #012C44;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    flex-shrink: 0;
    transition: background 0.25s ease, color 0.25s ease;
}

.qf-oem-check-item.is-checked .qf-check-icon {
    background: #55C83A;
    color: #012C44;
}

.qf-oem-check-card .qf-check-text strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: #012C44;
    margin-bottom: 2px;
    transition: color 0.25s ease;
}

.qf-oem-check-card .qf-check-text span {
    font-size: 0.82rem;
    line-height: 1.4;
    color: rgba(1, 44, 68, 0.8);
    transition: color 0.25s ease;
}

/* Ticked row sits on navy, so its copy flips to white */
.qf-oem-check-card .qf-oem-check-item.is-checked .qf-check-text strong {
    color: #FFFFFF;
}

.qf-oem-check-card .qf-oem-check-item.is-checked .qf-check-text span {
    color: rgba(255, 255, 255, 0.82);
}

/* 6. Packaging Modes Grid */
.qf-oem-packaging-sec {
    background: #FFFFFF;
    padding: 96px 0;
}

.qf-oem-pack-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-top: 48px;
}

.qf-oem-pack-card {
    background: #F9FBFA;
    border: 1px solid #E0E7E6;
    border-radius: 18px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.qf-oem-pack-card:hover {
    transform: translateY(-5px);
    border-color: #67D031;
    box-shadow: 0 16px 36px rgba(1, 44, 68, 0.08);
}

.qf-oem-pack-media {
    position: relative;
    overflow: hidden;
    height: 260px;
}

.qf-oem-pack-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.qf-oem-pack-card:hover .qf-oem-pack-media img {
    transform: scale(1.04);
}

.qf-oem-pack-body {
    padding: 32px;
}

.qf-oem-pack-badge {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #0D4B3E;
    background: #E8F5E9;
    padding: 4px 10px;
    border-radius: 6px;
    margin-bottom: 12px;
}

.qf-oem-pack-body h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 800;
    color: #012C44;
    margin: 0 0 12px;
}

.qf-oem-pack-body p {
    font-size: 0.92rem;
    line-height: 1.6;
    color: #556662;
    margin: 0 0 20px;
}

.qf-oem-pack-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qf-oem-pack-features li {
    font-size: 0.88rem;
    color: #2F3E3B;
    position: relative;
    padding-left: 20px;
}

.qf-oem-pack-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #67D031;
    font-weight: 800;
}

.qf-oem-packaging-sec .qf-why-cards {
    gap: 18px;
}

/* Card 1: 湖蓝绿 #00B9BC */
.qf-oem-packaging-sec #oem-pack-panel-1 {
    background-color: #00B9BC !important;
}
.qf-oem-packaging-sec #oem-pack-panel-1 .qf-why-card-backdrop {
    background: rgba(0, 185, 188, 0.25) !important;
}
.qf-oem-packaging-sec #oem-pack-panel-1.open .qf-why-card-backdrop {
    background: linear-gradient(90deg, rgba(0, 185, 188, 0.94) 0%, rgba(0, 185, 188, 0.82) 55%, rgba(0, 185, 188, 0.6) 100%) !important;
}
.qf-oem-packaging-sec #oem-pack-panel-1 .qf-why-closed-title,
.qf-oem-packaging-sec #oem-pack-panel-1 .qf-why-open-title,
.qf-oem-packaging-sec #oem-pack-panel-1 .qf-why-open-desc {
    color: #FFFFFF !important;
}
.qf-oem-packaging-sec #oem-pack-panel-1 .qf-why-open .qf-eyebrow {
    color: #D4FF00 !important;
}

/* Card 2: 深墨绿 #0D4B3E */
.qf-oem-packaging-sec #oem-pack-panel-2 {
    background-color: #0D4B3E !important;
}
.qf-oem-packaging-sec #oem-pack-panel-2 .qf-why-card-backdrop {
    background: rgba(13, 75, 62, 0.25) !important;
}
.qf-oem-packaging-sec #oem-pack-panel-2.open .qf-why-card-backdrop {
    background: linear-gradient(90deg, rgba(13, 75, 62, 0.94) 0%, rgba(13, 75, 62, 0.82) 55%, rgba(13, 75, 62, 0.6) 100%) !important;
}
.qf-oem-packaging-sec #oem-pack-panel-2 .qf-why-closed-title,
.qf-oem-packaging-sec #oem-pack-panel-2 .qf-why-open-title,
.qf-oem-packaging-sec #oem-pack-panel-2 .qf-why-open-desc {
    color: #FFFFFF !important;
}
.qf-oem-packaging-sec #oem-pack-panel-2 .qf-why-open .qf-eyebrow {
    color: #D4FF00 !important;
}

/* Card 3: 亮绿色 #D4FF00 */
.qf-oem-packaging-sec #oem-pack-panel-3 {
    background-color: #D4FF00 !important;
}
.qf-oem-packaging-sec #oem-pack-panel-3 .qf-why-card-backdrop {
    background: rgba(212, 255, 0, 0.15) !important;
}
.qf-oem-packaging-sec #oem-pack-panel-3.open .qf-why-card-backdrop {
    background: linear-gradient(90deg, rgba(212, 255, 0, 0.96) 0%, rgba(212, 255, 0, 0.88) 55%, rgba(212, 255, 0, 0.72) 100%) !important;
}
.qf-oem-packaging-sec #oem-pack-panel-3 .qf-why-closed-title {
    color: #012C44 !important;
    text-shadow: none !important;
}
.qf-oem-packaging-sec #oem-pack-panel-3 .qf-why-closed-arrow {
    background: rgba(1, 44, 68, 0.15) !important;
    color: #012C44 !important;
}
.qf-oem-packaging-sec #oem-pack-panel-3:not(.open):hover .qf-why-closed-arrow {
    background: #012C44 !important;
    color: #D4FF00 !important;
}
.qf-oem-packaging-sec #oem-pack-panel-3 .qf-why-open-title {
    color: #012C44 !important;
    text-shadow: none !important;
}
.qf-oem-packaging-sec #oem-pack-panel-3 .qf-why-open-desc {
    color: #0D4B3E !important;
    text-shadow: none !important;
}
.qf-oem-packaging-sec #oem-pack-panel-3 .qf-why-open .qf-eyebrow {
    color: #0D4B3E !important;
}
.qf-oem-packaging-sec #oem-pack-panel-3 .qf-why-open .qf-btn--light {
    background-color: #012C44 !important;
    color: #FFFFFF !important;
}
.qf-oem-packaging-sec #oem-pack-panel-3 .qf-why-open .qf-btn--light:hover {
    background-color: #0D4B3E !important;
    color: #D4FF00 !important;
}

/* Card 4: 深海军蓝 #012C44 */
.qf-oem-packaging-sec #oem-pack-panel-4 {
    background-color: #012C44 !important;
}
.qf-oem-packaging-sec #oem-pack-panel-4 .qf-why-card-backdrop {
    background: rgba(1, 44, 68, 0.25) !important;
}
.qf-oem-packaging-sec #oem-pack-panel-4.open .qf-why-card-backdrop {
    background: linear-gradient(90deg, rgba(1, 44, 68, 0.94) 0%, rgba(1, 44, 68, 0.82) 55%, rgba(1, 44, 68, 0.6) 100%) !important;
}
.qf-oem-packaging-sec #oem-pack-panel-4 .qf-why-closed-title,
.qf-oem-packaging-sec #oem-pack-panel-4 .qf-why-open-title,
.qf-oem-packaging-sec #oem-pack-panel-4 .qf-why-open-desc {
    color: #FFFFFF !important;
}
.qf-oem-packaging-sec #oem-pack-panel-4 .qf-why-open .qf-eyebrow {
    color: #D4FF00 !important;
}

/* Mobile responsive accordion adjustments for OEM Packaging */
@media (max-width: 768px) {
    .qf-oem-packaging-sec #oem-pack-panel-1.open .qf-why-card-backdrop {
        background: linear-gradient(180deg, rgba(0, 185, 188, 0.8) 0%, rgba(0, 185, 188, 0.96) 100%) !important;
    }
    .qf-oem-packaging-sec #oem-pack-panel-2.open .qf-why-card-backdrop {
        background: linear-gradient(180deg, rgba(13, 75, 62, 0.8) 0%, rgba(13, 75, 62, 0.96) 100%) !important;
    }
    .qf-oem-packaging-sec #oem-pack-panel-3.open .qf-why-card-backdrop {
        background: linear-gradient(180deg, rgba(212, 255, 0, 0.85) 0%, rgba(212, 255, 0, 0.98) 100%) !important;
    }
    .qf-oem-packaging-sec #oem-pack-panel-4.open .qf-why-card-backdrop {
        background: linear-gradient(180deg, rgba(1, 44, 68, 0.8) 0%, rgba(1, 44, 68, 0.96) 100%) !important;
    }
}

/* 7. IP Governance Section */
.qf-oem-governance-sec {
    background: #00B9BC !important;
    color: #FFFFFF;
    padding: 96px 0;
}

.qf-oem-governance-sec .qf-eyebrow {
    color: #D4FF00;
}

.qf-oem-governance-sec .qf-section-title {
    color: #FFFFFF;
}

.qf-oem-governance-sec .qf-lead {
    color: rgba(255, 255, 255, 0.9);
}

.qf-oem-gov-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 48px;
}

.qf-oem-gov-card {
    background: #012C44 !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 32px 24px;
    transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.qf-oem-gov-card:hover {
    transform: translateY(-5px);
    background: #012438 !important;
    border-color: #D4FF00;
    box-shadow: 0 16px 36px rgba(1, 44, 68, 0.45);
}

.qf-oem-gov-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #D4FF00;
    color: #012C44;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 800;
    margin-bottom: 20px;
}

.qf-oem-gov-card h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.3;
    color: #FFFFFF;
    margin: 0 0 12px;
}

.qf-oem-gov-card p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

/* 8. Action CTA Banner */
.qf-oem-cta {
    background: #67D031;
    padding: 96px 0;
    text-align: center;
}

.qf-oem-cta .qf-cta-content {
    max-width: 860px;
    margin: 0 auto;
}

.qf-oem-cta .qf-eyebrow {
    color: #012C44;
    margin-bottom: 14px;
}

.qf-oem-cta .qf-cta-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 3.8vw, 3.4rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    margin: 0 0 20px;
}

.qf-oem-cta .qf-cta-sub {
    font-size: 1.1rem;
    line-height: 1.65;
    color: #012C44;
    opacity: 0.9;
    margin: 0 0 36px;
}

.qf-oem-cta .qf-cta-actions {
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}

.qf-oem-cta .qf-btn--light {
    background: #D4FF00;
    color: #012C44;
    font-weight: 700;
    border: none;
    box-shadow: 0 8px 24px rgba(1, 44, 68, 0.22);
    transition: all 0.3s ease;
}

.qf-oem-cta .qf-btn--light:hover {
    background: #FFFFFF;
    color: #012C44;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(1, 44, 68, 0.3);
}

.qf-oem-cta .qf-btn--light:focus-visible {
    outline: 3px solid #012C44;
    outline-offset: 3px;
}

.qf-oem-cta .qf-btn--ghost {
    background: #FFFFFF;
    color: #012C44;
    border: 2px solid #FFFFFF;
    font-weight: 700;
    transition: all 0.3s ease;
}

.qf-oem-cta .qf-btn--ghost:hover {
    background: #012C44;
    border-color: #012C44;
    color: #FFFFFF;
    transform: translateY(-2px);
}

.qf-oem-cta .qf-btn--ghost:focus-visible {
    outline: 3px solid #012C44;
    outline-offset: 3px;
}

/* Responsive Media Queries for OEM Page */
@media (max-width: 1080px) {
    .qf-oem-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }

    .qf-oem-tab-nav {
        grid-template-columns: repeat(2, 1fr);
    }

    .qf-oem-panel-grid {
        grid-template-columns: 1fr;
        padding: 36px;
    }

    .qf-oem-branding-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .qf-oem-artwork-grid {
        grid-template-columns: 1fr;
    }

    .qf-oem-pack-grid {
        grid-template-columns: 1fr;
    }

    .qf-oem-gov-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .qf-oem-stats-grid {
        grid-template-columns: 1fr;
    }

    .qf-oem-tab-nav {
        grid-template-columns: 1fr;
    }

    .qf-oem-branding-grid {
        grid-template-columns: 1fr;
    }

    .qf-oem-gov-grid {
        grid-template-columns: 1fr;
    }

    .qf-oem-panel-grid {
        padding: 24px 20px;
    }

    .qf-oem-artwork-card,
    .qf-oem-check-card {
        padding: 28px 20px;
    }
}


/* ==========================================================================
   19. PACKING & LOADING PAGE STYLES & INTERACTIVE DYNAMICS
   Colors:
   - Primary: Brand Green #55C83A
   - Depth/Base: Deep Navy #012C44
   - Accent/Active: Fluorescent Signal Lime #D4FF00
   - Modern Teal: #00B9BC
   - Light Background: #F4F8F4, #EBF5E9
   ========================================================================== */

.qf-packing-page {
    background: #FFFFFF;
    color: #012C44;
}

/* 1. Hero Section */
.qf-pack-hero {
    position: relative;
    overflow: hidden;
    padding: 120px 0 100px;
    background: #012C44;
    color: #FFFFFF;
    clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
}

.qf-pack-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.qf-pack-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.28;
    filter: saturate(1.2) contrast(1.1);
    transform: scale(1.02);
    transition: transform 12s cubic-bezier(0.25, 1, 0.5, 1);
}

.qf-pack-hero:hover .qf-pack-hero-bg img {
    transform: scale(1.06);
}

.qf-pack-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(135deg, rgba(1, 44, 68, 0.94) 0%, rgba(1, 44, 68, 0.85) 55%, rgba(0, 185, 188, 0.28) 100%);
}

.qf-pack-hero-content {
    position: relative;
    z-index: 3;
    max-width: 920px;
}

.qf-pack-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(212, 255, 0, 0.14);
    border: 1px solid rgba(212, 255, 0, 0.4);
    padding: 6px 16px;
    border-radius: 999px;
    margin-bottom: 24px;
    backdrop-filter: blur(8px);
}

.qf-pack-hero-badge .qf-eyebrow {
    color: #D4FF00;
    margin-bottom: 0;
    letter-spacing: 0.08em;
}

.qf-pack-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 4.4vw, 3.8rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: #FFFFFF;
    margin: 0 0 24px;
}

.qf-pack-hero-title span {
    color: #D4FF00;
}

.qf-pack-hero-lead {
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    line-height: 1.68;
    color: rgba(255, 255, 255, 0.88);
    margin: 0 0 36px;
    max-width: 820px;
}

.qf-pack-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 40px;
}

/* Hero buttons: primary = lime, outline = white.
   Both fills are light, so the label stays navy in every state
   (white on lime is about 1.2:1 and white on white 1:1). */
.qf-pack-hero-actions .qf-btn--primary {
    background: #D4FF00;
    color: #012C44;
    font-weight: 800;
    border: 2px solid #D4FF00;
    box-shadow: 0 8px 24px rgba(212, 255, 0, 0.28);
    transition: all 0.3s ease;
}

.qf-pack-hero-actions .qf-btn--primary:hover {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: #012C44;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(255, 255, 255, 0.3);
}

.qf-pack-hero-actions .qf-btn--primary:focus-visible {
    outline: 3px solid #FFFFFF;
    outline-offset: 3px;
}

.qf-pack-hero-actions .qf-btn--outline {
    background: #FFFFFF;
    color: #012C44;
    font-weight: 800;
    border: 2px solid #FFFFFF;
    transition: all 0.3s ease;
}

.qf-pack-hero-actions .qf-btn--outline:hover {
    background: #00B9BC;
    border-color: #00B9BC;
    color: #012C44;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 185, 188, 0.35);
}

.qf-pack-hero-actions .qf-btn--outline:focus-visible {
    outline: 3px solid #00B9BC;
    outline-offset: 3px;
}

.qf-pack-hero-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.qf-pack-hero-chips li {
    font-size: 0.9rem;
    font-weight: 600;
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 8px 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(4px);
    transition: background 0.3s ease, border-color 0.3s ease;
}

.qf-pack-hero-chips li:hover {
    background: rgba(212, 255, 0, 0.15);
    border-color: #D4FF00;
}

.qf-chip-icon {
    color: #D4FF00;
    font-weight: 800;
}

/* 2. Key Logistics Metrics */
.qf-pack-stats {
    background: #FFFFFF;
    margin-top: -30px;
    position: relative;
    z-index: 4;
}

.qf-pack-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    background: #FFFFFF;
    border: 1px solid #D6E8D5;
    border-radius: 18px;
    box-shadow: 0 16px 36px rgba(1, 44, 68, 0.08);
    padding: 32px 28px;
}

.qf-pack-stat {
    padding: 10px 16px;
    border-right: 1px solid #EBF5E9;
    transition: transform 0.3s ease;
}

.qf-pack-stat:last-child {
    border-right: none;
}

.qf-pack-stat:hover {
    transform: translateY(-4px);
}

.qf-pack-stat-val {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 3.2vw, 3rem);
    font-weight: 800;
    color: #012C44;
    line-height: 1;
    margin-bottom: 8px;
}

.qf-pack-counter {
    color: #012C44;
}

.qf-pack-stat .qf-stat-unit {
    font-size: 1.3rem;
    font-weight: 800;
    color: #55C83A;
}

.qf-pack-stat-label {
    font-weight: 700;
    font-size: 0.98rem;
    color: #012C44;
    margin-bottom: 6px;
}

.qf-pack-stat-desc {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #6C7A77;
    margin: 0;
}

/* 3. Four Core Packaging Modes */
.qf-pack-modes-sec {
    padding: 96px 0;
    background: #FFFFFF;
}

.qf-pack-tab-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 40px 0 32px;
}

.qf-pack-tab-btn {
    appearance: none;
    background: #F4F8F4;
    border: 1px solid #D6E8D5;
    border-radius: 14px;
    padding: 20px 18px;
    text-align: left;
    cursor: pointer;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

.qf-pack-tab-btn .qf-tab-num {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 800;
    color: #55C83A;
    letter-spacing: 0.05em;
}

.qf-pack-tab-btn .qf-tab-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    color: #012C44;
    line-height: 1.25;
}

.qf-pack-tab-btn .qf-tab-tag {
    font-size: 0.82rem;
    color: #6C7A77;
    font-weight: 600;
}

.qf-pack-tab-btn:hover {
    background: #EBF5E9;
    border-color: #55C83A;
    transform: translateY(-3px);
}

.qf-pack-tab-btn.is-active {
    background: #55C83A;
    border-color: #55C83A;
    box-shadow: 0 10px 24px rgba(85, 200, 58, 0.28);
    transform: translateY(-3px);
}

/* Brand Green is a light fill, so the selected card's text is navy rather
   than white: navy on #55C83A is about 6.6:1, white would be about 2.2:1. */
.qf-pack-tab-btn.is-active .qf-tab-num {
    color: #012C44;
}

.qf-pack-tab-btn.is-active .qf-tab-title {
    color: #012C44;
}

.qf-pack-tab-btn.is-active .qf-tab-tag {
    color: rgba(1, 44, 68, 0.78);
}

/* Tab Panels */
.qf-pack-tab-panel {
    display: none;
}

.qf-pack-tab-panel.is-active {
    display: block;
    animation: qfPackFadeUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes qfPackFadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.qf-pack-panel-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    background: #F4F8F4;
    border: 1px solid #D6E8D5;
    border-radius: 20px;
    padding: 44px;
    align-items: center;
}

.qf-pack-panel-tag {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #55C83A;
    margin-bottom: 12px;
}

.qf-pack-panel-text h3 {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.3vw, 2.1rem);
    font-weight: 800;
    line-height: 1.22;
    color: #012C44;
    margin: 0 0 18px;
}

.qf-pack-panel-text p {
    font-size: 1.02rem;
    line-height: 1.66;
    color: #4B5A56;
    margin: 0 0 24px;
}

.qf-pack-panel-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 24px;
}

.qf-pack-spec-box {
    background: #FFFFFF;
    border: 1px solid #E1EBE1;
    border-radius: 12px;
    padding: 14px 16px;
}

.qf-spec-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: #6C7A77;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.qf-spec-val {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    color: #012C44;
    line-height: 1.35;
}

.qf-pack-panel-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.qf-pack-panel-points li {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #2F3E3B;
    position: relative;
    padding-left: 24px;
}

.qf-pack-panel-points li::before {
    content: "■";
    position: absolute;
    left: 0;
    color: #55C83A;
    font-size: 0.8rem;
    top: 2px;
}

.qf-pack-panel-media {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(1, 44, 68, 0.12);
}

.qf-pack-panel-media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    transition: transform 0.6s ease;
}

.qf-pack-panel-media:hover img {
    transform: scale(1.03);
}

.qf-media-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(1, 44, 68, 0.9) 100%);
    color: #FFFFFF;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 24px 20px 14px;
}

/* 4. Ocean Container Specifications Table */
.qf-pack-matrix-sec {
    background: #F4F8F4;
    padding: 96px 0;
}

.qf-pack-table-wrap {
    overflow-x: auto;
    background: #FFFFFF;
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(1, 44, 68, 0.06);
    border: 1px solid #D6E8D5;
    margin-top: 36px;
}

.qf-pack-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.95rem;
}

.qf-pack-table th,
.qf-pack-table td {
    padding: 18px 22px;
    border-bottom: 1px solid #EBF5E9;
    color: #2F3E3B;
}

/* Header band is Brand Green. White or lime text on #55C83A fails contrast
   (about 2.2:1 and 1.9:1), so the header labels are navy (about 6.6:1) and the
   "recommended" 40HQ column keeps its cue as a lime rule instead of lime text. */
.qf-pack-table thead th {
    background: #55C83A;
    color: #012C44;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
}

.qf-pack-table thead th.qf-table-highlight {
    background: #55C83A;
    color: #012C44;
    position: relative;
    box-shadow: inset 0 -4px 0 0 #D4FF00;
}

.qf-pack-table tbody th {
    font-weight: 700;
    color: #012C44;
    background: #FAFDF9;
}

.qf-pack-table td.qf-table-highlight {
    background: rgba(212, 255, 0, 0.08);
    font-weight: 700;
    color: #012C44;
}

.qf-badge-glow {
    display: inline-block;
    background: #D4FF00;
    color: #012C44;
    font-size: 0.8rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 6px;
    letter-spacing: 0.03em;
}

.qf-table-note {
    font-size: 0.88rem;
    color: #6C7A77;
    margin-top: 14px;
}

/* 5. Interactive Container Loading Calculator */
.qf-pack-calc-sec {
    padding: 96px 0;
    background: #FFFFFF;
}

.qf-pack-calc-card {
    background: #012C44;
    border-radius: 24px;
    padding: 56px 48px;
    color: #FFFFFF;
    box-shadow: 0 20px 48px rgba(1, 44, 68, 0.2);
}

.qf-calc-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.qf-calc-badge {
    display: inline-block;
    background: rgba(212, 255, 0, 0.15);
    color: #D4FF00;
    border: 1px solid rgba(212, 255, 0, 0.35);
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 6px 16px;
    border-radius: 999px;
    margin-bottom: 16px;
}

.qf-calc-header h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.2vw, 2.8rem);
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 16px;
    line-height: 1.18;
}

.qf-calc-header p {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin: 0;
}

.qf-calc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: stretch;
}

.qf-calc-controls {
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: center;
}

.qf-calc-field label {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    color: #D4FF00;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}

.qf-select {
    width: 100%;
    appearance: none;
    background: #012438 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23D4FF00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 16px center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 14px 44px 14px 18px;
    color: #FFFFFF;
    font-size: 0.98rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.qf-select:hover,
.qf-select:focus {
    border-color: #D4FF00;
    outline: none;
    box-shadow: 0 0 0 3px rgba(212, 255, 0, 0.2);
}

.qf-calc-hint {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.45;
}

.qf-calc-hint svg {
    flex-shrink: 0;
    color: #D4FF00;
}

.qf-calc-results {
    background: #012438;
    border: 1px solid rgba(212, 255, 0, 0.3);
    border-radius: 20px;
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
}

.qf-calc-results-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.qf-res-title {
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #D4FF00;
    margin-bottom: 20px;
}

.qf-res-main {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 24px;
    border-left: 4px solid #D4FF00;
}

.qf-res-main-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 4px;
}

.qf-res-main-val {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 3.5vw, 3.2rem);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.1;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.qf-res-main-val #calc-out-quantity {
    color: #D4FF00;
}

.qf-res-unit {
    font-size: 1.2rem;
    font-weight: 700;
    color: #FFFFFF;
}

.qf-res-sub {
    font-size: 0.95rem;
    font-weight: 600;
    color: #67D031;
    margin-top: 6px;
}

.qf-res-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.qf-res-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
    padding-bottom: 8px;
    font-size: 0.92rem;
}

.qf-row-lbl {
    color: rgba(255, 255, 255, 0.75);
}

.qf-row-val {
    font-weight: 700;
    color: #FFFFFF;
}

.qf-text-signal {
    color: #D4FF00 !important;
}

.qf-res-advice {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 24px;
    font-size: 0.88rem;
    line-height: 1.5;
}

.qf-res-advice strong {
    color: #D4FF00;
    display: block;
    margin-bottom: 4px;
}

.qf-res-advice p {
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.qf-btn--block {
    display: block;
    width: 100%;
    text-align: center;
}

/* 6. Cargo Defense Mechanisms */
.qf-pack-defense-sec {
    background: #00B9BC;
    color: #FFFFFF;
    padding: 96px 0;
}

.qf-pack-defense-sec .qf-eyebrow {
    color: #D4FF00;
}

.qf-pack-defense-sec .qf-section-title {
    color: #FFFFFF;
}

.qf-pack-defense-sec .qf-lead {
    color: rgba(255, 255, 255, 0.92);
}

.qf-pack-defense-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 48px;
}

.qf-defense-card {
    background: #012C44;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    padding: 32px 24px;
    position: relative;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.qf-defense-card:hover {
    transform: translateY(-6px);
    border-color: #D4FF00;
    box-shadow: 0 16px 36px rgba(1, 44, 68, 0.35);
}

.qf-defense-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(212, 255, 0, 0.12);
    color: #D4FF00;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.qf-defense-num {
    position: absolute;
    top: 24px;
    right: 24px;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.2);
}

.qf-defense-card h3 {
    font-family: var(--font-display);
    font-size: 1.22rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 12px;
    line-height: 1.3;
}

.qf-defense-card p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 20px;
    flex-grow: 1;
}

.qf-defense-badge {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.75rem;
    font-weight: 700;
    color: #D4FF00;
    background: rgba(212, 255, 0, 0.12);
    border: 1px solid rgba(212, 255, 0, 0.25);
    padding: 4px 10px;
    border-radius: 6px;
}

/* 7. Pre-Shipment Inspection Checklist */
.qf-pack-audit-sec {
    padding: 96px 0;
    background: #FFFFFF;
}

.qf-pack-audit-card {
    background: #F4F8F4;
    border: 1px solid #D6E8D5;
    border-radius: 20px;
    padding: 44px 40px;
    margin-top: 40px;
}

.qf-audit-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid #D6E8D5;
}

.qf-audit-counter-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 800;
    color: #012C44;
}

.qf-audit-live-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #55C83A;
    box-shadow: 0 0 0 3px rgba(85, 200, 58, 0.25);
    animation: qfPulseDot 1.8s infinite;
}

@keyframes qfPulseDot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
}

.qf-audit-progress-track {
    flex-grow: 1;
    max-width: 400px;
    height: 10px;
    background: #D6E8D5;
    border-radius: 999px;
    overflow: hidden;
}

.qf-audit-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #55C83A 0%, #D4FF00 100%);
    border-radius: 999px;
    transition: width 0.35s ease;
}

.qf-pack-checklist-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.qf-pack-check-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #FFFFFF;
    border: 1px solid #E1EBE1;
    border-radius: 12px;
    padding: 18px 20px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.qf-pack-check-item input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.qf-custom-check {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid #55C83A;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
    transition: all 0.2s ease;
    background: #FFFFFF;
}

.qf-pack-check-item input:checked + .qf-custom-check {
    background: #55C83A;
    border-color: #55C83A;
}

.qf-pack-check-item input:checked + .qf-custom-check::after {
    content: "✓";
    color: #FFFFFF;
    font-size: 0.85rem;
    font-weight: 800;
}

.qf-check-content strong {
    display: block;
    font-size: 0.98rem;
    color: #012C44;
    margin-bottom: 4px;
    font-family: var(--font-display);
}

.qf-check-content p {
    font-size: 0.86rem;
    color: #6C7A77;
    margin: 0;
    line-height: 1.45;
}

.qf-pack-check-item:hover {
    border-color: #55C83A;
    box-shadow: 0 6px 18px rgba(85, 200, 58, 0.1);
}

.qf-pack-check-item.is-done {
    background: #FAFDFA;
    border-color: #C3E0C2;
}

/* 8. Frequently Asked Questions */
.qf-pack-faq-sec {
    padding: 96px 0;
    background: #F4F8F4;
}

.qf-pack-faq-list {
    max-width: 860px;
    margin: 40px auto 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.qf-pack-faq-item {
    background: #FFFFFF;
    border: 1px solid #D6E8D5;
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.qf-pack-faq-item:hover {
    border-color: #55C83A;
}

.qf-pack-faq-item.is-open {
    border-color: #55C83A;
    box-shadow: 0 8px 24px rgba(1, 44, 68, 0.06);
}

.qf-pack-faq-q {
    width: 100%;
    appearance: none;
    background: none;
    border: none;
    padding: 22px 24px;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 800;
    color: #012C44;
    cursor: pointer;
    line-height: 1.35;
}

.qf-faq-arrow {
    flex-shrink: 0;
    color: #55C83A;
    transition: transform 0.3s ease;
}

.qf-pack-faq-item.is-open .qf-faq-arrow {
    transform: rotate(180deg);
}

.qf-pack-faq-a {
    display: none;
    padding: 0 24px 22px;
}

.qf-pack-faq-item.is-open .qf-pack-faq-a {
    display: block;
    animation: qfFaqFade 0.3s ease both;
}

@keyframes qfFaqFade {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.qf-pack-faq-a p {
    font-size: 0.95rem;
    line-height: 1.65;
    color: #4B5A56;
    margin: 0;
}

/* 9. Final Action CTA */
.qf-pack-cta {
    padding: 96px 0;
    background: #FFFFFF;
}

.qf-pack-cta-card {
    background: #55C83A;
    border-radius: 24px;
    padding: 64px 48px;
    text-align: center;
    color: #012C44;
    box-shadow: 0 20px 48px rgba(85, 200, 58, 0.25);
    position: relative;
    overflow: hidden;
}

.qf-pack-cta-card::after {
    content: "";
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: rgba(212, 255, 0, 0.25);
    filter: blur(80px);
    pointer-events: none;
}

.qf-pack-cta-card .qf-eyebrow {
    color: #012C44;
    margin-bottom: 14px;
}

.qf-pack-cta-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.6vw, 3.2rem);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -0.025em;
    color: #FFFFFF;
    margin: 0 auto 20px;
    max-width: 800px;
}

.qf-pack-cta-lead {
    font-size: 1.1rem;
    line-height: 1.65;
    color: #012C44;
    opacity: 0.92;
    margin: 0 auto 36px;
    max-width: 700px;
}

.qf-pack-cta-actions {
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

/* CTA buttons on the Brand Green band: quote = lime, logistics desk = white.
   Navy labels in every state; the ghost button inverts to deep navy on hover. */
.qf-pack-cta-actions .qf-btn--dark {
    background: #D4FF00;
    color: #012C44;
    font-weight: 800;
    border: 2px solid #D4FF00;
    box-shadow: 0 8px 24px rgba(1, 44, 68, 0.18);
    transition: all 0.3s ease;
}

.qf-pack-cta-actions .qf-btn--dark:hover {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: #012C44;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(1, 44, 68, 0.22);
}

.qf-pack-cta-actions .qf-btn--dark:focus-visible {
    outline: 3px solid #012C44;
    outline-offset: 3px;
}

.qf-pack-cta-actions .qf-btn--ghost {
    background: #FFFFFF;
    color: #012C44;
    font-weight: 800;
    border: 2px solid #FFFFFF;
    transition: all 0.3s ease;
}

.qf-pack-cta-actions .qf-btn--ghost:hover {
    background: #012C44;
    border-color: #012C44;
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(1, 44, 68, 0.3);
}

.qf-pack-cta-actions .qf-btn--ghost:focus-visible {
    outline: 3px solid #012C44;
    outline-offset: 3px;
}

.qf-btn--dark {
    background: #012C44;
    color: #FFFFFF;
    font-weight: 700;
    border: none;
    box-shadow: 0 8px 24px rgba(1, 44, 68, 0.25);
    transition: all 0.3s ease;
}

.qf-btn--dark:hover {
    background: #FFFFFF;
    color: #012C44;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(1, 44, 68, 0.35);
}

/* Responsive Media Queries */
@media (max-width: 1080px) {
    .qf-pack-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .qf-pack-stat:nth-child(2) {
        border-right: none;
    }
    .qf-pack-defense-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .qf-pack-calc-grid {
        grid-template-columns: 1fr;
    }
    .qf-pack-panel-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .qf-pack-hero {
        padding: 90px 0 70px;
    }
    .qf-pack-tab-nav {
        grid-template-columns: repeat(2, 1fr);
    }
    .qf-pack-checklist-grid {
        grid-template-columns: 1fr;
    }
    .qf-pack-calc-card {
        padding: 40px 24px;
    }
    .qf-pack-panel-specs {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 540px) {
    .qf-pack-stats-grid {
        grid-template-columns: 1fr;
    }
    .qf-pack-stat {
        border-right: none;
        border-bottom: 1px solid #EBF5E9;
        padding-bottom: 20px;
    }
    .qf-pack-stat:last-child {
        border-bottom: none;
    }
    .qf-pack-tab-nav {
        grid-template-columns: 1fr;
    }
    .qf-pack-defense-grid {
        grid-template-columns: 1fr;
    }
    .qf-pack-cta-card {
        padding: 44px 20px;
    }
}


/* ==========================================================================
   CUSTOM FIBC PAGE DESIGN & INTERACTION DYNAMICS
   ========================================================================== */

.qf-cf-page {
    overflow-x: hidden;
    background-color: #FFFFFF;
    color: var(--ink);
}

/* 1. HERO SECTION */
.qf-cf-hero {
    position: relative;
    padding: 110px 0 130px;
    background: linear-gradient(135deg, #012C44 0%, #083c5a 60%, #004d61 100%);
    color: #FFFFFF;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 46px), 0 100%);
    overflow: hidden;
}

.qf-cf-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.qf-cf-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.16;
    filter: brightness(0.9) contrast(1.2);
    transform: scale(1);
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-cf-hero:hover .qf-cf-hero-bg img {
    transform: scale(1.03);
}

.qf-cf-hero-grid {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
    align-items: center;
}

.qf-cf-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    margin-bottom: 24px;
    backdrop-filter: blur(8px);
}

.qf-cf-hero-badge .qf-badge-dot {
    width: 8px;
    height: 8px;
    background: var(--signal);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(212, 255, 0, 0.8);
    animation: qfPulse 2s infinite;
}

.qf-cf-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.3rem, 4.2vw, 3.8rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.04em;
    color: #FFFFFF;
    margin: 0 0 22px;
}

.qf-cf-hero-title span {
    color: var(--signal);
}

.qf-cf-hero-lead {
    font-size: clamp(1.05rem, 1.35vw, 1.2rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.88);
    margin: 0 0 34px;
    max-width: 660px;
}

.qf-cf-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 36px;
}

.qf-cf-hero-actions .qf-btn--primary {
    background: var(--signal);
    color: #012C44;
    font-weight: 800;
    border: 2px solid var(--signal);
    box-shadow: 0 4px 18px rgba(212, 255, 0, 0.35);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-cf-hero-actions .qf-btn--primary:hover {
    background: #FFFFFF;
    color: #012C44;
    border-color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 0 24px rgba(255, 255, 255, 0.6), 0 8px 24px rgba(0, 0, 0, 0.2);
}

.qf-cf-hero-actions .qf-btn--outline {
    background: #FFFFFF;
    color: #012C44;
    font-weight: 800;
    border: 2px solid #FFFFFF;
    box-shadow: 0 4px 18px rgba(1, 44, 68, 0.28);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-cf-hero-actions .qf-btn--outline:hover {
    background: #00B9BC;
    color: #012C44;
    border-color: #00B9BC;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 185, 188, 0.35);
}

.qf-cf-hero-actions .qf-btn--outline:focus-visible {
    outline: 3px solid #00B9BC;
    outline-offset: 3px;
}

.qf-cf-hero-chips {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.qf-cf-hero-chips li {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82);
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 5px 12px;
    border-radius: 6px;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.qf-cf-hero-chips li:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--signal);
    color: #FFFFFF;
}

.qf-cf-hero-chips li::before {
    content: "✓";
    color: var(--signal);
    font-weight: 800;
}

/* Hero Visual Card */
.qf-cf-hero-visual {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: #012C44;
}

.qf-cf-hero-visual img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-cf-hero-visual:hover img {
    transform: scale(1.04);
}

.qf-cf-hero-float-card {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: rgba(1, 44, 68, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    animation: qfFadeInUp 0.8s ease 0.3s both;
}

.qf-cf-float-item {
    display: flex;
    flex-direction: column;
}

.qf-cf-float-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 600;
}

.qf-cf-float-val {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--signal);
}

.qf-cf-float-divider {
    width: 1px;
    height: 36px;
    background: rgba(255, 255, 255, 0.15);
}

/* 2. STATS STRIP */
.qf-cf-stats-sec {
    background: #FFFFFF;
    padding: 48px 0;
    border-bottom: 1px solid var(--mist);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.qf-cf-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.qf-cf-stat {
    padding: 16px 20px;
    border-left: 3px solid var(--mist);
    transition: all 0.35s ease;
}

.qf-cf-stat:hover {
    border-left-color: var(--deep);
    transform: translateX(4px);
}

.qf-cf-stat-val {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--font-display);
    color: var(--brand);
    margin-bottom: 6px;
}

.qf-cf-stat-val .qf-cf-counter {
    font-size: clamp(2.2rem, 3.2vw, 2.9rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
}

.qf-cf-stat-val .qf-stat-unit,
.qf-cf-stat-val .qf-stat-plus {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--deep);
}

.qf-cf-stat-label {
    display: block;
    font-family: var(--font-display);
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 4px;
}

.qf-cf-stat-sub {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--slate);
}

/* 3. WHEN CUSTOMIZATION IS NEEDED (REASONS / TRIGGERS) */
.qf-cf-reasons-sec {
    background-color: var(--soft);
    padding: 100px 0;
}

.qf-section-head-split {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: flex-end;
    margin-bottom: 56px;
}

.qf-cf-reasons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.qf-cf-reason-card {
    background: #FFFFFF;
    border: 1px solid var(--mist);
    border-radius: 16px;
    padding: 32px 28px;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}

.qf-cf-reason-card:hover {
    transform: translateY(-6px);
    border-color: var(--deep);
    box-shadow: 0 18px 40px rgba(0, 185, 188, 0.12);
}

.qf-cf-reason-icon {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background: rgba(0, 185, 188, 0.1);
    color: var(--deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 22px;
    transition: all 0.3s ease;
}

.qf-cf-reason-card:hover .qf-cf-reason-icon {
    background: var(--deep);
    color: #FFFFFF;
    transform: scale(1.08) rotate(3deg);
}

.qf-cf-reason-title {
    font-family: var(--font-display);
    font-size: 1.22rem;
    font-weight: 700;
    color: var(--brand);
    margin: 0 0 12px;
}

.qf-cf-reason-desc {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--slate);
    margin: 0 0 18px;
    flex-grow: 1;
}

.qf-cf-reason-tags {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-top: 1px dashed var(--mist);
    padding-top: 14px;
}

.qf-cf-reason-tags li {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--olive);
    background: var(--pale);
    padding: 3px 10px;
    border-radius: 4px;
}

/* 4. SIX CUSTOMIZATION DIMENSIONS (INTERACTIVE TABS) */
.qf-cf-dimensions-sec {
    background-color: #FFFFFF;
    padding: 104px 0;
}

.qf-cf-dim-tabs {
    margin-top: 48px;
    border: 1px solid var(--mist);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 42px rgba(0, 0, 0, 0.05);
    background: #FFFFFF;
}

.qf-cf-dim-nav {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    background: #55C83A;
    border-bottom: 1px solid rgba(1, 44, 68, 0.22);
}

.qf-cf-dim-nav-btn {
    appearance: none;
    border: none;
    background: #55C83A;
    padding: 20px 14px;
    text-align: center;
    cursor: pointer;
    border-right: 1px solid rgba(1, 44, 68, 0.15);
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.qf-cf-dim-nav-btn:last-child {
    border-right: none;
}

.qf-cf-dim-nav-num {
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 800;
    color: #012C44;
    background: rgba(255, 255, 255, 0.72);
    padding: 2px 8px;
    border-radius: 999px;
    transition: all 0.25s ease;
}

.qf-cf-dim-nav-text {
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 700;
    color: #012C44;
    line-height: 1.3;
}

.qf-cf-dim-nav-btn:hover {
    background: #67D031;
}

.qf-cf-dim-nav-btn:hover .qf-cf-dim-nav-text {
    color: #012C44;
}

.qf-cf-dim-nav-btn:hover .qf-cf-dim-nav-num {
    background: #FFFFFF;
}

.qf-cf-dim-nav-btn.is-active {
    background: #55C83A;
    box-shadow: inset 0 -4px 0 #012C44;
}

.qf-cf-dim-nav-btn.is-active .qf-cf-dim-nav-num {
    background: #012C44;
    color: #FFFFFF;
}

.qf-cf-dim-nav-btn.is-active .qf-cf-dim-nav-text {
    color: #012C44;
    font-weight: 800;
}

.qf-cf-dim-nav-btn:focus-visible {
    outline: 3px solid #012C44;
    outline-offset: -3px;
}

.qf-cf-dim-content {
    padding: 44px 48px;
}

.qf-cf-dim-panel {
    display: none;
    animation: qfFadeInUp 0.4s ease both;
}

.qf-cf-dim-panel.is-active {
    display: block;
}

.qf-cf-panel-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 44px;
    align-items: center;
}

.qf-cf-panel-body .qf-cf-panel-tag {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--deep);
    margin-bottom: 12px;
}

.qf-cf-panel-body h3 {
    font-family: var(--font-display);
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--brand);
    margin: 0 0 14px;
}

.qf-cf-panel-body p {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--slate);
    margin: 0 0 24px;
}

.qf-cf-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.qf-cf-opt-item {
    background: var(--soft);
    border: 1px solid var(--mist);
    border-radius: 10px;
    padding: 14px 18px;
    transition: all 0.25s ease;
}

.qf-cf-opt-item:hover {
    border-color: var(--deep);
    background: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 185, 188, 0.08);
}

.qf-cf-opt-item strong {
    display: block;
    font-size: 0.92rem;
    color: var(--brand);
    margin-bottom: 4px;
}

.qf-cf-opt-item span {
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--slate);
    display: block;
}

.qf-cf-panel-media {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
    border: 1px solid var(--mist);
}

.qf-cf-panel-media img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.qf-cf-panel-media:hover img {
    transform: scale(1.03);
}

.qf-cf-media-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 18px;
    background: rgba(1, 44, 68, 0.88);
    color: #FFFFFF;
    font-size: 0.8rem;
    font-weight: 600;
    backdrop-filter: blur(6px);
}

/* 5. INTERACTIVE SCENARIOS (MATERIAL & RISK MATRIX) */
.qf-cf-scenarios-sec {
    background: linear-gradient(180deg, #FFFFFF 0%, var(--pale) 100%);
    padding: 100px 0;
}

.qf-cf-scenario-grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 40px;
    margin-top: 48px;
    align-items: stretch;
}

.qf-cf-scenario-nav {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.qf-cf-scenario-card {
    background: #FFFFFF;
    border: 2px solid var(--mist);
    border-radius: 14px;
    padding: 20px 24px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
}

.qf-cf-scenario-card:hover {
    border-color: var(--deep);
    transform: translateX(6px);
    box-shadow: 0 8px 24px rgba(0, 185, 188, 0.12);
}

.qf-cf-scenario-card.is-active {
    border-color: var(--brand);
    background: #F4F8FA;
    box-shadow: 0 10px 30px rgba(1, 44, 68, 0.1);
}

.qf-cf-scenario-card.is-active::after {
    content: "";
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 10px solid var(--brand);
}

.qf-cf-scenario-badge {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.qf-cf-scenario-card.is-active .qf-cf-scenario-badge {
    background: var(--brand);
    color: var(--signal);
}

.qf-cf-scenario-info {
    flex-grow: 1;
}

.qf-cf-scenario-info h4 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 4px;
}

.qf-cf-scenario-info p {
    font-size: 0.82rem;
    color: var(--slate);
    margin: 0;
}

.qf-cf-scenario-display {
    background: #FFFFFF;
    border: 1px solid var(--mist);
    border-radius: 18px;
    padding: 36px;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
}

.qf-cf-scenario-display-media {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
    background: #F0F4F4;
    border: 1px solid var(--mist);
}

.qf-cf-scenario-display-media img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
    transition: all 0.35s ease;
}

.qf-cf-scenario-sol-h {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--brand);
    margin: 0 0 10px;
}

.qf-cf-scenario-sol-p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--slate);
    margin: 0 0 20px;
}

.qf-cf-scenario-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.qf-cf-scenario-features li {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 10px;
}

.qf-cf-check-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 185, 188, 0.15);
    color: var(--deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.76rem;
    font-weight: 800;
    flex-shrink: 0;
}

/* The scenario panel's "Request Quote For This Scenario" CTA is inverted for this
   one button at the owner's request: lake-teal #00B9BC at rest and deep navy #012C44
   on hover, the reverse of the shared .qf-btn--primary. The label is white with the
   owner's explicit choice, kept at its 800 weight for weight against the light fill.
   Scoped to this card, so every other primary button is untouched. */
.qf-cf-scenario-display .qf-btn--primary {
    background-color: var(--deep);
    color: #FFFFFF;
}

.qf-cf-scenario-display .qf-btn--primary:hover,
.qf-cf-scenario-display .qf-btn--primary:focus-visible {
    background-color: var(--brand);
    color: #FFFFFF;
}

/* 6. VERIFICATION & PROTOCOL (STRICT INDUSTRIAL RIGOR) */
.qf-cf-protocol-sec {
    background-color: #FFFFFF;
    padding: 104px 0;
}

.qf-cf-steps-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-top: 50px;
    position: relative;
}

.qf-cf-step-card {
    background: var(--soft);
    border: 1px solid var(--mist);
    border-radius: 14px;
    padding: 28px 20px;
    position: relative;
    transition: all 0.35s ease;
    display: flex;
    flex-direction: column;
}

.qf-cf-step-card:hover {
    background: #FFFFFF;
    border-color: var(--deep);
    transform: translateY(-6px);
    box-shadow: 0 14px 34px rgba(0, 185, 188, 0.12);
}

/* The five stage numerals 01-05 are Brand Green #55C83A at the owner's request,
   where they were a 30% lake-teal tint. Hover keeps the numeral in the brand
   green family, stepping to the #3CA822 shade the theme already pairs with it. */
.qf-cf-step-num {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 800;
    color: #55C83A;
    line-height: 1;
    margin-bottom: 16px;
    transition: all 0.3s ease;
}

.qf-cf-step-card:hover .qf-cf-step-num {
    color: #3CA822;
    transform: scale(1.1);
}

.qf-cf-step-card h4 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--brand);
    margin: 0 0 10px;
}

.qf-cf-step-card p {
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--slate);
    margin: 0 0 16px;
    flex-grow: 1;
}

.qf-cf-step-badge {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--olive);
    background: var(--pale);
    padding: 4px 10px;
    border-radius: 4px;
    align-self: flex-start;
}

/* 7. QUICK ESTIMATOR / CONFIGURATOR WIDGET */
.qf-cf-estimator-sec {
    background-color: var(--soft);
    padding: 100px 0;
}

.qf-cf-estimator-box {
    background: #FFFFFF;
    border: 1px solid var(--mist);
    border-radius: 20px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.qf-cf-calc-form {
    padding: 48px;
    border-right: 1px solid var(--mist);
}

.qf-cf-calc-head {
    margin-bottom: 32px;
}

.qf-cf-calc-head h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--brand);
    margin: 0 0 8px;
}

.qf-cf-calc-head p {
    font-size: 0.9rem;
    color: var(--slate);
    margin: 0;
}

.qf-cf-field-group {
    margin-bottom: 24px;
}

.qf-cf-field-group label {
    display: block;
    font-family: var(--font-display);
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 8px;
}

.qf-cf-select {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--mist);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--ink);
    background-color: #FFFFFF;
    transition: all 0.25s ease;
}

.qf-cf-select:focus {
    outline: none;
    border-color: var(--deep);
    box-shadow: 0 0 0 3px rgba(0, 185, 188, 0.15);
}

.qf-cf-calc-preview {
    background: #55C83A;
    color: #012C44;
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.qf-cf-preview-head {
    margin-bottom: 28px;
}

.qf-cf-preview-head span {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #012C44;
    font-weight: 800;
}

.qf-cf-preview-head h4 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    color: #012C44;
    margin: 6px 0 0;
}

.qf-cf-spec-rows {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 36px;
}

.qf-cf-spec-row {
    background: #FFFFFF;
    border: 1px solid rgba(1, 44, 68, 0.10);
    border-radius: 10px;
    padding: 12px 18px;
    box-shadow: 0 2px 8px rgba(1, 44, 68, 0.10);
}

.qf-cf-spec-row small {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(1, 44, 68, 0.62);
    margin-bottom: 4px;
}

.qf-cf-spec-row strong {
    font-family: var(--font-display);
    font-size: 0.96rem;
    font-weight: 700;
    color: #012C44;
}

.qf-cf-calc-cta-btn {
    display: block;
    width: 100%;
    padding: 16px 24px;
    text-align: center;
    background: var(--signal);
    color: #012C44;
    font-family: var(--font-display);
    font-size: 0.96rem;
    font-weight: 800;
    text-decoration: none;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(1, 44, 68, 0.18);
    transition: all 0.3s ease;
}

.qf-cf-calc-cta-btn:hover {
    background: #FFFFFF;
    color: #012C44;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(1, 44, 68, 0.28);
}

/* 8. BOUNDARIES & WHAT CANNOT BE PROMISED */
.qf-cf-boundary-sec {
    background-color: #FFFFFF;
    padding: 100px 0;
}

.qf-cf-boundary-card {
    background: #FFFDF9;
    border: 1.5px solid #F5E8D3;
    border-radius: 18px;
    padding: 44px;
    position: relative;
    box-shadow: 0 10px 30px rgba(213, 138, 36, 0.06);
}

.qf-cf-boundary-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}

.qf-cf-boundary-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(213, 138, 36, 0.15);
    color: var(--warning);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
}

.qf-cf-boundary-head h3 {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--ink);
    margin: 0;
}

.qf-cf-boundary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.qf-cf-boundary-item {
    background: #FFFFFF;
    border: 1px solid #EFE4D6;
    border-radius: 12px;
    padding: 22px;
}

.qf-cf-boundary-item h4 {
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 700;
    color: #8C5611;
    margin: 0 0 8px;
}

.qf-cf-boundary-item p {
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--slate);
    margin: 0;
}

/* 9. CLOSING CTA BANNER */
.qf-cf-cta-sec {
    background: #55C83A;
    padding: 88px 0;
    color: #012C44;
    position: relative;
    overflow: hidden;
}

.qf-cf-cta-content {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

.qf-cf-cta-sec .qf-eyebrow--dark {
    color: #012C44;
}

.qf-cf-cta-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.8vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    margin: 0 0 18px;
}

.qf-cf-cta-sub {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #012C44;
    margin: 0 0 34px;
}

.qf-cf-cta-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
}

.qf-cf-cta-actions .qf-btn--light {
    background: #D4FF00;
    color: #012C44;
    font-weight: 800;
    border: 2px solid #D4FF00;
    padding: 14px 32px;
    box-shadow: 0 6px 20px rgba(1, 44, 68, 0.20);
    transition: all 0.3s ease;
}

.qf-cf-cta-actions .qf-btn--light:hover {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: #012C44;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(1, 44, 68, 0.28);
}

.qf-cf-cta-actions .qf-btn--ghost {
    background: #FFFFFF;
    color: #012C44;
    border: 2px solid #FFFFFF;
    padding: 14px 32px;
    transition: all 0.3s ease;
}

.qf-cf-cta-actions .qf-btn--ghost:hover {
    background: #012C44;
    color: #FFFFFF;
    border-color: #012C44;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(1, 44, 68, 0.28);
}

.qf-cf-cta-actions .qf-btn:focus-visible {
    outline: 3px solid #012C44;
    outline-offset: 3px;
}

/* RESPONSIVE BREAKPOINTS */
@media (max-width: 1024px) {
    .qf-cf-hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .qf-cf-hero-visual img {
        height: 380px;
    }
    .qf-cf-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .qf-cf-reasons-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .qf-cf-dim-nav {
        grid-template-columns: repeat(3, 1fr);
    }
    .qf-cf-panel-grid {
        grid-template-columns: 1fr;
    }
    .qf-cf-panel-media img {
        height: 300px;
    }
    .qf-cf-scenario-grid {
        grid-template-columns: 1fr;
    }
    .qf-cf-steps-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .qf-cf-estimator-box {
        grid-template-columns: 1fr;
    }
    .qf-cf-calc-form {
        border-right: none;
        border-bottom: 1px solid var(--mist);
    }
    .qf-cf-boundary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .qf-cf-hero {
        padding: 72px 0 96px;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), 0 100%);
    }
    .qf-section-head-split {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .qf-cf-stats-grid {
        grid-template-columns: 1fr;
    }
    .qf-cf-stat {
        border-left: none;
        border-bottom: 1px solid var(--mist);
        padding-bottom: 16px;
    }
    .qf-cf-reasons-grid {
        grid-template-columns: 1fr;
    }
    .qf-cf-dim-nav {
        grid-template-columns: repeat(2, 1fr);
    }
    .qf-cf-dim-content {
        padding: 24px 20px;
    }
    .qf-cf-options-grid {
        grid-template-columns: 1fr;
    }
    .qf-cf-steps-grid {
        grid-template-columns: 1fr;
    }
    .qf-cf-calc-form, .qf-cf-calc-preview {
        padding: 28px 20px;
    }
    .qf-cf-boundary-grid {
        grid-template-columns: 1fr;
    }
    .qf-cf-boundary-card {
        padding: 24px;
    }
}


/* ==========================================================================
   FIBC SELECTION GUIDE DESIGN & INTERACTIVE DYNAMICS
   ========================================================================== */

.qf-sg-page {
    overflow-x: hidden;
    background-color: #FFFFFF;
    color: var(--ink);
}

/* 1. SELECTION HERO SECTION */
.qf-sg-hero {
    position: relative;
    padding: 110px 0 130px;
    background: linear-gradient(135deg, #012C44 0%, #064057 55%, #00B9BC 120%);
    color: #FFFFFF;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 46px), 0 100%);
    overflow: hidden;
}

.qf-sg-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.qf-sg-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.15;
    filter: brightness(0.88) contrast(1.2);
    transform: scale(1);
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-sg-hero:hover .qf-sg-hero-bg img {
    transform: scale(1.03);
}

.qf-sg-hero-grid {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
    align-items: center;
}

.qf-sg-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    margin-bottom: 24px;
    backdrop-filter: blur(8px);
}

.qf-sg-hero-badge .qf-badge-dot {
    width: 8px;
    height: 8px;
    background: var(--signal);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(212, 255, 0, 0.8);
    animation: qfPulse 2s infinite;
}

.qf-sg-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.3rem, 4.2vw, 3.8rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.04em;
    color: #FFFFFF;
    margin: 0 0 22px;
}

.qf-sg-hero-title span {
    color: var(--signal);
}

.qf-sg-hero-lead {
    font-size: clamp(1.05rem, 1.35vw, 1.2rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.88);
    margin: 0 0 34px;
    max-width: 660px;
}

.qf-sg-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 36px;
}

.qf-sg-hero-actions .qf-btn--primary {
    background: var(--signal);
    color: #012C44;
    font-weight: 800;
    border: 2px solid var(--signal);
    box-shadow: 0 4px 18px rgba(212, 255, 0, 0.35);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-sg-hero-actions .qf-btn--primary:hover {
    background: #FFFFFF;
    color: #012C44;
    border-color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 0 24px rgba(255, 255, 255, 0.6), 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* "Compare Structures" is a solid white button at the owner's request, turning
   Brand Green #55C83A on hover and keyboard focus. The label stays deep navy
   #012C44: navy on #55C83A is about 6.6:1 where white would be about 2.2:1. */
.qf-sg-hero-actions .qf-btn--outline {
    background: #FFFFFF;
    color: #012C44;
    border: 2px solid #FFFFFF;
    font-weight: 700;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-sg-hero-actions .qf-btn--outline:hover,
.qf-sg-hero-actions .qf-btn--outline:focus-visible {
    background: #55C83A;
    color: #012C44;
    border-color: #55C83A;
    transform: translateY(-2px);
}

.qf-sg-hero-chips {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.qf-sg-hero-chips li {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82);
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 5px 12px;
    border-radius: 6px;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.qf-sg-hero-chips li:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--signal);
    color: #FFFFFF;
}

.qf-sg-hero-chips li::before {
    content: "✓";
    color: var(--signal);
    font-weight: 800;
}

/* Hero Visual Spec Decision Card */
.qf-sg-hero-visual {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: #012C44;
}

.qf-sg-hero-visual img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-sg-hero-visual:hover img {
    transform: scale(1.04);
}

.qf-sg-hero-float-card {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: rgba(1, 44, 68, 0.88);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    animation: qfFadeInUp 0.8s ease 0.3s both;
}

.qf-sg-float-item {
    display: flex;
    flex-direction: column;
}

.qf-sg-float-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 600;
}

.qf-sg-float-val {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--signal);
}

.qf-sg-float-divider {
    width: 1px;
    height: 36px;
    background: rgba(255, 255, 255, 0.15);
}

/* 2. STATS OVERVIEW STRIP */
.qf-sg-stats-sec {
    background: #FFFFFF;
    padding: 48px 0;
    border-bottom: 1px solid var(--mist);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.qf-sg-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.qf-sg-stat {
    padding: 16px 20px;
    border-left: 3px solid var(--mist);
    transition: all 0.35s ease;
}

.qf-sg-stat:hover {
    border-left-color: var(--deep);
    transform: translateX(4px);
}

.qf-sg-stat-val {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--font-display);
    color: var(--brand);
    margin-bottom: 6px;
}

.qf-sg-stat-val .qf-sg-counter {
    font-size: clamp(2.2rem, 3.2vw, 2.9rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
}

.qf-sg-stat-val .qf-stat-unit,
.qf-sg-stat-val .qf-stat-plus {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--deep);
}

.qf-sg-stat-label {
    display: block;
    font-family: var(--font-display);
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 4px;
}

.qf-sg-stat-sub {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--slate);
}

/* 3. INTERACTIVE 4-STAGE SELECTION WIZARD */
.qf-sg-wizard-sec {
    background-color: var(--soft);
    padding: 104px 0;
}

.qf-sg-wizard-box {
    margin-top: 48px;
    background: #FFFFFF;
    border: 1px solid var(--mist);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.05);
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
}

.qf-sg-wizard-flow {
    padding: 44px;
    border-right: 1px solid var(--mist);
}

.qf-sg-step-block {
    margin-bottom: 34px;
}

.qf-sg-step-block:last-child {
    margin-bottom: 0;
}

.qf-sg-step-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.qf-sg-step-badge {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--signal);
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qf-sg-step-header h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--brand);
    margin: 0;
}

.qf-sg-options-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.qf-sg-wiz-option {
    background: var(--soft);
    border: 2px solid var(--mist);
    border-radius: 10px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: left;
    display: flex;
    flex-direction: column;
}

.qf-sg-wiz-option:hover {
    border-color: var(--deep);
    background: #FFFFFF;
    transform: translateY(-2px);
}

.qf-sg-wiz-option.is-selected {
    border-color: var(--brand);
    background: #F2F8FA;
    box-shadow: 0 4px 14px rgba(1, 44, 68, 0.1);
}

.qf-sg-wiz-option strong {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--brand);
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.qf-sg-wiz-option.is-selected strong::after {
    content: "✓";
    color: var(--deep);
    font-weight: 800;
}

.qf-sg-wiz-option span {
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--slate);
}

/* Wizard Live Blueprint Recommendation Card
   Panel background: Brand Green #55C83A; five spec boxes: pure white.
   Labels and values are deep navy #012C44 -- navy on #55C83A is about 6.6:1,
   while white on the same green is only about 2.2:1. */
.qf-sg-wizard-summary {
    background: #55C83A;
    color: #012C44;
    padding: 44px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.qf-sg-summary-head span {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #012C44;
    font-weight: 800;
    display: block;
    margin-bottom: 6px;
}

.qf-sg-summary-head h4 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    color: #012C44;
    margin: 0 0 24px;
}

.qf-sg-recom-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 32px;
}

.qf-sg-recom-item {
    background: #FFFFFF;
    border: 1px solid rgba(1, 44, 68, 0.10);
    border-radius: 10px;
    padding: 14px 18px;
    box-shadow: 0 2px 8px rgba(1, 44, 68, 0.10);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-sg-recom-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(1, 44, 68, 0.18);
}

.qf-sg-recom-item small {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(1, 44, 68, 0.62);
    margin-bottom: 4px;
}

.qf-sg-recom-item strong {
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 700;
    color: #012C44;
}

.qf-sg-wiz-cta {
    display: block;
    width: 100%;
    padding: 16px 20px;
    text-align: center;
    background: var(--signal);
    color: #012C44;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 800;
    text-decoration: none;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(1, 44, 68, 0.18);
    transition: all 0.3s ease;
}

.qf-sg-wiz-cta:hover {
    background: #FFFFFF;
    color: #012C44;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(1, 44, 68, 0.28);
}

/* 4. STRUCTURAL COMPARISON: TUBULAR vs U-PANEL vs 4-PANEL vs BAFFLE */
.qf-sg-structures-sec {
    background-color: #FFFFFF;
    padding: 104px 0;
}

.qf-sg-struct-tabs {
    margin-top: 48px;
    border: 1px solid var(--mist);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 42px rgba(0, 0, 0, 0.05);
}

/* Four structure tabs: Brand Green band #55C83A.
   Every label is deep navy #012C44 -- navy on #55C83A is about 6.6:1, while
   white on the same green is only about 2.2:1. The selected tab is marked by a
   navy underline plus an inverted navy "Type" chip. */
.qf-sg-struct-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #55C83A;
    border-bottom: 1px solid rgba(1, 44, 68, 0.22);
}

.qf-sg-struct-tab-btn {
    appearance: none;
    border: none;
    background: #55C83A;
    padding: 22px 18px;
    cursor: pointer;
    border-right: 1px solid rgba(1, 44, 68, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: all 0.25s ease;
}

.qf-sg-struct-tab-btn:last-child {
    border-right: none;
}

.qf-sg-struct-tab-btn .qf-struct-tag {
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 800;
    color: #012C44;
    background: rgba(255, 255, 255, 0.72);
    padding: 2px 8px;
    border-radius: 999px;
    transition: all 0.25s ease;
}

.qf-sg-struct-tab-btn .qf-struct-title {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: #012C44;
}

.qf-sg-struct-tab-btn:hover {
    background: #67D031;
}

.qf-sg-struct-tab-btn:hover .qf-struct-tag {
    background: #FFFFFF;
}

.qf-sg-struct-tab-btn:hover .qf-struct-title {
    color: #012C44;
}

.qf-sg-struct-tab-btn.is-active {
    background: #55C83A;
    box-shadow: inset 0 -4px 0 #012C44;
}

.qf-sg-struct-tab-btn.is-active .qf-struct-tag {
    background: #012C44;
    color: #FFFFFF;
}

.qf-sg-struct-tab-btn.is-active .qf-struct-title {
    color: #012C44;
    font-weight: 800;
}

.qf-sg-struct-content {
    padding: 44px 48px;
}

.qf-sg-struct-panel {
    display: none;
    animation: qfFadeInUp 0.4s ease both;
}

.qf-sg-struct-panel.is-active {
    display: block;
}

.qf-sg-struct-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
    align-items: center;
}

.qf-sg-struct-info h3 {
    font-family: var(--font-display);
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--brand);
    margin: 0 0 12px;
}

.qf-sg-struct-info p {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--slate);
    margin: 0 0 24px;
}

.qf-sg-struct-proscons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 28px;
}

.qf-sg-pro-box {
    background: var(--pale);
    border: 1px solid #D9EDD4;
    border-radius: 12px;
    padding: 16px 20px;
}

.qf-sg-pro-box h4 {
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--olive);
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.qf-sg-pro-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--ink);
}

.qf-sg-pro-box li::before {
    content: "•";
    color: var(--olive);
    margin-right: 6px;
    font-weight: bold;
}

.qf-sg-con-box {
    background: #FFF9F3;
    border: 1px solid #F5E5D5;
    border-radius: 12px;
    padding: 16px 20px;
}

.qf-sg-con-box h4 {
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 800;
    color: #9C5815;
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.qf-sg-con-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--ink);
}

.qf-sg-con-box li::before {
    content: "•";
    color: #9C5815;
    margin-right: 6px;
    font-weight: bold;
}

.qf-sg-struct-media {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
    border: 1px solid var(--mist);
}

.qf-sg-struct-media img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.qf-sg-struct-media:hover img {
    transform: scale(1.03);
}

/* 5. TOP, BOTTOM & LIFTING CONFIGURATIONS MATRIX */
.qf-sg-components-sec {
    background-color: var(--soft);
    padding: 100px 0;
}

.qf-sg-comp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 48px;
}

.qf-sg-comp-card {
    background: #FFFFFF;
    border: 1px solid var(--mist);
    border-radius: 16px;
    padding: 32px 26px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
    transition: all 0.35s ease;
    display: flex;
    flex-direction: column;
}

.qf-sg-comp-card:hover {
    transform: translateY(-6px);
    border-color: var(--deep);
    box-shadow: 0 18px 40px rgba(0, 185, 188, 0.12);
}

.qf-sg-comp-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: rgba(0, 185, 188, 0.1);
    color: var(--deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 20px;
}

.qf-sg-comp-card h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--brand);
    margin: 0 0 10px;
}

.qf-sg-comp-card p {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--slate);
    margin: 0 0 20px;
    flex-grow: 1;
}

.qf-sg-comp-types {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px dashed var(--mist);
    padding-top: 16px;
}

.qf-sg-comp-types li {
    font-size: 0.82rem;
    color: var(--ink);
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.qf-sg-comp-types li strong {
    color: var(--brand);
    min-width: 90px;
}

/* 6. COATED vs UNCOATED vs LINER COMPARISON */
.qf-sg-barrier-sec {
    background-color: #FFFFFF;
    padding: 100px 0;
}

.qf-sg-barrier-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 48px;
}

.qf-sg-barrier-card {
    background: var(--soft);
    border: 1.5px solid var(--mist);
    border-radius: 16px;
    padding: 32px 26px;
    transition: all 0.35s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.qf-sg-barrier-card:hover {
    background: #FFFFFF;
    border-color: var(--deep);
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(0, 185, 188, 0.12);
}

.qf-sg-barrier-badge {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--deep);
    background: rgba(0, 185, 188, 0.1);
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 16px;
}

.qf-sg-barrier-card h3 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--brand);
    margin: 0 0 12px;
}

.qf-sg-barrier-card p {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--slate);
    margin: 0 0 20px;
    flex-grow: 1;
}

.qf-sg-barrier-checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qf-sg-barrier-checklist li {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 8px;
}

.qf-sg-barrier-checklist li::before {
    content: "✓";
    color: var(--olive);
    font-weight: 800;
}

.qf-sg-barrier-media {
    border-radius: 10px;
    overflow: hidden;
    margin-top: auto;
    border: 1px solid var(--mist);
}

.qf-sg-barrier-media img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

/* 7. TECHNICAL TRIAD: SWL vs SF vs GSM */
.qf-sg-triad-sec {
    background: linear-gradient(180deg, #FFFFFF 0%, var(--pale) 100%);
    padding: 100px 0;
}

.qf-sg-triad-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-top: 48px;
    align-items: center;
}

.qf-sg-triad-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.qf-sg-triad-card {
    background: #FFFFFF;
    border: 2px solid var(--mist);
    border-radius: 14px;
    padding: 22px 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.qf-sg-triad-card:hover {
    border-color: var(--deep);
    transform: translateX(6px);
}

.qf-sg-triad-card.is-active {
    border-color: var(--brand);
    background: #F4F8FA;
    box-shadow: 0 8px 24px rgba(1, 44, 68, 0.1);
}

.qf-sg-triad-card-left h4 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--brand);
    margin: 0 0 4px;
}

.qf-sg-triad-card-left span {
    font-size: 0.8rem;
    color: var(--slate);
}

.qf-sg-triad-tag {
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 6px;
    background: var(--soft);
    color: var(--deep);
}

.qf-sg-triad-card.is-active .qf-sg-triad-tag {
    background: var(--brand);
    color: var(--signal);
}

.qf-sg-triad-explainer {
    background: #FFFFFF;
    border: 1px solid var(--mist);
    border-radius: 18px;
    padding: 40px;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.06);
}

.qf-sg-triad-explainer h3 {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--brand);
    margin: 0 0 16px;
}

.qf-sg-triad-explainer p {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--slate);
    margin: 0 0 24px;
}

.qf-sg-triad-truth-box {
    background: var(--pale);
    border-left: 4px solid var(--deep);
    border-radius: 8px;
    padding: 16px 20px;
}

.qf-sg-triad-truth-box strong {
    display: block;
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--olive);
    margin-bottom: 6px;
}

.qf-sg-triad-truth-box p {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--ink);
    margin: 0;
}

/* 8. COMPLIANCE & RISK MATRIX (UV, Static, UN, Moisture, Sift-Proof) */
.qf-sg-risk-sec {
    background-color: #FFFFFF;
    padding: 104px 0;
}

.qf-sg-risk-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 36px 0 32px;
}

/* Compliance matrix filter chips: Brand Green fill with deep navy labels
   (~6.6:1). The selected chip keeps the inverted navy fill + white label so the
   active filter stays obvious against its green siblings. */
.qf-sg-risk-filter-btn {
    appearance: none;
    border: 1px solid rgba(1, 44, 68, 0.12);
    background: #55C83A;
    padding: 8px 18px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 0.84rem;
    font-weight: 700;
    color: #012C44;
    cursor: pointer;
    transition: all 0.25s ease;
}

.qf-sg-risk-filter-btn:hover {
    border-color: rgba(1, 44, 68, 0.2);
    background: #67D031;
    color: #012C44;
    transform: translateY(-1px);
}

.qf-sg-risk-filter-btn.is-active {
    background: var(--brand);
    border-color: var(--brand);
    color: #FFFFFF;
}

.qf-sg-risk-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.qf-sg-risk-card {
    background: #FFFFFF;
    border: 1.5px solid var(--mist);
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.qf-sg-risk-card:hover {
    border-color: var(--deep);
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(0, 185, 188, 0.12);
}

.qf-sg-risk-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
}

.qf-sg-risk-head h4 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--brand);
    margin: 0;
}

.qf-sg-risk-tag {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(0, 185, 188, 0.12);
    color: var(--deep);
}

.qf-sg-risk-card p {
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--slate);
    margin: 0 0 18px;
    flex-grow: 1;
}

.qf-sg-risk-solution {
    border-top: 1px dashed var(--mist);
    padding-top: 14px;
}

.qf-sg-risk-solution small {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--olive);
    font-weight: 800;
    margin-bottom: 4px;
}

.qf-sg-risk-solution span {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.4;
    display: block;
}

/* 9. CRITICAL POST-SELECTION CONFIRMATION CHECKLIST */
.qf-sg-checklist-sec {
    background-color: var(--soft);
    padding: 100px 0;
}

.qf-sg-check-box {
    background: #FFFFFF;
    border: 1px solid var(--mist);
    border-radius: 20px;
    padding: 48px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.05);
}

.qf-sg-check-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 36px;
}

.qf-sg-check-col h4 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--brand);
    margin: 0 0 16px;
    border-bottom: 2px solid var(--mist);
    padding-bottom: 10px;
}

.qf-sg-check-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.qf-sg-check-items li {
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--ink);
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.qf-sg-check-items li::before {
    content: "➔";
    color: var(--deep);
    font-weight: 800;
    flex-shrink: 0;
    margin-top: 1px;
}

/* 10. CLOSING ACTION CTA BANNER
   Band background is Brand Green #55C83A. The title stays pure white as asked;
   every other piece of copy (eyebrow + description) is deep navy #012C44, which
   is about 6.6:1 on this green. Buttons: lime "Request Engineering Quote" and
   white "Explore Custom FIBC", both hovering to white / navy respectively. */
.qf-sg-cta-sec {
    background: #55C83A;
    padding: 88px 0;
    color: #012C44;
    position: relative;
    overflow: hidden;
}

.qf-sg-cta-sec .qf-eyebrow--dark {
    color: #012C44;
}

.qf-sg-cta-content {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

.qf-sg-cta-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.8vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    margin: 0 0 18px;
}

.qf-sg-cta-sub {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #012C44;
    margin: 0 0 34px;
}

.qf-sg-cta-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
}

.qf-sg-cta-actions .qf-btn--light {
    background: #D4FF00;
    color: #012C44;
    font-weight: 800;
    border: 2px solid #D4FF00;
    padding: 14px 32px;
    box-shadow: 0 6px 20px rgba(1, 44, 68, 0.18);
    transition: all 0.3s ease;
}

.qf-sg-cta-actions .qf-btn--light:hover {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: #012C44;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(1, 44, 68, 0.28);
}

.qf-sg-cta-actions .qf-btn--ghost {
    background: #FFFFFF;
    color: #012C44;
    border: 2px solid #FFFFFF;
    font-weight: 800;
    padding: 14px 32px;
    box-shadow: 0 6px 20px rgba(1, 44, 68, 0.14);
    backdrop-filter: blur(4px);
    transition: all 0.3s ease;
}

.qf-sg-cta-actions .qf-btn--ghost:hover {
    background: #012C44;
    color: #FFFFFF;
    border-color: #012C44;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(1, 44, 68, 0.32);
}

/* RESPONSIVE BREAKPOINTS */
@media (max-width: 1024px) {
    .qf-sg-hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .qf-sg-hero-visual img {
        height: 380px;
    }
    .qf-sg-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .qf-sg-wizard-box {
        grid-template-columns: 1fr;
    }
    .qf-sg-wizard-flow {
        border-right: none;
        border-bottom: 1px solid var(--mist);
    }
    .qf-sg-struct-nav {
        grid-template-columns: repeat(2, 1fr);
    }
    .qf-sg-struct-grid {
        grid-template-columns: 1fr;
    }
    .qf-sg-comp-grid {
        grid-template-columns: 1fr;
    }
    .qf-sg-barrier-grid {
        grid-template-columns: 1fr;
    }
    .qf-sg-triad-layout {
        grid-template-columns: 1fr;
    }
    .qf-sg-risk-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .qf-sg-check-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .qf-sg-hero {
        padding: 72px 0 96px;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), 0 100%);
    }
    .qf-sg-stats-grid {
        grid-template-columns: 1fr;
    }
    .qf-sg-stat {
        border-left: none;
        border-bottom: 1px solid var(--mist);
        padding-bottom: 16px;
    }
    .qf-sg-options-group {
        grid-template-columns: 1fr;
    }
    .qf-sg-wizard-flow, .qf-sg-wizard-summary {
        padding: 28px 20px;
    }
    .qf-sg-struct-content {
        padding: 24px 20px;
    }
    .qf-sg-struct-proscons {
        grid-template-columns: 1fr;
    }
    .qf-sg-risk-grid {
        grid-template-columns: 1fr;
    }
    .qf-sg-check-box {
        padding: 28px 20px;
    }
}
\n
/* ==========================================================================
   QUALITY CONTROL PAGE STYLING & ANIMATIONS
   ========================================================================== */

.qf-qc-page {
    overflow-x: hidden;
    background-color: #FFFFFF;
    color: var(--ink);
}

/* 1. HERO SECTION */
.qf-qc-hero {
    position: relative;
    padding: 110px 0 130px;
    background: linear-gradient(135deg, #012C44 0%, #083c5a 55%, #0D4B3E 100%);
    color: #FFFFFF;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 46px), 0 100%);
    overflow: hidden;
}

.qf-qc-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.qf-qc-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.16;
    filter: brightness(0.9) contrast(1.2);
    transform: scale(1);
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-qc-hero:hover .qf-qc-hero-bg img {
    transform: scale(1.03);
}

.qf-qc-hero-grid {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
    align-items: center;
}

.qf-qc-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    margin-bottom: 24px;
    backdrop-filter: blur(8px);
}

.qf-qc-hero-badge .qf-badge-dot {
    width: 8px;
    height: 8px;
    background: #67D031;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(103, 208, 49, 0.8);
    animation: qfPulse 2s infinite;
}

.qf-qc-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 4.4vw, 3.8rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.04em;
    color: #FFFFFF;
    margin: 0 0 24px;
}

.qf-qc-hero-title span {
    color: #D4FF00;
}

.qf-qc-hero-lead {
    font-size: clamp(1.05rem, 1.4vw, 1.22rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.84);
    margin: 0 0 36px;
    max-width: 840px;
}

.qf-qc-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 40px;
}

/* Hero CTAs: "Request Quality Information" is Signal Lime with a navy label
   (lime + navy ~13:1) that flips to pure white on hover; "Explore 8 Inspection
   Gates" is pure white with a navy label that flips to Brand Green on hover.
   Both labels stay navy, the site convention for lime/green and white
   surfaces. */
.qf-qc-hero-actions .qf-btn--primary {
    background: #D4FF00;
    color: #012C44;
    font-weight: 800;
    border: 2px solid #D4FF00;
    padding: 14px 28px;
    box-shadow: 0 8px 24px rgba(212, 255, 0, 0.28);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-qc-hero-actions .qf-btn--primary:hover,
.qf-qc-hero-actions .qf-btn--primary:focus-visible {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: #012C44;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(255, 255, 255, 0.28);
}

.qf-qc-hero-actions .qf-btn--outline {
    background: #FFFFFF;
    color: #012C44;
    border: 2px solid #FFFFFF;
    padding: 14px 28px;
    font-weight: 700;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-qc-hero-actions .qf-btn--outline:hover,
.qf-qc-hero-actions .qf-btn--outline:focus-visible {
    background: #55C83A;
    color: #012C44;
    border-color: #55C83A;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(85, 200, 58, 0.35);
}

.qf-qc-hero-chips {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
}

.qf-qc-hero-chips li {
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    gap: 8px;
}

.qf-qc-hero-chips li .qf-chip-icon {
    color: #55C83A;
    font-weight: 800;
}

/* Hero Visual Spec Decision Card */
.qf-qc-hero-visual {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: #012C44;
}

.qf-qc-hero-visual img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-qc-hero-visual:hover img {
    transform: scale(1.04);
}

.qf-qc-hero-float-card {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: rgba(1, 44, 68, 0.9);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    animation: qfFadeInUp 0.8s ease 0.3s both;
}

.qf-qc-float-item {
    display: flex;
    flex-direction: column;
}

.qf-qc-float-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    margin-bottom: 2px;
}

.qf-qc-float-val {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    color: #67D031;
}

.qf-qc-float-divider {
    width: 1px;
    height: 38px;
    background: rgba(255, 255, 255, 0.15);
}

/* 2. STATS STRIP */
.qf-qc-stats {
    background: #FFFFFF;
    border-bottom: 1px solid #D6E8D5;
    padding: 44px 0;
    position: relative;
    z-index: 5;
}

.qf-qc-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.qf-qc-stat {
    border-left: 3px solid #55C83A;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
}

.qf-qc-stat-val {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 3.2vw, 3rem);
    font-weight: 800;
    color: #012C44;
    line-height: 1;
    margin-bottom: 8px;
}

.qf-qc-counter {
    color: #012C44;
}

.qf-qc-stat .qf-stat-unit,
.qf-qc-stat .qf-stat-plus {
    font-size: 1.3rem;
    font-weight: 800;
    color: #55C83A;
}

.qf-qc-stat-label {
    font-weight: 700;
    font-size: 0.98rem;
    color: #012C44;
    margin-bottom: 6px;
}

.qf-qc-stat-desc {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #6C7A77;
    margin: 0;
}
\n
/* 3. EIGHT QUALITY INSPECTION GATES SECTION */
.qf-qc-gates-sec {
    padding: 100px 0;
    background: #F4F8F4;
}

.qf-qc-gate-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 40px 0 32px;
}

/* The eight gate cards are this page's control strip, so they carry the site's
   green tab-strip convention: Brand Green #55C83A surfaces with navy labels
   (white or lime type on this green sits at about 2:1) and navy 15% hairlines.
   The gate the visitor clicked open turns white #FFFFFF with a Brand Green rim
   and a Brand Green number tile, at the owner's request; navy labels on white
   sit at about 13:1. */
.qf-qc-gate-btn {
    appearance: none;
    background: #55C83A;
    border: 1.5px solid rgba(1, 44, 68, 0.15);
    border-radius: 12px;
    padding: 16px 14px;
    text-align: left;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Hover keeps the Brand Green surface and only lifts the card; the white fill
   with a Brand Green rim marks the gate the visitor clicked open (below), so
   colour carries selection rather than momentary pointing. Labels stay deep
   navy on green (about 6:1) and on white (about 13:1), where white or lime type
   on green would sit near 2:1. */
.qf-qc-gate-btn:hover {
    background: #55C83A;
    border-color: rgba(1, 44, 68, 0.22);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(1, 44, 68, 0.14);
}

.qf-qc-gate-btn:focus-visible {
    outline: 3px solid #012C44;
    outline-offset: 2px;
}

/* The opened gate is a solid white #FFFFFF card with a Brand Green #55C83A rim,
   at the owner's request. The rim is drawn twice (border plus ring shadow) so it
   reads as a clear outline against the pale #F4F8F4 band without shifting the
   grid, and the lift shadow does the rest. */
.qf-qc-gate-btn.is-active {
    background: #FFFFFF;
    border-color: #55C83A;
    box-shadow: 0 0 0 1.5px #55C83A, 0 8px 22px rgba(1, 44, 68, 0.12);
}

/* An opened gate stays white while hovered, so the lift never hides the selection. */
.qf-qc-gate-btn.is-active:hover {
    background: #FFFFFF;
    border-color: #55C83A;
    box-shadow: 0 0 0 1.5px #55C83A, 0 10px 24px rgba(1, 44, 68, 0.16);
}

.qf-gate-num {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 800;
    color: #012C44;
    background: rgba(255, 255, 255, 0.72);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

/* The number tile of the open gate flips to Brand Green #55C83A with navy
   numerals, so the tile stays legible on the white card (a white tile would
   vanish), while the closed cards keep their translucent white tiles. */
.qf-qc-gate-btn.is-active .qf-gate-num {
    background: #55C83A;
    color: #012C44;
}

.qf-gate-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: #012C44;
    transition: color 0.25s ease;
}

.qf-qc-gate-btn.is-active .qf-gate-name {
    color: #012C44;
    font-weight: 800;
}

.qf-qc-gate-display {
    background: #FFFFFF;
    border: 1px solid #D6E8D5;
    border-radius: 18px;
    padding: 36px 40px;
    box-shadow: 0 12px 36px rgba(1, 44, 68, 0.06);
}

.qf-qc-gate-panel {
    display: none;
    grid-template-columns: 1fr 1.1fr;
    gap: 40px;
    align-items: center;
}

.qf-qc-gate-panel.is-active {
    display: grid;
}

.qf-qc-gate-visual {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #012C44;
}

.qf-qc-gate-visual img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.qf-qc-gate-panel:hover .qf-qc-gate-visual img {
    transform: scale(1.03);
}

.qf-qc-gate-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(1, 44, 68, 0.85);
    color: #67D031;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 6px 12px;
    border-radius: 6px;
    backdrop-filter: blur(8px);
}

.qf-qc-gate-info h3 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    color: #012C44;
    margin: 0 0 14px;
    line-height: 1.25;
}

.qf-qc-gate-desc {
    font-size: 0.98rem;
    line-height: 1.65;
    color: #4A5B68;
    margin: 0 0 20px;
}

.qf-qc-gate-checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.qf-qc-gate-checklist li {
    font-size: 0.88rem;
    color: #012C44;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.qf-qc-gate-checklist li::before {
    content: "✓";
    color: #55C83A;
    font-weight: 800;
}

.qf-qc-gate-metric {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #F4F8F4;
    border: 1px solid #D6E8D5;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #012C44;
}

.qf-qc-gate-metric strong {
    color: #0D4B3E;
    font-family: var(--font-display);
}

/* 4. SAMPLE-TO-MASS REPEATABILITY PROTOCOL */
.qf-qc-repeat-sec {
    padding: 100px 0;
    background: #FFFFFF;
}

.qf-qc-repeat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 48px;
}

.qf-qc-repeat-card {
    background: #F4F8F4;
    border: 1.5px solid #D6E8D5;
    border-radius: 16px;
    padding: 32px 28px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

.qf-qc-repeat-card:hover {
    background: #FFFFFF;
    border-color: #55C83A;
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(1, 44, 68, 0.08);
}

/* The three repeatability tiles 01/02/03 are Brand Green #55C83A with a white
   numeral at the owner's request, replacing the deep navy tile with green type. */
.qf-qc-repeat-icon {
    width: 52px;
    height: 52px;
    background: #55C83A;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 22px;
}

.qf-qc-repeat-card h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    color: #012C44;
    margin: 0 0 12px;
}

.qf-qc-repeat-card p {
    font-size: 0.92rem;
    line-height: 1.6;
    color: #4A5B68;
    margin: 0 0 20px;
    flex-grow: 1;
}

.qf-qc-repeat-tags {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.qf-qc-repeat-tags li {
    font-size: 0.78rem;
    font-weight: 700;
    color: #0D4B3E;
    background: rgba(85, 200, 58, 0.15);
    padding: 4px 10px;
    border-radius: 6px;
}
\n
/* 5. SPECIFICATION & VERSION CONTROL MATRIX */
.qf-qc-version-sec {
    padding: 100px 0;
    background: #F4F8F4;
}

.qf-qc-version-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    margin-top: 48px;
    align-items: stretch;
}

.qf-qc-version-table-box {
    background: #FFFFFF;
    border: 1px solid #D6E8D5;
    border-radius: 16px;
    padding: 32px 28px;
    box-shadow: 0 10px 30px rgba(1, 44, 68, 0.05);
}

.qf-qc-version-table {
    width: 100%;
    border-collapse: collapse;
}

.qf-qc-version-table th {
    text-align: left;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #012C44;
    padding: 12px 14px;
    border-bottom: 2px solid #55C83A;
}

.qf-qc-version-table td {
    padding: 14px 14px;
    border-bottom: 1px solid #EBF5E9;
    font-size: 0.88rem;
    color: #4A5B68;
}

.qf-qc-version-table tr:hover td {
    background: #F4F8F4;
}

.qf-qc-version-table td strong {
    color: #012C44;
    display: block;
    margin-bottom: 2px;
}

.qf-qc-version-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.qf-qc-lock-card {
    background: #012C44;
    color: #FFFFFF;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 12px 32px rgba(1, 44, 68, 0.15);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.qf-qc-lock-badge {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #67D031;
    background: rgba(103, 208, 49, 0.15);
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 16px;
}

.qf-qc-lock-card h3 {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 14px;
}

.qf-qc-lock-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 20px;
}

.qf-qc-lock-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.qf-qc-lock-list li {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 8px;
}

.qf-qc-lock-list li::before {
    content: "🔒";
    font-size: 0.9rem;
}

/* 6. TOLERANCE GOVERNANCE SYSTEM */
.qf-qc-tolerance-sec {
    padding: 100px 0;
    background: #FFFFFF;
}

.qf-qc-tol-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 40px 0 28px;
    justify-content: center;
}

.qf-qc-tol-tab-btn {
    appearance: none;
    background: #F4F8F4;
    border: 1.5px solid #D6E8D5;
    border-radius: 999px;
    padding: 10px 22px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #012C44;
    cursor: pointer;
    transition: all 0.25s ease;
}

.qf-qc-tol-tab-btn:hover {
    border-color: #55C83A;
    background: #FFFFFF;
}

.qf-qc-tol-tab-btn.is-active {
    background: #55C83A;
    border-color: #55C83A;
    color: #012C44;
    box-shadow: 0 4px 14px rgba(85, 200, 58, 0.3);
}

.qf-qc-tol-panel {
    display: none;
    background: #F4F8F4;
    border: 1px solid #D6E8D5;
    border-radius: 18px;
    padding: 36px 40px;
}

.qf-qc-tol-panel.is-active {
    display: block;
}

.qf-qc-tol-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    align-items: center;
}

.qf-qc-tol-info h3 {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 800;
    color: #012C44;
    margin: 0 0 12px;
}

.qf-qc-tol-desc {
    font-size: 0.96rem;
    line-height: 1.65;
    color: #4A5B68;
    margin: 0 0 22px;
}

.qf-qc-tol-table {
    width: 100%;
    border-collapse: collapse;
    background: #FFFFFF;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(1, 44, 68, 0.04);
}

.qf-qc-tol-table td {
    padding: 14px 18px;
    border-bottom: 1px solid #EBF5E9;
    font-size: 0.88rem;
}

.qf-qc-tol-table tr:last-child td {
    border-bottom: none;
}

.qf-qc-tol-table td strong {
    color: #012C44;
    display: block;
}

.qf-qc-tol-table td span {
    color: #55C83A;
    font-weight: 700;
}
\n
/* 7. INTERACTIVE BATCH TRACEABILITY ENGINE */
.qf-qc-trace-sec {
    padding: 100px 0;
    background: #F4F8F4;
}

.qf-qc-trace-shell {
    max-width: 960px;
    margin: 40px auto 0;
    background: #FFFFFF;
    border: 1.5px solid #D6E8D5;
    border-radius: 20px;
    padding: 44px;
    box-shadow: 0 14px 44px rgba(1, 44, 68, 0.08);
}

.qf-qc-trace-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.qf-qc-trace-bar input {
    flex-grow: 1;
    border: 1.5px solid #D6E8D5;
    border-radius: 12px;
    padding: 14px 20px;
    font-size: 1rem;
    font-weight: 600;
    color: #012C44;
    transition: all 0.25s ease;
    background: #F4F8F4;
}

.qf-qc-trace-bar input:focus {
    outline: none;
    border-color: #55C83A;
    background: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(85, 200, 58, 0.2);
}

/* Trace controls and the batch record card share the site's lake-teal surface:
   the card carries navy labels (white would sit at about 2.4:1 on this teal),
   while the call-to-action keeps the white label used by the other teal CTAs. */
.qf-qc-trace-bar button {
    appearance: none;
    background: #00B9BC;
    color: #FFFFFF;
    border: 1px solid rgba(1, 44, 68, 0.12);
    border-radius: 12px;
    padding: 14px 28px;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(0, 185, 188, 0.22);
}

.qf-qc-trace-bar button:hover,
.qf-qc-trace-bar button:focus-visible {
    background: #012C44;
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(1, 44, 68, 0.28);
}

.qf-qc-trace-samples {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 30px;
}

.qf-qc-trace-samples span {
    font-size: 0.82rem;
    color: #6C7A77;
    font-weight: 600;
}

.qf-qc-batch-sample {
    appearance: none;
    background: #EBF5E9;
    border: 1px solid #D6E8D5;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #0D4B3E;
    cursor: pointer;
    transition: all 0.2s ease;
}

.qf-qc-batch-sample:hover {
    background: #55C83A;
    color: #012C44;
}

.qf-qc-trace-card {
    background: #00B9BC;
    color: #012C44;
    border-radius: 14px;
    padding: 30px 32px;
    border: 1px solid rgba(1, 44, 68, 0.14);
}

.qf-qc-trace-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(1, 44, 68, 0.18);
    padding-bottom: 18px;
    margin-bottom: 22px;
}

.qf-qc-trace-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #012C44;
}

.qf-qc-trace-badge .qf-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #012C44;
    flex-shrink: 0;
}

.qf-qc-trace-num {
    color: rgba(1, 44, 68, 0.78);
}

.qf-qc-trace-num strong {
    font-family: var(--font-display);
    color: #012C44;
    font-size: 1.15rem;
}

.qf-qc-trace-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 28px;
}

.qf-qc-trace-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.qf-qc-trace-row span {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(1, 44, 68, 0.72);
    font-weight: 700;
}

.qf-qc-trace-row strong {
    font-size: 0.94rem;
    color: #012C44;
}

/* 8. NON-CONFORMANCE & 4-TIER CAPA WORKFLOW */
.qf-qc-capa-sec {
    padding: 100px 0;
    background: #FFFFFF;
}

.qf-qc-capa-accordion {
    max-width: 920px;
    margin: 40px auto 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.qf-qc-capa-card {
    background: #F4F8F4;
    border: 1.5px solid #D6E8D5;
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.qf-qc-capa-card.is-open {
    background: #FFFFFF;
    border-color: #55C83A;
    box-shadow: 0 10px 30px rgba(1, 44, 68, 0.08);
}

.qf-qc-capa-trigger {
    width: 100%;
    appearance: none;
    background: none;
    border: none;
    padding: 22px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    cursor: pointer;
}

.qf-qc-capa-title-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
}

.qf-qc-capa-step {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 800;
    color: #012C44;
    background: rgba(85, 200, 58, 0.2);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.qf-qc-capa-card.is-open .qf-qc-capa-step {
    background: #55C83A;
    color: #012C44;
}

.qf-qc-capa-trigger h3 {
    font-family: var(--font-display);
    font-size: 1.18rem;
    font-weight: 800;
    color: #012C44;
    margin: 0;
}

.qf-qc-capa-arrow {
    color: #55C83A;
    font-weight: 800;
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.qf-qc-capa-card.is-open .qf-qc-capa-arrow {
    transform: rotate(180deg);
}

.qf-qc-capa-body {
    display: none;
    padding: 0 28px 26px 80px;
}

.qf-qc-capa-card.is-open .qf-qc-capa-body {
    display: block;
    animation: qfFadeInUp 0.3s ease both;
}

.qf-qc-capa-body p {
    font-size: 0.95rem;
    line-height: 1.65;
    color: #4A5B68;
    margin: 0 0 16px;
}

.qf-qc-capa-action-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qf-qc-capa-action-list li {
    font-size: 0.88rem;
    font-weight: 600;
    color: #012C44;
    position: relative;
    padding-left: 20px;
}

.qf-qc-capa-action-list li::before {
    content: "➔";
    position: absolute;
    left: 0;
    color: #55C83A;
    font-weight: 800;
}

/* 9. CLOSING ACTION CTA BANNER */
/* Closing CTA band: Brand Green surface, title kept white as requested, every
   other label deep navy (#012C44) — navy on green is ~6.6:1, while white on
   green would be ~2.2:1. Ticks/labels are scoped so no other page is hit. */
.qf-qc-cta-sec {
    background: #55C83A;
    padding: 88px 0;
    color: #012C44;
    position: relative;
    overflow: hidden;
}

.qf-qc-cta-content {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

.qf-qc-cta-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.8vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    margin: 0 0 18px;
}

.qf-qc-cta-sec .qf-eyebrow--dark {
    color: #012C44;
}

.qf-qc-cta-sub {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #012C44;
    margin: 0 0 34px;
}

.qf-qc-cta-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
}

/* "Request Quality Information" — Signal Lime + navy label, white on hover.
   "View Testing & Compliance Scope" — white + navy label, deep navy fill with
   a white label on hover. */
.qf-qc-cta-actions .qf-btn--light {
    background: #D4FF00;
    color: #012C44;
    font-weight: 800;
    border: 2px solid #D4FF00;
    padding: 14px 32px;
    box-shadow: 0 6px 24px rgba(212, 255, 0, 0.25);
    transition: all 0.3s ease;
}

.qf-qc-cta-actions .qf-btn--light:hover,
.qf-qc-cta-actions .qf-btn--light:focus-visible {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: #012C44;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.35);
}

.qf-qc-cta-actions .qf-btn--ghost {
    background: #FFFFFF;
    color: #012C44;
    border: 2px solid #FFFFFF;
    padding: 14px 32px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.qf-qc-cta-actions .qf-btn--ghost:hover,
.qf-qc-cta-actions .qf-btn--ghost:focus-visible {
    background: #012C44;
    color: #FFFFFF;
    border-color: #012C44;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(1, 44, 68, 0.35);
}

/* RESPONSIVE MEDIA QUERIES */
@media (max-width: 1024px) {
    .qf-qc-hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .qf-qc-hero-visual img {
        height: 380px;
    }
    .qf-qc-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .qf-qc-gate-nav {
        grid-template-columns: repeat(2, 1fr);
    }
    .qf-qc-gate-panel {
        grid-template-columns: 1fr;
    }
    .qf-qc-repeat-grid {
        grid-template-columns: 1fr;
    }
    .qf-qc-version-grid {
        grid-template-columns: 1fr;
    }
    .qf-qc-tol-grid {
        grid-template-columns: 1fr;
    }
    .qf-qc-trace-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .qf-qc-hero {
        padding: 72px 0 96px;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), 0 100%);
    }
    .qf-qc-stats-grid {
        grid-template-columns: 1fr;
    }
    .qf-qc-stat {
        border-left: none;
        border-bottom: 1px solid #D6E8D5;
        padding-left: 0;
        padding-bottom: 16px;
    }
    .qf-qc-gate-nav {
        grid-template-columns: 1fr;
    }
    .qf-qc-gate-display {
        padding: 24px 20px;
    }
    .qf-qc-gate-checklist {
        grid-template-columns: 1fr;
    }
    .qf-qc-trace-shell {
        padding: 28px 20px;
    }
    .qf-qc-trace-bar {
        flex-direction: column;
    }
    .qf-qc-capa-body {
        padding-left: 28px;
    }
    .qf-qc-tol-panel {
        padding: 28px 20px;
    }
}


/* ==========================================================================
   Testing & Compliance Page Styles (.qf-tc-page)
   ========================================================================== */

.qf-tc-page {
    background-color: var(--color-bg, #F8FAFB);
    color: var(--color-text, #1E293B);
    overflow-x: hidden;
}

/* 1. Hero Section */
.qf-tc-hero {
    position: relative;
    background-color: #012C44;
    color: #FFFFFF;
    padding: 100px 0 80px;
    overflow: hidden;
}

.qf-tc-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.16;
    pointer-events: none;
}

.qf-tc-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(80%) contrast(120%);
    transition: transform 12s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-tc-hero:hover .qf-tc-hero-bg img {
    transform: scale(1.05);
}

.qf-tc-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 56px;
    align-items: center;
}

.qf-tc-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    padding: 8px 18px;
    border-radius: 9999px;
    margin-bottom: 24px;
}

.qf-tc-badge-pulse {
    width: 8px;
    height: 8px;
    background-color: #55C83A;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(85, 200, 58, 0.7);
    animation: qfTcPulse 2s infinite;
}

@keyframes qfTcPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(85, 200, 58, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(85, 200, 58, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(85, 200, 58, 0);
    }
}

.qf-tc-hero-title {
    font-size: clamp(2.4rem, 4.5vw, 3.8rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: #FFFFFF;
    margin-bottom: 24px;
}

.qf-tc-hero-title span {
    color: #D4FF00;
}

.qf-tc-hero-lead {
    font-size: 1.125rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 36px;
    max-width: 620px;
}

.qf-tc-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 36px;
}

/* Lime primary on the navy hero: navy label (13:1) inverting to a white
   surface on hover, where the navy label still reads 14:1. */
.qf-tc-hero-actions .qf-btn--primary {
    background: #D4FF00;
    color: #012C44;
    font-weight: 800;
    border: 2px solid rgba(1, 44, 68, 0.14);
    box-shadow: 0 8px 24px rgba(1, 44, 68, 0.4);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-tc-hero-actions .qf-btn--primary:hover,
.qf-tc-hero-actions .qf-btn--primary:focus-visible {
    background: #FFFFFF;
    color: #012C44;
    border-color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(1, 44, 68, 0.5);
}

/* White secondary (navy label) inverting to a Brand Green surface on hover. */
.qf-tc-hero-actions .qf-btn--outline {
    background: #FFFFFF;
    color: #012C44;
    border: 2px solid #FFFFFF;
    font-weight: 700;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-tc-hero-actions .qf-btn--outline:hover,
.qf-tc-hero-actions .qf-btn--outline:focus-visible {
    background: #55C83A;
    color: #012C44;
    border-color: #55C83A;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(1, 44, 68, 0.45);
}

.qf-tc-hero-chips {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 20px;
}

.qf-tc-hero-chips li {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    gap: 8px;
}

.qf-tc-hero-chips li .qf-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: rgba(85, 200, 58, 0.2);
    color: #67D031;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
}

.qf-tc-hero-visual {
    position: relative;
}

.qf-tc-visual-frame {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.qf-tc-visual-frame img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-tc-visual-frame:hover img {
    transform: scale(1.03);
}

.qf-tc-float-banner {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: rgba(1, 44, 68, 0.92);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.qf-tc-float-icon {
    font-size: 28px;
    line-height: 1;
}

.qf-tc-float-text strong {
    display: block;
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.qf-tc-float-text span {
    display: block;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.qf-tc-hero-kpi-bar {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 16px 20px;
    margin-top: 16px;
}

.qf-tc-kpi-col {
    text-align: center;
}

.qf-tc-kpi-val {
    display: block;
    color: #D4FF00;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.qf-tc-kpi-lbl {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
}

.qf-tc-kpi-sep {
    width: 1px;
    height: 32px;
    background: rgba(255, 255, 255, 0.15);
}

/* 2. Stats Strip */
.qf-tc-stats {
    background-color: #FFFFFF;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    padding: 48px 0;
}

.qf-tc-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.qf-tc-stat-card {
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    padding-right: 28px;
    transition: transform 0.3s ease;
}

.qf-tc-stat-card:hover {
    transform: translateY(-4px);
}

.qf-tc-stat-card:last-child {
    border-right: none;
    padding-right: 0;
}

.qf-tc-stat-num {
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: #012C44;
    margin-bottom: 8px;
}

.qf-tc-counter {
    font-size: clamp(2.2rem, 3.5vw, 3rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #012C44;
}

.qf-tc-unit {
    font-size: 1.25rem;
    font-weight: 700;
    color: #55C83A;
}

.qf-tc-stat-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0F172A;
    margin: 0 0 6px 0;
}

.qf-tc-stat-desc {
    font-size: 0.84rem;
    line-height: 1.55;
    color: #64748B;
    margin: 0;
}


/* 3. In-House vs Third-Party Testing */
.qf-tc-dual-sec {
    padding: 96px 0;
    background-color: #F8FAFB;
}

.qf-tc-dual-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-top: 48px;
}

.qf-tc-dual-col {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 40px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

.qf-tc-dual-col:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
    border-color: #CBD5E1;
}

.qf-tc-dual-col--inhouse {
    border-top: 5px solid #012C44;
}

.qf-tc-dual-col--external {
    border-top: 5px solid #55C83A;
}

.qf-tc-dual-header {
    margin-bottom: 24px;
}

.qf-tc-tag {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 14px;
}

.qf-tc-tag--primary {
    background: #E8F7EC;
    color: #0D4B3E;
}

.qf-tc-tag--accent {
    background: #012C44;
    color: #D4FF00;
}

.qf-tc-dual-header h3 {
    font-size: 1.6rem;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 10px 0;
}

.qf-tc-dual-header p {
    font-size: 0.9375rem;
    color: #64748B;
    line-height: 1.6;
    margin: 0;
}

.qf-tc-dual-img {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 28px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.qf-tc-dual-img img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.qf-tc-dual-col:hover .qf-tc-dual-img img {
    transform: scale(1.03);
}

.qf-tc-dual-list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-grow: 1;
}

.qf-tc-dual-list li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.qf-tc-list-icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    background: #F1F5F9;
    color: #012C44;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    margin-top: 2px;
}

.qf-tc-dual-col--external .qf-tc-list-icon {
    background: #E8F7EC;
    color: #55C83A;
}

.qf-tc-list-info strong {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 3px;
}

.qf-tc-list-info span {
    display: block;
    font-size: 0.84rem;
    color: #64748B;
    line-height: 1.5;
}

.qf-tc-boundary-note {
    background: #F8FAFC;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    gap: 12px;
    border: 1px solid #E2E8F0;
}

.qf-tc-boundary-note--accent {
    background: #F0FDF4;
    border-color: #BBF7D0;
}

.qf-tc-note-icon {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

.qf-tc-boundary-note p {
    font-size: 0.8125rem;
    color: #475569;
    line-height: 1.5;
    margin: 0;
}

/* 4. Standards & Scope Explorer */
.qf-tc-explorer-sec {
    padding: 96px 0;
    background-color: #FFFFFF;
}

/* Standards tab strip: one Brand Green segmented band. Navy labels read 6.6:1
   on the green where white would only reach 2.2:1; the selected tab lifts out
   as a white pill, and the lime badge keeps the lime signal. */
.qf-tc-tabs-nav {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    background: #55C83A;
    border: 1px solid rgba(1, 44, 68, 0.15);
    border-radius: 18px;
    padding: 8px;
    margin-bottom: 40px;
    box-shadow: 0 10px 28px rgba(1, 44, 68, 0.12);
}

.qf-tc-tab-btn {
    background: transparent;
    border: none;
    border-left: 1px solid rgba(1, 44, 68, 0.15);
    border-radius: 12px;
    padding: 16px 14px;
    text-align: left;
    cursor: pointer;
    color: #012C44;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

.qf-tc-tab-btn:first-child {
    border-left: none;
}

.qf-tc-tab-btn:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: translateY(-2px);
}

.qf-tc-tab-btn.is-active {
    background: #FFFFFF;
    color: #012C44;
    box-shadow: 0 8px 20px rgba(1, 44, 68, 0.18);
}

.qf-tc-tab-badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.85);
    color: #012C44;
    margin-bottom: 8px;
    align-self: flex-start;
}

.qf-tc-tab-btn.is-active .qf-tc-tab-badge {
    background: #D4FF00;
    color: #012C44;
}

.qf-tc-tab-title {
    font-size: 0.9375rem;
    font-weight: 800;
    color: #012C44;
    margin-bottom: 4px;
}

.qf-tc-tab-btn.is-active .qf-tc-tab-title {
    color: #012C44;
}

.qf-tc-tab-sub {
    font-size: 0.75rem;
    color: rgba(1, 44, 68, 0.75);
    line-height: 1.35;
}

.qf-tc-tab-btn.is-active .qf-tc-tab-sub {
    color: rgba(1, 44, 68, 0.7);
}

.qf-tc-panel {
    display: none;
}

.qf-tc-panel.is-active {
    display: block;
}

.qf-tc-panel-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 48px;
    background: #F8FAFB;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    padding: 40px;
    align-items: center;
}

.qf-tc-panel-visual {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.08);
}

.qf-tc-panel-visual img {
    width: 100%;
    height: auto;
    display: block;
}

.qf-tc-panel-metric-card {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: rgba(1, 44, 68, 0.94);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 14px;
    margin-top: 14px;
}

.qf-tc-pm-item {
    text-align: center;
}

.qf-tc-pm-val {
    display: block;
    font-size: 1.15rem;
    font-weight: 800;
    color: #D4FF00;
}

.qf-tc-pm-lbl {
    display: block;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

.qf-tc-pm-sep {
    width: 1px;
    height: 26px;
    background: rgba(255, 255, 255, 0.15);
}

.qf-tc-panel-title-row {
    margin-bottom: 14px;
}

.qf-tc-badge-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.qf-tc-badge-pill.is-primary {
    background: #E8F7EC;
    color: #0D4B3E;
}

.qf-tc-badge-pill.is-accent {
    background: #FEF3C7;
    color: #92400E;
}

.qf-tc-panel-info h3 {
    font-size: 1.45rem;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.3;
    margin: 0;
}

.qf-tc-panel-desc {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: #475569;
    margin: 14px 0 24px 0;
}

.qf-tc-spec-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
    background: #FFFFFF;
}

.qf-tc-spec-table th,
.qf-tc-spec-table td {
    padding: 12px 16px;
    font-size: 0.84rem;
    line-height: 1.5;
    border-bottom: 1px solid #E2E8F0;
}

.qf-tc-spec-table th {
    background: #F1F5F9;
    font-weight: 700;
    color: #1E293B;
    text-align: left;
}

.qf-tc-spec-table tr:last-child td {
    border-bottom: none;
}

.qf-tc-spec-table td strong {
    color: #012C44;
}

.qf-tc-panel-actions {
    margin-top: 16px;
}

/* Request CTAs on this page share one treatment, matching the samples
   estimator CTA (#st-res-cta): lake-teal surface with a white label that
   darkens to Brand navy on hover. Covers the six standard-panel buttons
   ("Request UV Retention Test Data" et al.), the dossier footer
   ("Request Verification Dossier") and the simulator footer
   ("Confirm Testing Requirements for This Spec"). White on teal #00B9BC is
   only ~2.4:1, so the weight is 800 and hover lands on navy (~13:1). */
.qf-tc-panel-actions .qf-btn--primary,
.qf-tc-dossier-footer .qf-btn--primary,
.qf-tc-res-footer .qf-btn--primary {
    background: #00B9BC;
    color: #FFFFFF;
    border: 1px solid rgba(1, 44, 68, 0.12);
    box-shadow: 0 8px 20px rgba(0, 185, 188, 0.28);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-tc-panel-actions .qf-btn--primary:hover,
.qf-tc-panel-actions .qf-btn--primary:focus-visible,
.qf-tc-dossier-footer .qf-btn--primary:hover,
.qf-tc-dossier-footer .qf-btn--primary:focus-visible,
.qf-tc-res-footer .qf-btn--primary:hover,
.qf-tc-res-footer .qf-btn--primary:focus-visible {
    background: #012C44;
    color: #FFFFFF;
    border-color: #012C44;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(1, 44, 68, 0.28);
}


/* 5. Dossier & Report Transparency Card */
.qf-tc-dossier-sec {
    padding: 96px 0;
    background-color: #F8FAFB;
}

.qf-tc-dossier-card {
    background: #FFFFFF;
    border-radius: 20px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    margin-top: 48px;
}

/* Dossier header band on Brand Green: navy labels (6.6:1) replace the white
   ones, and the status chip becomes a white pill with a navy dot + label so it
   still reads as "verified" on the green surface. */
.qf-tc-dossier-header {
    background: #55C83A;
    border-bottom: 1px solid rgba(1, 44, 68, 0.15);
    color: #012C44;
    padding: 24px 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.qf-tc-doc-type {
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #012C44;
}

.qf-tc-doc-id {
    display: block;
    font-size: 0.875rem;
    color: rgba(1, 44, 68, 0.78);
    font-family: monospace;
    margin-top: 4px;
}

.qf-tc-dh-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FFFFFF;
    border: 1px solid rgba(1, 44, 68, 0.15);
    box-shadow: 0 4px 12px rgba(1, 44, 68, 0.12);
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 0.8125rem;
    color: #012C44;
    font-weight: 700;
}

.qf-tc-status-dot {
    width: 6px;
    height: 6px;
    background-color: #55C83A;
    border-radius: 50%;
}

.qf-tc-dossier-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    padding: 40px 36px;
}

.qf-tc-dossier-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.qf-tc-di-num {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #E8F7EC;
    color: #0D4B3E;
    font-weight: 800;
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qf-tc-di-body h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #0F172A;
    margin: 0 0 6px 0;
}

.qf-tc-di-body p {
    font-size: 0.84rem;
    color: #64748B;
    line-height: 1.55;
    margin: 0 0 10px 0;
}

.qf-tc-di-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    background: #F1F5F9;
    color: #475569;
}

.qf-tc-dossier-footer {
    background: #F8FAFC;
    border-top: 1px solid #E2E8F0;
    padding: 24px 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.qf-tc-df-text strong {
    display: block;
    color: #0F172A;
    font-size: 1rem;
    font-weight: 700;
}

.qf-tc-df-text span {
    display: block;
    color: #64748B;
    font-size: 0.875rem;
    margin-top: 2px;
}

/* 6. Special Compliance Boundary Cards */
.qf-tc-boundaries-sec {
    padding: 96px 0;
    background-color: #FFFFFF;
}

.qf-tc-bound-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 48px;
}

.qf-tc-bound-card {
    background: #F8FAFB;
    border-radius: 18px;
    border: 1px solid #E2E8F0;
    padding: 32px 28px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-tc-bound-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.06);
    border-color: #CBD5E1;
    background: #FFFFFF;
}

.qf-tc-bc-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid #E2E8F0;
}

.qf-tc-bc-icon {
    font-size: 32px;
    line-height: 1;
}

.qf-tc-bc-sub {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #55C83A;
    margin-bottom: 4px;
}

.qf-tc-bc-header h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0F172A;
    margin: 0;
}

.qf-tc-bc-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.qf-tc-bc-col strong {
    display: block;
    font-size: 0.84rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.qf-tc-bc-col.is-can strong {
    color: #0D4B3E;
}

.qf-tc-bc-col.is-boundary strong {
    color: #B45309;
}

.qf-tc-bc-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qf-tc-bc-col li {
    font-size: 0.8125rem;
    color: #475569;
    line-height: 1.45;
    position: relative;
    padding-left: 16px;
}

.qf-tc-bc-col.is-can li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #55C83A;
    font-weight: 800;
}

.qf-tc-bc-col.is-boundary li::before {
    content: "✕";
    position: absolute;
    left: 0;
    color: #EF4444;
    font-weight: 800;
}

/* 7. Interactive Spec-to-Report Matching Demo */
.qf-tc-verifier-sec {
    padding: 96px 0;
    background-color: #F8FAFB;
}

.qf-tc-verifier-card {
    background: #FFFFFF;
    border-radius: 20px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.05);
    padding: 40px;
    margin-top: 48px;
}

.qf-tc-verifier-inputs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    padding-bottom: 32px;
    border-bottom: 1px solid #E2E8F0;
}

.qf-tc-v-field label {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 8px;
}

.qf-tc-select {
    width: 100%;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid #CBD5E1;
    background: #F8FAFC;
    color: #0F172A;
    font-size: 0.9375rem;
    font-weight: 600;
    outline: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.qf-tc-select:focus {
    border-color: #012C44;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(1, 44, 68, 0.1);
}

.qf-tc-verifier-result {
    margin-top: 32px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 32px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-tc-res-header {
    margin-bottom: 24px;
}

.qf-tc-res-tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    background: #012C44;
    color: #D4FF00;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

.qf-tc-res-header h4 {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0F172A;
    margin: 0;
}

.qf-tc-res-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 28px;
}

.qf-tc-res-col {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 16px 20px;
}

.qf-tc-rc-lbl {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748B;
    margin-bottom: 4px;
}

.qf-tc-res-col strong {
    display: block;
    font-size: 0.9375rem;
    color: #012C44;
    line-height: 1.45;
}

.qf-tc-res-footer {
    display: flex;
    justify-content: flex-end;
}

/* 8. Closing Action CTA Banner */
.qf-tc-cta-sec {
    padding: 96px 0;
    background-color: #FFFFFF;
}

/* Closing CTA band: Brand Green surface. The title stays white (on request);
   eyebrow, lead and the guarantee list carry deep navy, which reads 6.6:1 on
   #55C83A where white would only reach 2.2:1. */
.qf-tc-cta-card {
    background: #55C83A;
    border-radius: 24px;
    padding: 64px 48px;
    text-align: center;
    color: #012C44;
    box-shadow: 0 20px 50px rgba(1, 44, 68, 0.2);
    position: relative;
    overflow: hidden;
}

.qf-tc-cta-card::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.14) 0%, transparent 60%);
    pointer-events: none;
}

.qf-tc-cta-content {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
}

/* The shared .qf-eyebrow--dark is white; on the green band it turns navy. */
.qf-tc-cta-card .qf-eyebrow--dark {
    color: #012C44;
}

.qf-tc-cta-title {
    font-size: clamp(2rem, 3.8vw, 2.8rem);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.2;
    margin: 16px 0 20px 0;
}

.qf-tc-cta-lead {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #012C44;
    margin-bottom: 36px;
}

.qf-tc-cta-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 32px;
}

/* Lime primary (navy label, 13:1) lifting to a white surface on hover. */
.qf-tc-cta-actions .qf-btn--primary {
    background: #D4FF00;
    color: #012C44;
    font-weight: 800;
    border: 2px solid rgba(1, 44, 68, 0.14);
    box-shadow: 0 8px 20px rgba(1, 44, 68, 0.18);
}

.qf-tc-cta-actions .qf-btn--primary:hover,
.qf-tc-cta-actions .qf-btn--primary:focus-visible {
    background: #FFFFFF;
    color: #012C44;
    border-color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(1, 44, 68, 0.26);
}

/* White secondary (navy label) inverting to a Brand Green surface on hover. */
.qf-tc-cta-actions .qf-btn--outline {
    background: #FFFFFF;
    color: #012C44;
    border: 2px solid #FFFFFF;
    font-weight: 700;
}

.qf-tc-cta-actions .qf-btn--outline:hover,
.qf-tc-cta-actions .qf-btn--outline:focus-visible {
    background: #55C83A;
    color: #012C44;
    border-color: #55C83A;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(1, 44, 68, 0.3);
}

.qf-tc-cta-guarantees {
    display: flex;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
    font-size: 0.84rem;
    color: #012C44;
}

.qf-tc-cta-guarantees span {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Inline tick used by the closing CTA guarantee lists (Samples & Testing, Testing & Compliance).
   Both bands are Brand Green now, where a white 15% chip with a green glyph would
   disappear, so the chip is white with a navy tick. Scoped so it cannot reach the
   OEM artwork checklist card. */
.qf-st-cta-guarantees .qf-check-icon,
.qf-tc-cta-guarantees .qf-check-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #FFFFFF;
    color: #012C44;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    flex-shrink: 0;
}

/* Responsive Media Queries */
@media (max-width: 1024px) {
    .qf-tc-hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .qf-tc-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .qf-tc-stat-card {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        padding-bottom: 20px;
    }
    .qf-tc-stat-card:nth-last-child(-n+2) {
        border-bottom: none;
        padding-bottom: 0;
    }
    .qf-tc-dual-grid {
        grid-template-columns: 1fr;
    }
    /* Multi-row strip: the vertical dividers only work in one row, so each
       tile gets its own hairline and the tiles are separated by a small gap. */
    .qf-tc-tabs-nav {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    .qf-tc-tab-btn {
        border-left: none;
        border: 1px solid rgba(1, 44, 68, 0.15);
    }
    .qf-tc-panel-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .qf-tc-dossier-grid {
        grid-template-columns: 1fr 1fr;
    }
    .qf-tc-bound-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .qf-tc-hero {
        padding: 60px 0 40px;
    }
    .qf-tc-hero-chips {
        grid-template-columns: 1fr;
    }
    .qf-tc-tabs-nav {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    .qf-tc-dossier-grid {
        grid-template-columns: 1fr;
    }
    .qf-tc-dossier-header,
    .qf-tc-dossier-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .qf-tc-verifier-inputs {
        grid-template-columns: 1fr;
    }
    .qf-tc-res-grid {
        grid-template-columns: 1fr;
    }
    .qf-tc-cta-card {
        padding: 40px 24px;
    }
    .qf-tc-cta-actions {
        flex-direction: column;
    }
    .qf-tc-cta-guarantees {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }
}


/* ==========================================================================
   Samples & Testing Page Styles (.qf-st-page)
   ========================================================================== */

.qf-st-page {
    background-color: var(--color-bg, #F8FAFB);
    color: var(--color-text, #1E293B);
    overflow-x: hidden;
}

/* 1. Hero Section */
.qf-st-hero {
    position: relative;
    background-color: #012C44;
    color: #FFFFFF;
    padding: 100px 0 80px;
    overflow: hidden;
}

.qf-st-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.16;
    pointer-events: none;
}

.qf-st-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(80%) contrast(120%);
    transition: transform 12s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-st-hero:hover .qf-st-hero-bg img {
    transform: scale(1.05);
}

.qf-st-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 56px;
    align-items: center;
}

.qf-st-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    padding: 8px 18px;
    border-radius: 9999px;
    margin-bottom: 24px;
}

.qf-st-badge-pulse {
    width: 8px;
    height: 8px;
    background-color: #55C83A;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(85, 200, 58, 0.7);
    animation: qfStPulse 2s infinite;
}

@keyframes qfStPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(85, 200, 58, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(85, 200, 58, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(85, 200, 58, 0);
    }
}

.qf-st-hero-title {
    font-size: clamp(2.4rem, 4.5vw, 3.8rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: #FFFFFF;
    margin-bottom: 24px;
}

/* Hero headline accent: solid Signal Lime #D4FF00 on the deep navy hero (~13:1). */
.qf-st-hero-title span {
    color: #D4FF00;
    background: none;
    -webkit-text-fill-color: currentColor;
}

.qf-st-hero-lead {
    font-size: 1.125rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 36px;
    max-width: 620px;
}

.qf-st-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 36px;
}

/* Hero button pair: lime fill (navy label, ~13:1) hovering to white, and a
   white outline button hovering to Brand Green (navy label, ~6.6:1). */
.qf-st-hero-actions .qf-btn--primary {
    background: #D4FF00;
    color: #012C44;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(212, 255, 0, 0.25);
    border: 1px solid #D4FF00;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-st-hero-actions .qf-btn--primary:hover {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: #012C44;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(255, 255, 255, 0.28);
}

.qf-st-hero-actions .qf-btn--outline {
    background: #FFFFFF;
    color: #012C44;
    border: 1px solid #FFFFFF;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-st-hero-actions .qf-btn--outline:hover {
    background: #55C83A;
    border-color: #55C83A;
    color: #012C44;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(85, 200, 58, 0.4);
}

.qf-st-hero-chips {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 20px;
}

.qf-st-hero-chips li {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    gap: 8px;
}

.qf-st-hero-chips li .qf-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: rgba(85, 200, 58, 0.2);
    color: #67D031;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
}

.qf-st-hero-visual {
    position: relative;
}

.qf-st-visual-frame {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.qf-st-visual-frame img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-st-visual-frame:hover img {
    transform: scale(1.03);
}

.qf-st-float-tag {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: rgba(1, 44, 68, 0.92);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.qf-st-ft-icon {
    font-size: 28px;
    line-height: 1;
}

.qf-st-ft-info strong {
    display: block;
    color: #FFFFFF;
    font-size: 0.9375rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.qf-st-ft-info span {
    display: block;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.8125rem;
}

.qf-st-hero-kpi-bar {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 16px 20px;
    margin-top: 16px;
}

.qf-st-kpi-col {
    text-align: center;
}

.qf-st-kpi-val {
    display: block;
    color: #D4FF00;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.qf-st-kpi-lbl {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
}

.qf-st-kpi-sep {
    width: 1px;
    height: 32px;
    background: rgba(255, 255, 255, 0.15);
}

/* 2. Stats Strip */
.qf-st-stats {
    background-color: #FFFFFF;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    padding: 48px 0;
}

.qf-st-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.qf-st-stat-card {
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    padding-right: 28px;
    transition: transform 0.3s ease;
}

.qf-st-stat-card:hover {
    transform: translateY(-4px);
}

.qf-st-stat-card:last-child {
    border-right: none;
    padding-right: 0;
}

.qf-st-stat-num {
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: #012C44;
    margin-bottom: 8px;
}

.qf-st-counter {
    font-size: clamp(2.2rem, 3.5vw, 3rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #012C44;
}

.qf-st-unit {
    font-size: 1.25rem;
    font-weight: 700;
    color: #55C83A;
}

.qf-st-stat-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0F172A;
    margin: 0 0 6px 0;
}

.qf-st-stat-desc {
    font-size: 0.84rem;
    line-height: 1.55;
    color: #64748B;
    margin: 0;
}

/* 3. Sample Compare Section */
.qf-st-compare-sec {
    padding: 96px 0;
    background-color: #F8FAFB;
}

.qf-st-comp-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-top: 48px;
}

.qf-st-comp-card {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 40px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    position: relative;
    display: flex;
    flex-direction: column;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-st-comp-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
    border-color: #CBD5E1;
}

.qf-st-comp-card--stock {
    border-top: 5px solid #012C44;
}

.qf-st-comp-card--custom {
    border-top: 5px solid #55C83A;
}

.qf-st-cc-badge {
    position: absolute;
    top: -14px;
    right: 28px;
    background: #012C44;
    color: #D4FF00;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 12px;
    border-radius: 9999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.qf-st-cc-badge.is-accent {
    background: #55C83A;
    color: #FFFFFF;
}

.qf-st-cc-header {
    margin-bottom: 20px;
}

.qf-st-cc-header h3 {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 10px 0;
}

.qf-st-price-tag {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.qf-st-pt-free {
    font-size: 1.6rem;
    font-weight: 800;
    color: #55C83A;
}

.qf-st-pt-cost {
    font-size: 1.35rem;
    font-weight: 800;
    color: #012C44;
}

.qf-st-pt-note {
    font-size: 0.8125rem;
    color: #64748B;
}

.qf-st-cc-img {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.qf-st-cc-img img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.qf-st-comp-card:hover .qf-st-cc-img img {
    transform: scale(1.03);
}

.qf-st-cc-desc {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #475569;
    margin: 0 0 24px 0;
}

.qf-st-cc-list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-grow: 1;
}

.qf-st-cc-list li {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #334155;
    border-bottom: 1px solid #F1F5F9;
    padding-bottom: 8px;
}

.qf-st-cc-list li strong {
    color: #0F172A;
}

.qf-btn--block {
    width: 100%;
    text-align: center;
    display: block;
}

/* 4. Lifecycle Roadmap */
.qf-st-lifecycle-sec {
    padding: 96px 0;
    background-color: #FFFFFF;
}

.qf-st-steps-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-top: 48px;
}

.qf-st-step-card {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-st-step-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.06);
    border-color: #55C83A;
    background: #FFFFFF;
}

.qf-st-sc-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.qf-st-sc-num {
    font-size: 1.6rem;
    font-weight: 800;
    color: #012C44;
    line-height: 1;
}

.qf-st-sc-badge {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 6px;
    background: #E8F7EC;
    color: #0D4B3E;
}

.qf-st-step-card h3 {
    font-size: 1rem;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 10px 0;
    line-height: 1.35;
}

.qf-st-step-card p {
    font-size: 0.8125rem;
    line-height: 1.55;
    color: #64748B;
    margin: 0 0 16px 0;
    flex-grow: 1;
}

.qf-st-sc-output {
    background: #F1F5F9;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    color: #334155;
    line-height: 1.4;
}

.qf-st-sc-output strong {
    color: #012C44;
}

/* 5. Client Testing Guide */
.qf-st-guide-sec {
    padding: 96px 0;
    background-color: #F8FAFB;
}

.qf-st-guide-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 48px;
}

.qf-st-guide-card {
    background: #FFFFFF;
    border-radius: 18px;
    border: 1px solid #E2E8F0;
    padding: 32px 26px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.02);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-st-guide-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.06);
    border-color: #CBD5E1;
}

.qf-st-gc-icon {
    font-size: 32px;
    line-height: 1;
    margin-bottom: 16px;
}

.qf-st-guide-card h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 12px 0;
    line-height: 1.35;
}

.qf-st-guide-card p {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #64748B;
    margin: 0 0 20px 0;
    flex-grow: 1;
}

.qf-st-gc-check {
    background: #F8FAFC;
    border-left: 3px solid #55C83A;
    padding: 12px 14px;
    border-radius: 0 8px 8px 0;
}

.qf-st-gc-check span {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: #55C83A;
    margin-bottom: 2px;
}

.qf-st-gc-check strong {
    display: block;
    font-size: 0.8125rem;
    color: #1E293B;
    line-height: 1.4;
}

/* 6. Pre-Test Matrix Table */
.qf-st-matrix-sec {
    padding: 96px 0;
    background-color: #FFFFFF;
}

.qf-st-matrix-table-wrap {
    margin-top: 48px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #E2E8F0;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.04);
}

.qf-st-matrix-table {
    width: 100%;
    border-collapse: collapse;
    background: #FFFFFF;
}

.qf-st-matrix-table th,
.qf-st-matrix-table td {
    padding: 16px 20px;
    font-size: 0.875rem;
    line-height: 1.5;
    border-bottom: 1px solid #E2E8F0;
    text-align: left;
}

/* Header band on Brand Green with navy labels: white on #55C83A is ~2.2:1,
   navy #012C44 on the same green is ~6.6:1, matching the site's green surfaces. */
.qf-st-matrix-table th {
    background: #55C83A;
    color: #012C44;
    font-weight: 800;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
    border-bottom: 1px solid rgba(1, 44, 68, 0.15);
}

.qf-st-matrix-table tr:hover td {
    background: #F8FAFC;
}

.qf-st-matrix-table td strong {
    color: #0F172A;
}

.qf-st-pass-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    background: #E8F7EC;
    color: #0D4B3E;
    font-size: 0.75rem;
    font-weight: 700;
}

/* 7. Calculator Section */
.qf-st-calc-sec {
    padding: 96px 0;
    background-color: #F8FAFB;
}

.qf-st-calc-card {
    background: #FFFFFF;
    border-radius: 20px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.05);
    padding: 40px;
    margin-top: 48px;
}

.qf-st-calc-inputs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    padding-bottom: 32px;
    border-bottom: 1px solid #E2E8F0;
}

.qf-st-ci-col label {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 8px;
}

.qf-st-select {
    width: 100%;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid #CBD5E1;
    background: #F8FAFC;
    color: #0F172A;
    font-size: 0.9375rem;
    font-weight: 600;
    outline: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.qf-st-select:focus {
    border-color: #012C44;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(1, 44, 68, 0.1);
}

.qf-st-calc-display {
    margin-top: 32px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 32px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-st-cd-header {
    margin-bottom: 24px;
}

.qf-st-cd-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    background: #012C44;
    color: #D4FF00;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

.qf-st-cd-header h4 {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0F172A;
    margin: 0;
}

.qf-st-cd-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 28px;
}

.qf-st-cd-item {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 16px 20px;
}

.qf-st-cd-lbl {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748B;
    margin-bottom: 4px;
}

.qf-st-cd-item strong {
    display: block;
    font-size: 1.05rem;
    color: #012C44;
    line-height: 1.35;
}

.qf-st-highlight {
    color: #55C83A !important;
}

.qf-st-cd-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

/* Estimator CTA: teal #00B9BC surface with a white label on request, inverting
   to a deep navy surface on hover (white label, 14.5:1). A navy 12% hairline
   holds the shape against near-white page backgrounds. */
.qf-st-calc-display #st-res-cta {
    background-color: #00B9BC;
    color: #FFFFFF;
    font-weight: 800;
    border: 1px solid rgba(1, 44, 68, 0.12);
    box-shadow: 0 6px 18px rgba(0, 185, 188, 0.28);
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}

.qf-st-calc-display #st-res-cta:hover,
.qf-st-calc-display #st-res-cta:focus-visible {
    background-color: #012C44;
    color: #FFFFFF;
    border-color: #012C44;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(1, 44, 68, 0.34);
}

.qf-st-cd-note {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-grow: 1;
}

.qf-st-note-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.qf-st-cd-note p {
    font-size: 0.8125rem;
    color: #475569;
    line-height: 1.5;
    margin: 0;
}

/* 8. Reverse Engineering Section */
.qf-st-reverse-sec {
    padding: 96px 0;
    background-color: #FFFFFF;
}

.qf-st-reverse-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
    align-items: center;
}

.qf-st-rev-steps {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 32px;
}

.qf-st-rs-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.qf-st-rs-num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #012C44;
    color: #D4FF00;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
}

.qf-st-rs-item strong {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 4px;
}

.qf-st-rs-item p {
    font-size: 0.875rem;
    line-height: 1.55;
    color: #64748B;
    margin: 0;
}

.qf-st-rv-frame {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.08);
}

.qf-st-rv-frame img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s ease;
}

.qf-st-rv-frame:hover img {
    transform: scale(1.03);
}

.qf-st-rv-card {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: rgba(1, 44, 68, 0.94);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 16px 20px;
    color: #FFFFFF;
}

.qf-st-rv-card strong {
    display: block;
    font-size: 0.9375rem;
    color: #D4FF00;
    margin-bottom: 4px;
}

.qf-st-rv-card p {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.45;
    margin: 0;
}

/* 9. Closing Action CTA Banner */
.qf-st-cta-sec {
    padding: 96px 0;
    background-color: #F8FAFB;
}

/* Closing CTA band: Brand Green surface. The title stays white (on request);
   eyebrow, lead and the guarantee list carry deep navy, which reads 6.6:1 on
   #55C83A where white would only reach 2.2:1. */
.qf-st-cta-card {
    background: #55C83A;
    border-radius: 24px;
    padding: 64px 48px;
    text-align: center;
    color: #012C44;
    box-shadow: 0 20px 50px rgba(1, 44, 68, 0.2);
    position: relative;
    overflow: hidden;
}

.qf-st-cta-card::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.14) 0%, transparent 60%);
    pointer-events: none;
}

.qf-st-cta-content {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
}

/* The shared .qf-eyebrow--dark is white; on the green band it turns navy. */
.qf-st-cta-card .qf-eyebrow--dark {
    color: #012C44;
}

.qf-st-cta-title {
    font-size: clamp(2rem, 3.8vw, 2.8rem);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.2;
    margin: 16px 0 20px 0;
}

.qf-st-cta-lead {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #012C44;
    margin-bottom: 36px;
}

.qf-st-cta-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 32px;
}

/* Lime primary (navy label, 13:1) lifting to a white surface on hover. */
.qf-st-cta-actions .qf-btn--primary {
    background: #D4FF00;
    color: #012C44;
    font-weight: 800;
    border: 2px solid rgba(1, 44, 68, 0.14);
    box-shadow: 0 8px 20px rgba(1, 44, 68, 0.18);
}

.qf-st-cta-actions .qf-btn--primary:hover,
.qf-st-cta-actions .qf-btn--primary:focus-visible {
    background: #FFFFFF;
    color: #012C44;
    border-color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(1, 44, 68, 0.26);
}

/* White secondary (navy label) inverting to a deep navy surface on hover. */
.qf-st-cta-actions .qf-btn--outline {
    background: #FFFFFF;
    color: #012C44;
    border: 2px solid #FFFFFF;
    font-weight: 700;
}

.qf-st-cta-actions .qf-btn--outline:hover,
.qf-st-cta-actions .qf-btn--outline:focus-visible {
    background: #012C44;
    color: #FFFFFF;
    border-color: #012C44;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(1, 44, 68, 0.3);
}

.qf-st-cta-guarantees {
    display: flex;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
    font-size: 0.84rem;
    color: #012C44;
}

.qf-st-cta-guarantees span {
    display: flex;
    align-items: center;
    gap: 6px;
}



/* Responsive Media Queries */
@media (max-width: 1024px) {
    .qf-st-hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .qf-st-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .qf-st-stat-card {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        padding-bottom: 20px;
    }
    .qf-st-stat-card:nth-last-child(-n+2) {
        border-bottom: none;
        padding-bottom: 0;
    }
    .qf-st-comp-grid {
        grid-template-columns: 1fr;
    }
    .qf-st-steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .qf-st-guide-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .qf-st-cd-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .qf-st-reverse-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .qf-st-hero {
        padding: 60px 0 40px;
    }
    .qf-st-hero-chips {
        grid-template-columns: 1fr;
    }
    .qf-st-steps-grid {
        grid-template-columns: 1fr;
    }
    .qf-st-guide-grid {
        grid-template-columns: 1fr;
    }
    .qf-st-calc-inputs {
        grid-template-columns: 1fr;
    }
    .qf-st-cd-grid {
        grid-template-columns: 1fr;
    }
    .qf-st-cd-footer {
        flex-direction: column;
        align-items: stretch;
    }
    .qf-st-cta-card {
        padding: 40px 24px;
    }
    .qf-st-cta-actions {
        flex-direction: column;
    }
    .qf-st-cta-guarantees {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }
}


/* ==========================================================================
   ABOUT PAGE — SIGNAL LIME ACCENTS & NAVY CTA HOVER
   ========================================================================== */

/* 1. HERO: "Explore Our Manufacturing" pill -> signal lime #D4FF00 (navy label) */
.qf-t-hero-btns .qf-btn-t-primary {
    background: #D4FF00;
    color: #012C44;
}

.qf-t-hero-btns .qf-btn-t-primary:hover,
.qf-t-hero-btns .qf-btn-t-primary:focus-visible {
    background: #FFFFFF;
    color: #012C44;
    border-color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(1, 44, 68, 0.26);
    outline: none;
}

/* HERO: "Discuss Your Project" pill -> white, hover Brand Green.
   .qf-btn-t-navy is used only by this About hero button, so the rule is scoped
   to .qf-t-hero-btns and the shared pill definition stays untouched; the
   <=640px full-width rule on .qf-btn-t-navy still applies. The hover label is
   navy, not white: on #55C83A white is about 2.2:1 while navy is about 6.7:1,
   and DESIGN(20260921-052233).md 99/104 pairs a Brand Green surface with dark
   type. Swap the colour to #FFFFFF if the white-label pill look is preferred. */
.qf-t-hero-btns .qf-btn-t-navy {
    background: #FFFFFF;
    color: #012C44;
    border-color: #FFFFFF;
}

.qf-t-hero-btns .qf-btn-t-navy:hover,
.qf-t-hero-btns .qf-btn-t-navy:focus-visible {
    background: #55C83A;
    color: #012C44;
    border-color: #55C83A;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(85, 200, 58, 0.34);
    outline: none;
}

/* 2. OUR VALUES: item 2 (Integrity) is a signal-lime panel with navy type */
.qf-t-val-item.is-signal .qf-t-val-overlay {
    background: rgba(1, 44, 68, 0.10);
}

.qf-t-val-item.is-signal.is-active .qf-t-val-overlay {
    background: rgba(1, 44, 68, 0.16);
}

.qf-t-val-item.is-signal .qf-t-val-tab-title {
    color: #012C44;
    text-shadow: none;
}

.qf-t-val-item.is-signal .qf-t-val-num {
    background: #012C44;
    color: #D4FF00;
}

.qf-t-val-item.is-signal .qf-t-val-tag {
    color: #0D4B3E;
}

.qf-t-val-item.is-signal .qf-t-val-heading {
    color: #012C44;
}

.qf-t-val-item.is-signal .qf-t-val-body {
    color: rgba(1, 44, 68, 0.86);
}

.qf-t-val-item.is-signal .qf-t-val-points li {
    color: #012C44;
}

.qf-t-val-item.is-signal .qf-t-val-check {
    background: #012C44;
    color: #D4FF00;
}

.qf-t-val-item.is-signal:focus-visible {
    box-shadow: 0 0 0 3px #012C44, 0 12px 36px rgba(1, 44, 68, 0.16);
}

/* 3. TOGETHER WE GROW FOR CHANGE: "100% Recyclable PP" disc -> signal lime */
.qf-commit-circle-inner {
    background: #D4FF00;
    color: #012C44;
}

/* 4. JOIN CTA: "Let's talk" hover -> deep navy with lime label */
.qf-join-actions .qf-btn-signal--large:hover,
.qf-join-actions .qf-btn-signal--large:focus-visible {
    background: #012C44;
    color: #D4FF00;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(1, 44, 68, 0.32);
    outline: none;
}


/* ==========================================================================
   ABOUT PAGE — KEY FACTORY METRICS STRIP ON BRAND GREEN
   DESIGN(20260921-052233).md: Brand Green #55C83A is the first brand colour and
   may carry a full block background (line 104); text on it is Deep Green #0D4B3E
   or Ink #15211E (line 99), never white or lime.
   OWNER OVERRIDE 2026-09-29: on this strip the four figures (2001, 1.2 Million,
   36+, 100%) keep their dark colour and every other line is white, so the rule
   above no longer governs this one block. Readability cost, measured: white on
   #55C83A is about 2.2:1, under WCAG AA for the 0.72rem label and the 0.86rem
   detail; the figures themselves stay near 7:1 on Ink. Darkening the band green
   is the one-line fix if the small lines turn out hard to read in print.
   ========================================================================== */

.qf-tama-metrics {
    background: #55C83A;
    border-color: #55C83A;
    box-shadow: 0 18px 42px rgba(13, 75, 62, 0.20);
}

/* Column dividers: a quiet Deep Green hairline reads better than the old light gray. */
.qf-t-metric-item:not(:last-child)::after {
    background: rgba(13, 75, 62, 0.22);
}

/* Eyebrow label (SINCE, ANNUAL OUTPUT, ...) */
.qf-t-metric-tag {
    color: #FFFFFF;
}

/* Key figure: Ink holds the strongest weight on Brand Green, and stays dark. */
.qf-t-metric-val strong {
    color: #15211E;
}

/* Unit and plus sign belong to the figure line, so they stay dark with it. */
.qf-t-metric-unit,
.qf-t-metric-plus {
    color: #0D4B3E;
}

.qf-t-metric-name {
    color: #FFFFFF;
}

.qf-t-metric-detail {
    color: #FFFFFF;
}


/* ==========================================================================
   ABOUT PAGE — OUR VALUES, ITEM 2 (INTEGRITY) ON SIGNAL LIME
   Item 2's lime surface used to come only from its photograph, so while the
   image loaded (or if it could not be fetched) the panel fell back to the navy
   item background with dark type on it and the text disappeared. The surface is
   now declared here, and the scrims are lime veils so dark type always sits on
   a light surface, photograph or not. DESIGN.md 2.4: a Signal Lime surface
   pairs with Deep Green / dark type, never white.
   ========================================================================== */

.qf-t-val-item.is-signal {
    background: #D4FF00;
}

.qf-t-val-item.is-signal .qf-t-val-overlay {
    background: rgba(212, 255, 0, 0.10);
}

.qf-t-val-item.is-signal.is-active .qf-t-val-overlay {
    background: rgba(212, 255, 0, 0.90);
}

/* Solid navy instead of a translucent one: the body copy now clears AA on lime. */
.qf-t-val-item.is-signal .qf-t-val-body {
    color: #012C44;
}


/* ==========================================================================
   CONTACT PAGE — SIGNAL LIME / TEAL ACCENTS & LEANER ENQUIRY FORM
   ========================================================================== */

/* 1. HERO EYEBROW: "Direct Factory Channel · Est. 2001" on a white chip.
   The hero band is pale sage (#EAF0E8), so the white chip separates the line
   from the band. The copy is navy #012C44 rather than signal lime because
   lime on white is about 1.2:1 and cannot be read; the lime survives as the
   dot in front of the words (drop the ::before rule for plain navy text).
   Scoped to this hero. */
.qf-contact-hero-copy .qf-eyebrow--lime {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background-color: #FFFFFF;
    color: #012C44;
    padding: 7px 15px;
    border-radius: 999px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(1, 44, 68, 0.08);
}

.qf-contact-hero-copy .qf-eyebrow--lime::before {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--signal);
}

/* 2. HERO CTA: "Request a Quote" in signal lime, hovering to teal #00B9BC.
   Scoped to the contact hero so the shared .qf-btn--primary is untouched. */
.qf-contact-hero-actions .qf-btn--primary {
    background-color: var(--signal);
    border-color: var(--signal);
    color: #012C44;
}

.qf-contact-hero-actions .qf-btn--primary:hover,
.qf-contact-hero-actions .qf-btn--primary:focus-visible {
    background-color: var(--deep);
    border-color: var(--deep);
    color: #012C44;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 185, 188, 0.32);
    outline: none;
}

/* 3. LEANER FORM: the opening line states what is actually required. */
.qf-form-note {
    margin: 1.5rem 0 0;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--qf-muted);
}

/* The optional technical fields sit behind a native <details> disclosure, so
   the form reads as five required fields plus an attachment. Closed by
   default; browsers do the toggling and it works without JavaScript. */
.qf-form-details {
    grid-column: 1 / -1;
    margin: .25rem 0 0;
    border: 1px solid var(--qf-line);
    border-radius: 10px;
    background-color: #FFFFFF;
    overflow: hidden;
}

.qf-form-details-summary {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
    transition: background-color var(--qf-transition);
}

.qf-form-details-summary::-webkit-details-marker {
    display: none;
}

.qf-form-details-summary:hover {
    background-color: rgba(1, 44, 68, 0.04);
}

.qf-form-details-summary:focus-visible {
    outline: 2px solid var(--qf-deep-green);
    outline-offset: -2px;
}

.qf-form-details-title {
    font-size: .9rem;
    font-weight: 700;
    color: #012C44;
    position: relative;
    padding-left: 22px;
}

/* The + / − marker, drawn in CSS so no icon font is needed. */
.qf-form-details-title::before {
    content: "+";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--signal);
    color: #012C44;
    font-size: .78rem;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
}

.qf-form-details[open] .qf-form-details-title::before {
    content: "-";
}

.qf-form-details-hint {
    font-size: .78rem;
    color: var(--qf-muted);
    padding-left: 22px;
}

.qf-form-details-body {
    margin: 0;
    padding: 4px 18px 18px;
}