/*
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. */
.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 var(--qf-deep-green);
    border-radius: 2px;
    color: var(--qf-deep-green);
    font-weight: 600;
    transition: background-color var(--qf-nav-dur) ease, color var(--qf-nav-dur) ease;
}

.qf-nav-cta .qf-nav-link:hover,
.qf-nav-cta .qf-nav-link:focus {
    background-color: var(--qf-deep-green);
    color: #FFFFFF;
    text-decoration: none;
}

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

/* 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 INTERACTIVE MULTI-STAGE SHOWCASE */
.qf-why-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 22px;
}

.qf-why-stage {
    position: relative;
    min-height: 640px;
    overflow: hidden;
    border-radius: var(--qf-radius-lg);
    background: var(--deep);
    box-shadow: var(--qf-shadow);
}

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

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

.qf-why-stage-copy {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 160px 58px 52px;
    background: linear-gradient(transparent, rgba(0, 185, 188, 0.96));
    color: #FFFFFF;
}

.qf-why-stage-title {
    font-size: clamp(2.4rem, 3.8vw, 4.2rem);
    line-height: 1.05;
    margin: 0 0 16px;
    color: #FFFFFF;
}

.qf-why-stage-text {
    max-width: 700px;
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    margin: 0 0 28px;
}

.qf-why-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.qf-accordion-item {
    overflow: hidden;
    border-radius: 16px;
    background: var(--soft);
    border: 1px solid var(--mist);
    transition: all var(--qf-transition);
}

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

.qf-accordion-trigger {
    display: flex;
    width: 100%;
    min-height: 110px;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px;
    border: 0;
    background: transparent;
    color: var(--deep);
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.qf-plus {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #FFFFFF;
    color: var(--deep);
    font-size: 1.35rem;
    font-weight: 800;
    transition: transform var(--qf-transition);
}

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

.qf-accordion-item.active .qf-accordion-panel {
    max-height: 160px;
    padding: 0 28px 24px;
}

.qf-accordion-panel p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(0, 185, 188, 0.95);
}

/* The expanded item is a navy surface, so its label and copy are white. */
.qf-accordion-item.active .qf-accordion-trigger,
.qf-accordion-item.active .qf-accordion-panel,
.qf-accordion-item.active .qf-accordion-panel p {
    color: #FFFFFF;
}

/* 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;
}

/* 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-grid {
        grid-template-columns: 1fr;
    }
    .qf-why-stage {
        min-height: 500px;
    }
    .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-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: this form carries the teal accent instead of the site-wide
   deep green that the shared .qf-button / .qf-form-button defaults use. */
.qf-clean-form-body .qf-form-button {
    background-color: #00B9BC;
    border-color: #00B9BC;
}

@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
   ========================================================================== */
.qf-about-page {
    background: #FFFFFF;
}

/* 1. Hero Section */
.qf-about-hero {
    position: relative;
    background: #EAF0E8;
    padding: 96px 0 84px;
    color: var(--ink);
    overflow: hidden;
    border-bottom: 1px solid #DCE5D9;
}

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

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

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

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

.qf-about-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    background: #FFFFFF;
    padding: 6px 18px;
    border-radius: 30px;
    border: 1px solid rgba(1, 44, 68, 0.35);
    box-shadow: 0 2px 10px rgba(0, 185, 188, 0.05);
}

.qf-about-hero-badge .qf-badge-dot {
    width: 8px;
    height: 8px;
    background: var(--brand);
    border-radius: 50%;
}

.qf-about-hero-badge .qf-eyebrow {
    margin: 0;
}

.qf-about-hero-title {
    font-size: clamp(2.1rem, 3.8vw, 3.3rem);
    line-height: 1.08;
    color: var(--deep);
    margin: 12px 0 20px;
    letter-spacing: -0.04em;
    font-weight: 800;
}

.qf-about-hero-lead {
    font-size: 1.18rem;
    line-height: 1.68;
    color: #4A5B53;
    margin: 0 0 36px;
    max-width: 800px;
}

.qf-about-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* 2. Key Performance Figures Strip */
.qf-about-stats-bar {
    background: #FFFFFF;
    padding: 44px 0;
    border-bottom: 1px solid var(--mist);
}

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

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

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

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

.qf-stat-card strong {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 3.6vw, 3.2rem);
    font-weight: 800;
    color: var(--deep);
}

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

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

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

/* 3. Dual Base Cards (Yantai & Qingdao) */
.qf-dual-base-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    margin-top: 48px;
}

.qf-base-card {
    background: #FFFFFF;
    border: 1px solid var(--mist);
    border-radius: var(--qf-radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(21, 33, 30, 0.05);
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.qf-base-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 36px rgba(0, 185, 188, 0.1);
    border-color: rgba(1, 44, 68, 0.5);
}

.qf-base-img-box {
    position: relative;
    height: 270px;
    overflow: hidden;
    background: #EAF0E8;
}

.qf-base-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.qf-base-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    background: var(--deep);
    color: var(--signal);
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.qf-base-info {
    padding: 32px 34px 36px;
}

.qf-base-info h3 {
    font-size: 1.55rem;
    color: var(--deep);
    margin: 0 0 6px;
}

.qf-base-company {
    font-size: 0.92rem;
    color: var(--olive);
    font-weight: 600;
    margin: 0 0 16px;
}

.qf-base-desc {
    font-size: 0.96rem;
    color: var(--slate);
    line-height: 1.65;
    margin: 0 0 22px;
}

.qf-base-tags {
    list-style: none;
    margin: 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--mist);
    display: grid;
    gap: 8px;
    font-size: 0.92rem;
    color: var(--ink);
}

.qf-base-tags li span {
    font-weight: 700;
    color: var(--deep);
}

/* 4. Interactive Tabbed Value Architecture */
.qf-about-tabs-section {
    padding: 88px 0;
}

.qf-about-tab-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 48px auto 36px;
    max-width: 1040px;
}

.qf-tab-btn {
    background: #FFFFFF;
    border: 1.5px solid var(--mist);
    border-radius: 12px;
    padding: 16px 20px;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.qf-tab-btn:hover {
    border-color: rgba(1, 44, 68, 0.6);
    background: #F8FAF7;
    transform: translateY(-2px);
}

.qf-tab-btn.active {
    background: var(--deep);
    border-color: var(--deep);
    box-shadow: 0 8px 24px rgba(0, 185, 188, 0.18);
    transform: translateY(-3px);
}

.qf-tab-num {
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--olive);
    transition: color 0.3s ease;
}

.qf-tab-btn.active .qf-tab-num {
    color: var(--signal);
}

.qf-tab-text {
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--ink);
    transition: color 0.3s ease;
}

.qf-tab-btn.active .qf-tab-text {
    color: #FFFFFF;
}

.qf-about-tab-panels {
    max-width: 1100px;
    margin: 0 auto;
}

.qf-tab-panel {
    display: none;
}

.qf-tab-panel.active {
    display: block;
    animation: qfPanelFade 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes qfPanelFade {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.qf-tab-grid {
    background: #FFFFFF;
    border-radius: var(--qf-radius-lg);
    border: 1px solid var(--mist);
    overflow: hidden;
    display: grid;
    grid-template-columns: 50% 50%;
    align-items: stretch;
    box-shadow: 0 10px 32px rgba(21, 33, 30, 0.06);
}

.qf-tab-copy {
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.qf-tab-badge {
    display: inline-block;
    background: #EAF0E8;
    color: var(--deep);
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 4px;
    margin-bottom: 14px;
    align-self: flex-start;
}

.qf-tab-copy h3 {
    font-size: clamp(1.6rem, 2.2vw, 2.1rem);
    line-height: 1.2;
    color: var(--deep);
    margin: 0 0 14px;
}

.qf-tab-copy p {
    font-size: 1rem;
    color: var(--slate);
    line-height: 1.65;
    margin: 0 0 24px;
}

.qf-feature-checklist {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: grid;
    gap: 12px;
    font-size: 0.94rem;
    color: var(--ink);
    line-height: 1.5;
}

.qf-feature-checklist li {
    position: relative;
    padding-left: 24px;
}

.qf-feature-checklist li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--brand);
    font-weight: 900;
}

.qf-feature-checklist strong {
    color: var(--deep);
}

.qf-tab-visual {
    background: #EAF0E8;
    overflow: hidden;
    position: relative;
}

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

.qf-tab-grid:hover .qf-tab-visual img {
    transform: scale(1.04);
}

/* 5. Timeline Section */
.qf-about-timeline-section {
    padding: 88px 0;
}

.qf-timeline-wrap {
    position: relative;
    max-width: 960px;
    margin: 56px auto 0;
}

.qf-timeline-track {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 48px;
    width: 2px;
    background: linear-gradient(to bottom, var(--brand) 0%, rgba(1, 44, 68, 0.2) 100%);
    z-index: 1;
}

.qf-timeline-cards {
    display: grid;
    gap: 36px;
    position: relative;
    z-index: 2;
}

.qf-timeline-card {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

.qf-time-bullet {
    width: 98px;
    height: 44px;
    background: var(--deep);
    color: var(--signal);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.95rem;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(0, 185, 188, 0.16);
    border: 2px solid #FFFFFF;
    transition: transform var(--qf-transition), background-color var(--qf-transition);
}

.qf-timeline-card:hover .qf-time-bullet {
    transform: scale(1.06);
    background: var(--olive);
    color: #FFFFFF;
}

.qf-time-box {
    background: #FFFFFF;
    border: 1px solid var(--mist);
    border-radius: var(--qf-radius);
    padding: 26px 30px;
    flex-grow: 1;
    box-shadow: 0 4px 16px rgba(21, 33, 30, 0.04);
    transition: transform var(--qf-transition), box-shadow var(--qf-transition), border-color var(--qf-transition);
}

.qf-timeline-card:hover .qf-time-box {
    transform: translateX(6px);
    border-color: rgba(1, 44, 68, 0.45);
    box-shadow: 0 8px 24px rgba(0, 185, 188, 0.08);
}

.qf-time-year {
    display: block;
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--olive);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.qf-time-box h3 {
    font-size: 1.35rem;
    color: var(--deep);
    margin: 0 0 10px;
}

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

/* 6. Operational Discipline: Boundary Cards */
.qf-about-boundaries {
    padding: 88px 0;
}

.qf-boundary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    margin-top: 48px;
}

.qf-boundary-card {
    background: #FFFFFF;
    border-radius: var(--qf-radius-lg);
    border: 1px solid var(--mist);
    padding: 40px;
    box-shadow: 0 4px 20px rgba(21, 33, 30, 0.04);
    transition: transform var(--qf-transition), box-shadow var(--qf-transition);
}

.qf-boundary-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(21, 33, 30, 0.08);
}

.qf-boundary-card--focus {
    border-top: 4px solid var(--brand);
}

.qf-boundary-card--boundary {
    border-top: 4px solid #A1A8A3;
}

.qf-boundary-badge {
    display: inline-block;
    background: #EAF0E8;
    color: var(--deep);
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 4px;
    margin-bottom: 12px;
}

.qf-boundary-badge--neutral {
    background: #F1F3F2;
    color: var(--slate);
}

.qf-boundary-head h3 {
    font-size: 1.5rem;
    color: var(--deep);
    margin: 0 0 20px;
}

.qf-boundary-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
    font-size: 0.94rem;
    color: var(--ink);
    line-height: 1.55;
}

.qf-boundary-list strong {
    color: var(--deep);
}

/* 7. Gallery Section */
.qf-about-gallery {
    padding: 88px 0;
}

.qf-gallery-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    grid-template-rows: auto auto;
    gap: 24px;
    margin-top: 48px;
}

.qf-gallery-item {
    position: relative;
    border-radius: var(--qf-radius);
    overflow: hidden;
    background: #EAF0E8;
    box-shadow: 0 6px 20px rgba(21, 33, 30, 0.05);
}

.qf-gallery-item--large {
    grid-row: span 2;
}

.qf-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.qf-gallery-item:hover img {
    transform: scale(1.05);
}

.qf-gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px;
    background: linear-gradient(to top, rgba(0, 185, 188, 0.95) 0%, rgba(0, 185, 188, 0) 100%);
    color: #FFFFFF;
    transition: opacity var(--qf-transition);
}

.qf-gallery-caption strong {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 4px;
    font-family: var(--font-display);
}

.qf-gallery-caption span {
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.85);
}

/* Responsive Overrides for About Page */
@media (max-width: 1080px) {
    .qf-about-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .qf-dual-base-grid,
    .qf-boundary-grid {
        grid-template-columns: 1fr;
    }
    .qf-about-tab-nav {
        grid-template-columns: repeat(2, 1fr);
    }
    .qf-tab-grid {
        grid-template-columns: 1fr;
    }
    .qf-tab-visual {
        height: 320px;
    }
    .qf-gallery-grid {
        grid-template-columns: 1fr;
    }
    .qf-gallery-item--large {
        grid-row: auto;
    }
}

@media (max-width: 640px) {
    .qf-about-hero {
        padding: 60px 0 50px;
    }
    .qf-about-tab-nav {
        grid-template-columns: 1fr;
    }
    .qf-tab-copy {
        padding: 28px 20px;
    }
    .qf-timeline-track {
        left: 20px;
    }
    .qf-timeline-card {
        flex-direction: column;
        gap: 12px;
        padding-left: 48px;
    }
    .qf-time-bullet {
        position: absolute;
        left: 0;
        width: 40px;
        height: 40px;
        font-size: 0.72rem;
        border-radius: 50%;
    }
}

/* ==========================================================================
   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;
}

.qf-export-hero-actions .qf-btn--outline {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.55);
}

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

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

.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: rgba(1, 44, 68, 0.12);
    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;
}
/* 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.76) 0%, rgba(0, 185, 188, 0.54) 52%, rgba(0, 185, 188, 0.3) 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--outline {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.55);
}

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

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

.qf-mfg-table thead {
    background: #FAFCFA;
    border-bottom: 2px solid var(--mist);
}

.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: var(--deep);
    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;
}

/* 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);
}

/* 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;
}

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

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

.qf-path-hero-actions .qf-btn--outline {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.55);
}

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

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

/* 3. The ten-step timeline. The rail is a sibling of the cards and is painted
   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);
}

/* 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;
}

.qf-path-step-title {
    margin: 0 0 10px;
    font-size: 1.35rem;
    line-height: 1.25;
    color: var(--deep);
}

.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. The four written confirmation gates on the soft band. */
.qf-path-gates {
    background: var(--soft);
}

.qf-path-gates-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.qf-path-gate {
    background: #FFFFFF;
    border: 1px solid var(--mist);
    border-radius: 18px;
    padding: 30px 28px;
    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-gate: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-gate-num {
    display: block;
    margin-bottom: 16px;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--olive);
}

.qf-path-gate-title {
    margin: 0 0 12px;
    font-size: 1.15rem;
    line-height: 1.25;
    color: var(--deep);
}

.qf-path-gate-text {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--slate);
}

/* One aside treatment for the whole page: a Signal Lime bar, never body copy.
   The gates section and both split sections are left-aligned, so it is too. */
.qf-path-note {
    max-width: 820px;
    margin: 34px 0 0;
    padding-left: 18px;
    border-left: 3px solid var(--signal);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--slate);
}

/* 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;
}

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

.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: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    padding: 26px 24px;
    transition: background var(--qf-transition), border-color var(--qf-transition);
}

.qf-path-repeat-item:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(212, 255, 0, 0.4);
}

.qf-path-repeat-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--signal);
    color: var(--deep);
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1;
}

.qf-path-repeat-item h3 {
    margin: 0 0 10px;
    font-size: 1.1rem;
    line-height: 1.3;
    color: #FFFFFF;
}

.qf-path-repeat-item p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
}

.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 .qf-cta-title {
    max-width: 620px;
}

.qf-path-cta .qf-cta-sub {
    max-width: 560px;
}

/* 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;
    }
}