/* ============================================================================
   ASYMCHEM BRAND LAYER — hand-authored, loaded AFTER css/asymchem.css.
   asymchem.css is REGENERATED by site-factory/generate-identity.js, so nothing
   here may live in that file (site-factory/SCAFFOLD-RUNBOOK.md §2 / §9.3).

   Direction: the real Asymchem mark is an open navy hexagon "C" beside a wide,
   squared industrial wordmark, printed in deep navy #040348 over near-black ink
   #231815 on white. So the site is built as a CDMO datasheet: near-neutral cool
   white grounds, navy structure lines, square corners, mono micro-labels, and a
   hexagon motif that repeats the mark. No decorative colour beyond the brand
   navy and one teal data accent.

   Contrast rule followed throughout (§9.4): tokens are only ever DARKENED on
   light grounds; nothing here changes a colour that renders on the footer ink
   ground, the sale ribbon, or a photo scrim.
   ============================================================================ */

:root {
    /* ---- Neutral correction -------------------------------------------------
       The generated ramp tints every neutral with the primary's hue at 28%
       saturation. On a hue-241 primary that reads lavender, which fights the
       brand's white/navy/ink palette. Pull the light end back to a near-neutral
       cool grey; the dark end keeps a trace of navy so ink still feels branded. */
    --white: #ffffff;
    --paper: #f2f3f6;
    --porcelain: #fafbfc;
    --gray-50: #f4f5f8;
    --gray-100: #e8e9ef;
    --gray-200: #d5d7e0;
    --gray-300: #adb0c0;
    --gray-400: #70738a;
    --gray-500: #4a4d62;
    --gray-600: #363950;
    --gray-700: #26283b;
    --gray-800: #191b2b;
    --gray-900: #121320;
    --ink: #121320;
    --surface-elevated: #fafbfc;
    --surface-sunken: #eceef3;
    --border-subtle: rgba(18, 19, 32, 0.10);
    --border-default: rgba(18, 19, 32, 0.17);
    --hairline: 1px solid rgba(18, 19, 32, 0.12);
    --grid-line: rgba(4, 3, 72, 0.05);

    /* Brand-specific extras used by the rules below. */
    --asy-navy: #040348;
    --asy-navy-2: #14136b;
    --asy-inkbrown: #231815;   /* the wordmark ink in the real logo */
    --asy-teal: #0e7c86;
    --asy-rule: 2px solid #040348;
}

/* ---- Header ---------------------------------------------------------------
   Real horizontal lockup instead of a 36px square crop nobody can read, with
   the legal name and the 凯 seal as a quiet second line. */
.asy-logo { gap: 14px; align-items: center; }
.asy-logo .asy-logo-mark {
    width: auto; height: 34px; max-width: 190px;
    border-radius: 0; box-shadow: none; object-fit: contain;
}
.asy-logo-seal {
    display: inline-flex; align-items: center;
    padding-left: 12px; border-left: 1px solid var(--border-default);
    align-self: stretch;
}
/* global.css paints .cn-seal vermillion — right for the fleet's invented brands,
   wrong beside a two-colour navy/ink lockup. Navy outline instead. */
.asy-logo-seal .cn-seal {
    background: transparent; color: var(--asy-navy);
    border: 1px solid rgba(4, 3, 72, 0.45); border-radius: 2px;
    width: 26px; height: 26px; font-size: 0.66rem; transform: none;
}
.header { border-bottom: var(--asy-rule); }

/* Below 1200px the nav needs the room the sub-lockup was using — the header is
   flex-nowrap, so anything that does not shrink pushes Cart off-screen
   (the QST header incident). Drop the sub-lockup rather than let it push. */
@media (max-width: 900px) {
    .asy-logo .asy-logo-mark { height: 26px; }
}
/* Phone: the wordmark alone. The seal + its rule cost ~40px, which is exactly
   what pushed the hamburger past the viewport edge at 390px. */
@media (max-width: 560px) {
    .asy-logo { gap: 0; }
    .asy-logo .asy-logo-mark { height: 22px; }
    .asy-logo-seal { display: none; }
}

/* ---- Squared geometry -----------------------------------------------------
   The mark is drawn from straight segments; nothing in the chrome should be
   rounder than 3px. */
.btn, .btn-primary, .btn-secondary, .btn-outline,
input[type="text"], input[type="email"], input[type="search"], input[type="tel"],
select, textarea,
.product-card, .trending-card, .review-card, .faq-item, .info-card,
.stat-card, .contact-card, .lab-card, .payment-card {
    border-radius: 2px;
}
.btn, .btn-primary, .btn-secondary, .btn-outline {
    letter-spacing: 0.02em;
}

/* ---- Hexagon section motif ------------------------------------------------
   A small open hexagon before every section heading, echoing the mark. Drawn
   with clip-path so it costs no asset and inherits currentColor. */
.section-heading::before {
    content: "";
    display: inline-block;
    width: 0.62em; height: 0.70em;
    margin-right: 0.5em;
    vertical-align: baseline;
    background: var(--asy-navy);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    opacity: 0.9;
}

/* ---- Spec strip -----------------------------------------------------------
   Four mono facts under the hero, the way a CDMO prints capability figures. */
.asy-specs-wrap { background: var(--porcelain); }
.asy-specs {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--porcelain);
}
.asy-spec {
    padding: 18px 20px;
    border-right: 1px solid var(--border-subtle);
}
.asy-spec:last-child { border-right: 0; }
.asy-spec dt {
    font-family: var(--font-mono);
    font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--gray-600); margin: 0 0 6px;
}
.asy-spec dd {
    margin: 0; font-family: var(--font-display); font-weight: 800;
    font-size: 1.32rem; color: var(--asy-navy); line-height: 1.1;
}
.asy-spec dd span { font-size: 0.8rem; font-weight: 600; color: var(--gray-600); }
@media (max-width: 860px) {
    .asy-specs { grid-template-columns: repeat(2, 1fr); }
    .asy-spec:nth-child(2) { border-right: 0; }
    .asy-spec:nth-child(1), .asy-spec:nth-child(2) { border-bottom: 1px solid var(--border-subtle); }
}

/* ---- Capability band ------------------------------------------------------ */
.asy-band { background: var(--paper); border-top: 1px solid var(--border-subtle); }
.asy-cap-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    background: var(--border-subtle);
    border: 1px solid var(--border-subtle);
}
.asy-cap {
    background: var(--white); padding: 26px 24px;
}
.asy-cap h3 {
    font-family: var(--font-display); font-size: 1.02rem; font-weight: 700;
    color: var(--ink); margin: 0 0 8px; letter-spacing: -0.01em;
}
.asy-cap p { margin: 0; color: var(--gray-600); font-size: 0.9rem; line-height: 1.6; }
.asy-cap .asy-cap-no {
    font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em;
    color: var(--asy-teal); display: block; margin-bottom: 10px;
}
@media (max-width: 860px) { .asy-cap-grid { grid-template-columns: 1fr; } }

/* ---- Trending / product cards --------------------------------------------- */
.trending-card, .product-card {
    border: 1px solid var(--border-subtle);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.trending-card:hover, .product-card:hover {
    border-color: var(--asy-navy);
    box-shadow: 0 6px 18px -12px rgba(4, 3, 72, 0.45);
}

/* ---- Buttons --------------------------------------------------------------- */
.btn-primary { background: var(--asy-navy); border-color: var(--asy-navy); }
.btn-primary:hover { background: var(--asy-navy-2); border-color: var(--asy-navy-2); }
.btn-outline, .btn-secondary { border-color: var(--border-default); color: var(--ink); }
.btn-outline:hover, .btn-secondary:hover { border-color: var(--asy-navy); color: var(--asy-navy); }

/* ---- Links ----------------------------------------------------------------- */
a { color: var(--asy-navy); }
a:hover { color: var(--asy-navy-2); }
.footer a, .footer a:hover { color: inherit; }   /* footer sits on the ink ground */

/* ---- Tables / data --------------------------------------------------------- */
.pricelist-table th, .data-table th {
    font-family: var(--font-mono); font-size: 0.64rem;
    letter-spacing: 0.14em; text-transform: uppercase;
}

/* ---- Dark-ground contrast floor -------------------------------------------
   §9.4: the neutral correction above is keyed on the HEX, but readability is
   keyed on the GROUND. Three surfaces in this template are near-black — the
   flash bar, the footer and the photo scrims — so every token that landed on
   them had to be re-checked, not assumed. Measured with
   site-factory/contrast-audit.js; all of these now clear 4.5:1 on #121320.

   The same applies to --primary-lighter (#2623c1): it is a legible link colour
   on white and 1.84:1 on the flash bar, because this brand's primary is a very
   dark navy. On dark grounds the accent has to be light, not "lighter primary". */
.site-flash, .site-flash * { color: #e8e9f5; }
.site-flash strong, .site-flash b { color: #ffffff; }
.site-flash em, .site-flash i { color: #b9bce8; }
.site-flash a { color: #ffffff; text-decoration-color: rgba(255, 255, 255, 0.5); }

.footer h4, .footer h3, .footer .footer-heading { color: #d3d6e2; }
.footer p, .footer small, .footer li, .footer span, .footer address { color: #b6bacb; }
.footer a { color: #d3d6e2; }
.footer a:hover { color: #ffffff; }

/* Photo scrims and the trust bar sit on dark grounds for the same reason. */
.lab-video-label, .about-mfg-video-label, .about-trust-label { color: #eef0f6; }

/* ---- Mobile: type floor + tap targets -------------------------------------
   site-factory/mobile-audit.js enforces 11px minimum type and 44px tap
   targets at 390x844. The mono micro-labels are 0.62–0.68rem, which is right
   on a 1440 desktop and below the floor on a phone, so they step up rather
   than shrink with the layout. */
@media (max-width: 560px) {
    .asy-eyebrow { font-size: 0.76rem; }
    .asy-spec dt, .asy-cap .asy-cap-no { font-size: 0.72rem; }
    .asy-spec dd { font-size: 1.2rem; }
    /* The verified-vendor link in the hero trust row is a real tap target. */
    .hero-trust-item a {
        display: inline-flex; align-items: center;
        min-height: 44px; padding: 2px 0;
    }
    /* §9.5: the fixed messenger FABs form a ~100px column at the right edge,
       ~87% down the viewport — which on a 390x844 phone lands exactly on the
       hero trust row and cut words out of it. Both audits are blind to
       occlusion, so the row reserves that gutter and stacks instead. */
    .hero-trust-row {
        flex-direction: column; align-items: flex-start; gap: 2px;
        padding-right: 168px;
    }
}

/* ---- Footer lockup ---------------------------------------------------------
   The footer is the ink ground, so it takes the WHITE original from the brand
   folder rather than the square white-background JPEG (which rendered as a
   white tile on black). Both files are the vendor's own artwork, unaltered. */
.footer-logo { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.footer-logo .asy-footer-mark {
    width: auto; height: 30px; max-width: 190px;
    border-radius: 0; object-fit: contain; margin-right: 0;
}
.asy-footer-seal .cn-seal {
    background: transparent; color: #d3d6e2;
    border: 1px solid rgba(211, 214, 226, 0.5); border-radius: 2px;
    width: 24px; height: 24px; font-size: 0.62rem; transform: none;
}

/* ============================================================================
   HERO — rebuilt 2026-08-21
   The template hero is a headline beside a promo card. This one is built as a
   CDMO datasheet masthead and carries the page's argument, in order:
     eyebrow -> headline -> standfirst -> actions -> EVIDENCE -> assurances,
   with the offer panel alongside and the capability band closing it off, so the
   whole thing reads as one composed unit instead of three stacked strips.

   Two rules held throughout:
   - The hero is the LCP element, so nothing here animates and nothing here waits
     on JS. The template's fadeInUp on every hero child is switched OFF below:
     entrance animation on the LCP element delays first paint, and with JS off
     its `both` fill-mode can leave the hero invisible.
   - Type is fluid via clamp() so a phone gets a real layout rather than a
     shrunken desktop one, and never drops under the 11px mobile-audit floor.
   ============================================================================ */

.asy-hero {
    /* Flat ground plus a faint hexagon field, replacing the radial jade wash. */
    background: var(--white);
    border-bottom: 1px solid var(--border-subtle);
    padding: clamp(2.25rem, 5.5vw, 4.25rem) 0 0;
    overflow: hidden;
    position: relative;
}
.asy-hero::before {
    /* The mark's geometry as a background field: two thin diagonal grids that
       read as a hexagon lattice at low opacity. Pure CSS, no asset, no motion. */
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(60deg, var(--grid-line) 1px, transparent 1px),
        linear-gradient(-60deg, var(--grid-line) 1px, transparent 1px);
    background-size: 44px 76px;
    opacity: 0.85;
    pointer-events: none;
}
.asy-hero .container { position: relative; z-index: 1; }

/* Asymmetric split: the argument gets the room, the offer panel is the sidebar. */
.asy-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.75rem, 4vw, 3.25rem);
    align-items: start;
    padding-bottom: clamp(1.75rem, 4vw, 3rem);
}
@media (min-width: 900px) {
    .asy-hero-grid { grid-template-columns: minmax(0, 1.32fr) minmax(320px, 0.9fr); }
}

/* ---- Left column ---------------------------------------------------------- */
.asy-hero-left { position: relative; min-width: 0; }
.asy-hero-rule {
    position: absolute; left: -22px; top: 8px; bottom: 8px;
    width: 3px; background: var(--asy-navy); opacity: 0.9;
}
@media (max-width: 1100px) { .asy-hero-rule { display: none; } }

/* The template animates every hero child in. Off - see the header comment. */
.asy-hero .hero-eyebrow,
.asy-hero .hero-title,
.asy-hero .hero-subtitle,
.asy-hero .hero-cta,
.asy-hero .hero-trust-row,
.asy-hero .deal-card { animation: none; }

.asy-hero .asy-eyebrow {
    background: transparent; border: 0; box-shadow: none; padding: 0;
    margin-bottom: clamp(0.85rem, 2vw, 1.15rem);
    font-family: var(--font-mono);
    font-size: clamp(0.7rem, 1.6vw, 0.74rem);
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--gray-600);
    display: inline-flex; align-items: center; gap: 10px;
}
.asy-hero .asy-eyebrow::after {
    content: ""; width: clamp(28px, 8vw, 54px); height: 1px; background: var(--border-default);
}

.asy-hero-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.15rem, 6.4vw, 3.65rem);
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0 0 clamp(0.85rem, 2.2vw, 1.15rem);
    text-wrap: balance;
}
/* The template sets the emphasis in italic; here it takes brand navy and a low
   rule, so the phrase reads as a claim rather than as decoration. */
.asy-hero-title span {
    color: var(--asy-navy);
    font-style: normal;
    /* Navy on near-black ink is barely a colour change, so the emphasis is
       carried by a teal rule instead — the same accent as the evidence block
       below it, which is what the phrase is pointing at. */
    box-shadow: inset 0 -0.13em 0 rgba(14, 124, 134, 0.28);
}

.asy-hero-sub {
    font-size: clamp(1rem, 2.3vw, 1.08rem);
    line-height: 1.62;
    color: var(--gray-600);
    max-width: 56ch;
    margin: 0 0 clamp(1.35rem, 3vw, 1.9rem);
}
.asy-hero-sub .cn-accent { color: var(--gray-500); }

/* ---- Actions --------------------------------------------------------------
   One dominant action, one outline, one text link - instead of three buttons of
   equal weight where nothing leads. */
.asy-hero-cta {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 0.7rem clamp(0.7rem, 2vw, 1rem);
    margin-bottom: clamp(1.5rem, 3.2vw, 2rem);
}
.asy-hero .asy-cta-primary {
    background: var(--asy-navy); border: 1px solid var(--asy-navy);
    border-radius: 2px; box-shadow: none;
    padding: 0.95rem 1.6rem;
    font-family: var(--font-display); font-weight: 700; letter-spacing: 0.01em;
    font-size: clamp(0.92rem, 2.1vw, 0.96rem);
    min-height: 48px;
    transition: background .15s ease, border-color .15s ease;
}
.asy-hero .asy-cta-primary:hover { background: var(--asy-navy-2); border-color: var(--asy-navy-2); transform: none; box-shadow: none; }
.asy-hero .asy-cta-primary::after { content: none; }   /* kill the template's sheen sweep */
.asy-hero .asy-cta-secondary {
    background: var(--white); color: var(--ink);
    border: 1px solid var(--border-default); border-radius: 2px; box-shadow: none;
    padding: 0.95rem 1.4rem; min-height: 48px;
    font-weight: 600; font-size: clamp(0.92rem, 2.1vw, 0.96rem);
    transition: border-color .15s ease, color .15s ease;
}
.asy-hero .asy-cta-secondary:hover { border-color: var(--asy-navy); color: var(--asy-navy); transform: none; box-shadow: none; }
.asy-cta-text {
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 44px;
    font-family: var(--font-mono);
    font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--gray-600); text-decoration: none;
    border-bottom: 1px solid transparent;
}
.asy-cta-text:hover { color: var(--asy-navy); border-bottom-color: var(--asy-navy); }
.asy-cta-text i { font-size: 0.72em; }

/* ---- Evidence block -------------------------------------------------------
   The claim the rest of the site is built on, stated with a real lot code. */
.asy-evidence {
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--asy-teal);
    background: var(--porcelain);
    padding: clamp(0.85rem, 2.4vw, 1.05rem) clamp(0.95rem, 2.6vw, 1.25rem);
    margin-bottom: clamp(1.15rem, 2.8vw, 1.5rem);
    max-width: 46rem;
}
.asy-evidence-head {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px;
    margin: 0 0 0.6rem;
}
.asy-evidence-kicker {
    font-family: var(--font-mono);
    font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--asy-teal); font-weight: 600;
}
.asy-lot {
    font-family: var(--font-mono); font-size: 0.75rem;
    color: var(--gray-600);
    border: 1px dashed var(--border-default); border-radius: 2px;
    padding: 2px 8px; white-space: nowrap;
}
.asy-lab-list {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 18px;
}
@media (min-width: 620px) { .asy-lab-list { grid-template-columns: repeat(4, minmax(0, auto)); } }
.asy-lab-list li {
    display: flex; align-items: center; gap: 7px;
    font-size: clamp(0.84rem, 2vw, 0.88rem); color: var(--gray-700); font-weight: 600;
    min-width: 0;
}
.asy-lab-list i { color: var(--asy-teal); font-size: 0.72em; flex: 0 0 auto; }

/* ---- Assurance row -------------------------------------------------------- */
.asy-hero-trust { gap: 0.55rem clamp(0.9rem, 2.5vw, 1.5rem); }
.asy-hero-trust .hero-trust-item {
    font-size: clamp(0.82rem, 1.9vw, 0.85rem);
    color: var(--gray-600);
    align-items: flex-start;
}
.asy-hero-trust .hero-trust-item i { color: var(--asy-navy); margin-top: 0.28em; }
.asy-hero-trust .hero-trust-item a { color: var(--gray-600); }
.asy-hero-trust .hero-trust-item a:hover { color: var(--asy-navy); }

/* ---- Offer panel ---------------------------------------------------------- */
.asy-hero-right { min-width: 0; }
.asy-deal-card {
    border: 1px solid var(--border-default);
    border-radius: 2px;
    box-shadow: 0 10px 30px -22px rgba(4, 3, 72, 0.5);
    background: var(--white);
    animation: none;
}
/* NOT sticky: position:sticky opens a stacking context on the card and its
   layout box stopped matching its painted box, so the shipping note under it
   was painted over. A promo panel does not need to follow the scroll. */
.asy-deal-card .deal-card-badge { border-radius: 0; }
.asy-deal-note {
    margin: 0; padding: 0.7rem clamp(0.9rem, 2.5vw, 1.15rem);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--porcelain);
    font-size: 0.8rem; line-height: 1.5; color: var(--gray-600);
}
.asy-deal-note strong { color: var(--asy-navy); font-family: var(--font-mono); font-size: 0.95em; }
.asy-deal-card .deal-tier-value { border-radius: 2px; }
.asy-ship-note {
    display: flex; align-items: flex-start; gap: 9px;
    margin: 0.85rem 0 0;
    font-size: 0.82rem; line-height: 1.5; color: var(--gray-600);
}
.asy-ship-note i { color: var(--asy-navy); margin-top: 0.22em; flex: 0 0 auto; }

/* ---- Capability band (now the hero's closing edge) ------------------------- */
.asy-specs-wrap {
    background: var(--paper);
    border-top: 1px solid var(--border-subtle);
}
.asy-specs { border: 0; background: transparent; }

/* ---- Phone ----------------------------------------------------------------
   Source order already reads correctly; this tunes density and tap targets.
   Nothing here shrinks type below the 11px floor mobile-audit.js enforces. */
@media (max-width: 620px) {
    .asy-hero { padding-top: 1.6rem; }
    /* The trailing rule wraps to its own line once the eyebrow does. */
    .asy-hero .asy-eyebrow::after { display: none; }
    .asy-hero .asy-eyebrow { letter-spacing: 0.12em; }
    .asy-hero-grid { gap: 1.5rem; padding-bottom: 1.5rem; }
    .asy-hero-title { letter-spacing: -0.02em; }
    .asy-hero-sub { max-width: none; }
    /* Full-width, thumb-sized actions in reading order. */
    .asy-hero-cta { flex-direction: column; align-items: stretch; gap: 0.6rem; }
    .asy-hero .asy-cta-primary,
    .asy-hero .asy-cta-secondary { width: 100%; justify-content: center; min-height: 50px; }
    .asy-cta-text { justify-content: flex-start; }
    .asy-evidence-head { gap: 6px 10px; }
    /* §9.5 again: the fixed messenger FABs occupy roughly the right 170px of the
       viewport near its foot, which on a 390px phone lands on the second column
       of the lab list and cut "VendorInvestigate" in half. Both audits are blind
       to occlusion, so the evidence block reserves that gutter and reads as one
       column instead. Same remedy already applied to the assurance row. */
    .asy-lab-list { grid-template-columns: 1fr; gap: 4px; padding-right: 168px; }
    .asy-evidence-head { padding-right: 168px; }
}