/* ══════════════════════════════════════════════════════════════
   BioLifeLab — design layer
   Loaded AFTER main.css.

   Rebuilds the look of biolifelab.net on this platform: white page,
   forest-green section headings, brand-blue interaction colour, black
   pill buttons, borderless square product cards, and no shadows at all
   — the live site computes box-shadow: none on every element.

   Fonts are self-hosted because the CSP is font-src 'self' data:.
   ══════════════════════════════════════════════════════════════ */

/* ─── Typefaces (self-hosted) ─── */

@font-face {
    font-family: 'Roboto';
    src: url('/assets/fonts/roboto-var.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lato';
    src: url('/assets/fonts/lato-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lato';
    src: url('/assets/fonts/lato-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ─── Tokens ─── */

:root {
    /* Roboto for headings, Lato for body — the two families the client's store
       actually loads. It also loads Montserrat and uses it for nothing. */
    --font-sans: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'SF Mono', Monaco, Consolas, monospace;

    /* Palette sampled from the three price sheets the client sent (26/07).
       They are consistent with each other and they separate two things the
       earlier palette had merged:

         · #002058 navy is the STRUCTURAL colour — the wordmark, the footer
           band, the tagline pill, every icon chip. It is the constant.
         · the saturated colours are PER-FAMILY accents, never global:
           Tirzepatide blue, Retatrutide red, peptides orange, blends green,
           vitamins purple. Each sheet swaps the accent and keeps the navy.

       The old --color-primary #4E96FA appears nowhere in the new material; it
       came from the Zyro builder's chrome. Interaction now uses the family blue,
       which is what the client's own Tirzepatide table uses. */
    --color-navy: #002058;
    --color-navy-deep: #001840;

    --color-primary: #004098;           /* Tirzepatide blue — interaction */
    --color-primary-dark: #002F72;
    --color-primary-light: #7CA3DC;
    --color-heading: #002058;           /* structural navy */
    --color-ink: #000000;
    --color-accent: #004098;
    --color-accent-light: #DCE6F5;

    /* Family accents. Only blue and red are in play today — the catalog is all
       Tirzepatide — but the client's sheets price four more families, so the
       set is declared once and picked up by category. */
    --accent-blue:   #004098;
    --accent-red:    #C00810;
    --accent-orange: #E86810;
    --accent-green:  #488828;
    --accent-purple: #602890;
    /* Accessories are supplies rather than a compound family, so they sit
       outside the sheets' colour set — a neutral slate keeps them legible as
       "not a peptide" without inventing a sixth brand colour. */
    --accent-grey:   #5A6470;

    --color-bg: #FFFFFF;
    --color-surface: #F4F4F8;           /* the sheets' paper tone */
    --color-surface-2: #E7E8F0;
    --color-border: #B8C0CC;
    --color-border-strong: #8F99A8;

    --color-text: #1A1A1A;
    --color-text-body: #1D1E20;
    --color-text-muted: #5A6470;
    --color-text-light: #8A929C;

    /* Square everywhere except buttons (full pill) and inputs. */
    --radius: 0px;
    --radius-input: 10px;
    --radius-pill: 999px;

    /* The live site computes box-shadow: none on every element. Stay flat. */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-glow: none;

    --max-width: 1224px;
    --header-height: 93px;

    --transition: 200ms cubic-bezier(.4, 0, .2, 1);
}

body {
    font-family: var(--font-sans);
    background: var(--color-bg);
    color: var(--color-text);
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--color-primary);
}

.section { padding: 4.5rem 0; }

/* ─── Section heading ─── */

.lab-head { margin-bottom: 2.5rem; max-width: 62ch; }
.lab-head--center { margin-left: auto; margin-right: auto; text-align: center; }

.lab-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--color-primary-light);
    margin-bottom: .85rem;
}
.lab-eyebrow::before {
    content: '';
    width: 1.6rem;
    height: 2px;
    border-radius: 2px;
    background: var(--color-accent);
}
.lab-head--center .lab-eyebrow::before { display: none; }

.lab-head__title {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.2;
    margin: 0;
}
.lab-head__sub {
    margin-top: .85rem;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-muted);
}

/* ─── Hero: clean room under diffuse light ─── */

.hero {
    position: relative;
    background:
        radial-gradient(760px 420px at 78% 8%, rgba(157, 202, 225, .30) 0%, rgba(157, 202, 225, 0) 68%),
        linear-gradient(180deg, #F6F8FA 0%, #FFFFFF 78%);
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    padding: 4.5rem 0 4rem;
    overflow: hidden;
}
/* The inherited hero carried the origin site's amino-acid chain watermark. */
.hero::after { display: none; }

.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 3.5rem;
    align-items: center;
}
.hero__content { max-width: 100%; text-align: left; }

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-primary-dark);
    background: rgba(255, 255, 255, .8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: .4rem .95rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
}
.hero__badge::before {
    content: '';
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(110, 173, 208, .25);
}

.hero__title {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 4.2vw, 3.15rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--color-primary);
    max-width: 18ch;
}
.hero__subtitle {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-text-muted);
    max-width: 52ch;
    margin-top: 1.25rem;
}
.hero__actions { margin-top: 2rem; align-items: center; }

/* The hero used to be dark, so its controls were inverted. */
.hero__actions .btn--primary {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}
.hero__actions .btn--primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    box-shadow: var(--shadow-lg);
}
.hero__actions .btn--outline {
    color: var(--color-primary);
    border-color: var(--color-border-strong);
    background: rgba(255, 255, 255, .7);
}
.hero__actions .btn--outline:hover {
    background: #fff;
    border-color: var(--color-primary-light);
}
.hero-search__wrap {
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    padding-left: .5rem;
}
.hero-search__input { color: var(--color-text); }
.hero-search__input::placeholder { color: var(--color-text-light); }
.hero-search__icon { color: var(--color-primary-light); }
.hero-search__btn {
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: #fff;
    padding: .5rem 1.1rem;
    margin: .25rem;
    font-weight: 600;
    font-size: .82rem;
}
.hero-search__btn:hover { background: var(--color-primary-dark); }

/* Bench photograph, floating under the same diffuse light. */
.hero__figure {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255, 255, 255, .8);
    aspect-ratio: 4 / 3;
}
.hero__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 35%;
}
/* Tint the photograph into the palette so it belongs to the brand. */
.hero__figure::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(150deg, rgba(0, 34, 66, .26) 0%, rgba(78, 139, 184, .12) 55%, rgba(157, 202, 225, .05) 100%);
    pointer-events: none;
}
.hero__figure figcaption {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    z-index: 2;
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(0, 34, 66, .55);
    backdrop-filter: blur(6px);
    border-radius: var(--radius-pill);
    padding: .35rem .8rem;
}

/* ─── Capability strip ─── */

.lab-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: -2.25rem;
    position: relative;
    z-index: 3;
}
.lab-strip__card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem 1.35rem;
    box-shadow: var(--shadow-md);
    border-top: 3px solid var(--color-accent);
}
.lab-strip__label {
    display: block;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--color-text-light);
    margin-bottom: .4rem;
}
.lab-strip__value {
    display: block;
    font-size: .98rem;
    font-weight: 600;
    color: var(--color-primary);
    line-height: 1.35;
}

/* ─── Panels ─── */

.lab-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.lab-grid--2 { grid-template-columns: repeat(2, 1fr); }

.lab-panel {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.lab-panel:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
    transform: translateY(-2px);
}
.lab-panel--tinted { background: var(--color-surface); box-shadow: none; }
.lab-panel--tinted:hover { transform: none; box-shadow: var(--shadow-sm); }

.lab-panel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius);
    background: var(--color-surface-2);
    color: var(--color-primary-light);
    margin-bottom: 1.1rem;
}
.lab-panel__icon svg { width: 1.35rem; height: 1.35rem; }

.lab-panel__title {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 .55rem;
}
.lab-panel__body {
    font-size: .92rem;
    line-height: 1.7;
    color: var(--color-text-muted);
    margin: 0;
}

/* ─── Specification table ─── */

.lab-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.lab-table caption {
    caption-side: top;
    text-align: left;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--color-primary-light);
    padding-bottom: .7rem;
}
.lab-table th,
.lab-table td {
    padding: .8rem 1.1rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--color-border);
}
.lab-table tr:last-child th,
.lab-table tr:last-child td { border-bottom: none; }
.lab-table th {
    width: 12rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-primary);
    background: var(--color-surface);
}
/* Measured values stay monospaced — that part is genuinely a lab convention. */
.lab-table td {
    font-family: var(--font-mono);
    font-size: .84rem;
    color: var(--color-text-muted);
}

/* ─── Split section (photo + copy) ─── */

.lab-split {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 3rem;
    align-items: start;
}
.lab-figure {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border);
}
.lab-figure img { width: 100%; height: auto; display: block; }

/* ─── FAQ ─── */

.faq-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    border-top: none;
}
.faq-item {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: none;
    padding: 0 1.25rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.faq-item[open] {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
    background: var(--color-surface);
}
.faq-question {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .98rem;
    color: var(--color-primary);
    padding: 1.1rem 2rem 1.1rem 0;
    position: relative;
    list-style: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
    content: '';
    position: absolute;
    right: .1rem;
    top: 50%;
    width: .55rem;
    height: .55rem;
    border-right: 2px solid var(--color-primary-light);
    border-bottom: 2px solid var(--color-primary-light);
    transform: translateY(-70%) rotate(45deg);
    transition: transform var(--transition);
}
.faq-item[open] .faq-question::after { transform: translateY(-20%) rotate(-135deg); }
.faq-answer {
    padding: 0 0 1.2rem;
    font-size: .92rem;
    line-height: 1.75;
    color: var(--color-text-muted);
    max-width: 74ch;
}

/* ─── Buttons ─── */

.btn {
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-weight: 600;
    padding: .7rem 1.6rem;
    transition: all var(--transition);
}
.btn--primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.btn--primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}
.btn--outline, .btn--secondary {
    background: #fff;
    border: 1px solid var(--color-border-strong);
    color: var(--color-primary);
}
.btn--outline:hover, .btn--secondary:hover { border-color: var(--color-primary-light); }

/* ─── Closing block: the one deep-navy surface on the page ─── */

.cta-section { padding-bottom: 5rem; }
.cta-box {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(620px 320px at 82% 12%, rgba(110, 173, 208, .30) 0%, rgba(110, 173, 208, 0) 70%),
        linear-gradient(135deg, #1A1A1A 0%, #2E2E2E 100%);
    border: none;
    border-radius: var(--radius-lg);
    text-align: left;
    padding: 3rem 3.25rem;
    box-shadow: var(--shadow-lg);
}
.cta-box .lab-eyebrow { color: var(--color-accent-light); }
.cta-box .lab-eyebrow::before { background: var(--color-accent); }
.cta-box h2 { color: #fff; font-size: 1.6rem; }
.cta-box p {
    color: rgba(255, 255, 255, .78);
    max-width: 62ch;
    margin: .75rem 0 1.75rem;
    line-height: 1.7;
}
.cta-box .btn--primary {
    background: #fff;
    color: var(--color-primary);
    border-color: #fff;
}
.cta-box .btn--primary:hover { background: var(--color-accent-light); border-color: var(--color-accent-light); }

/* ─── Sections inherited from the dark theme ─── */

/* .why-section shipped as a navy band (--color-bg-alt #0c1a2a). */
.why-section {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.why-section h2, .why-section h3 { color: var(--color-primary); }
.why-section p { color: var(--color-text-muted); }

/* ─── Cards elsewhere on the site ─── */

.card, .product-card, .category-card, .article-home-card, .contact-info-box {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.product-card:hover, .category-card:hover, .article-home-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
    transform: translateY(-2px);
}

/* ─── Product cards: the vial sits in a pool of diffuse light ─── */

.product-card__image {
    background: radial-gradient(120% 96% at 50% 26%, #FFFFFF 0%, #FAFBFC 52%, #EDF1F5 100%);
    padding: .5rem;
    border-bottom: 1px solid var(--color-border);
}
.product-card__image img { object-fit: contain; }
.product-card:hover .product-card__image img { transform: scale(1.04); }

.product-card__badge {
    top: .7rem;
    left: .7rem;
    background: var(--color-primary);
    color: #fff;
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .12em;
    padding: .25rem .6rem;
    border-radius: var(--radius-pill);
}

.product-card__body { padding: 1.1rem 1.15rem 1.25rem; }
.product-card__category {
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .13em;
    color: var(--color-primary-light);
    margin-bottom: .45rem;
}
.product-card__name {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-primary);
    margin-bottom: .35rem;
}
/* Physical form / purity line — measured detail, so it takes the mono face. */
.product-card__purity {
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .01em;
    color: var(--color-text-light);
}
.product-card__price { font-family: var(--font-display); color: var(--color-primary); }

/* ─── Category cards ─── */

.category-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: var(--radius);
    background: var(--color-surface-2);
    color: var(--color-primary-light);
    margin-bottom: .9rem;
}

/* ─── Prose (about, terms, privacy, shipping, return policy) ─── */

.prose h1 {
    font-size: clamp(1.9rem, 4vw, 2.5rem);
    letter-spacing: -0.025em;
    color: var(--color-primary);
    margin-bottom: 1.25rem;
}
.prose h2 {
    font-size: 1.2rem;
    color: var(--color-primary);
    margin-top: 2.5rem;
    margin-bottom: .75rem;
    padding-left: .85rem;
    border-left: 3px solid var(--color-accent);
}
.prose p, .prose li { max-width: 74ch; line-height: 1.8; color: var(--color-text-muted); }
.prose strong { color: var(--color-text); }
.prose a { color: var(--color-primary-light); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--color-primary); }

/* ══════════════════════════════════════════════════════════════
   Home page — carousel, band rhythm and the non-card components
   that keep six consecutive sections from reading identically
   ══════════════════════════════════════════════════════════════ */

/* ─── Band rhythm ─── */

.section--tinted {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

/* ─── Section heads: three weights, by how commercial the section is ─── */

.lab-head--lg .lab-head__title { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.lab-head--sm { margin-bottom: 1.75rem; }
.lab-head--sm .lab-head__title { font-size: clamp(1.25rem, 2vw, 1.5rem); }

.lab-head--row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    max-width: none;
}
.lab-head__link {
    flex-shrink: 0;
    font-size: .86rem;
    font-weight: 600;
    color: var(--color-primary-light);
    text-decoration: none;
    padding-bottom: .35rem;
    border-bottom: 1px solid transparent;
    transition: color var(--transition), border-color var(--transition);
}
.lab-head__link:hover { color: var(--color-primary); border-bottom-color: var(--color-accent); }

/* ─── Body copy blocks (were inline styles on the page) ─── */

.lab-prose { max-width: 68ch; }
.lab-prose p {
    font-size: .97rem;
    line-height: 1.85;
    color: var(--color-text-muted);
    margin: 0 0 1.1rem;
}
.lab-prose p:last-child { margin-bottom: 0; }

/* ─── Hero carousel ─── */

/* ─── Hero: full-bleed photography, copy over a navy scrim ─── */

.hero--full {
    position: relative;
    padding: 0;
    border-bottom: none;
    background: var(--color-primary);
    overflow: hidden;
}

.hero-slides {
    display: grid;
    /* All slides share one cell so the hero never jumps height between them. */
    grid-template-areas: 'slide';
}
.hero-slide {
    grid-area: slide;
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(520px, 74vh, 720px);
    /* Room for the capability strip that overlaps the bottom edge. */
    padding: 4rem 0 5rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease, visibility .6s;
    pointer-events: none;
}
.hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.hero-slide__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% 50%;
    /* Slow drift: the frame is alive without anything moving under the reader. */
    animation: heroDrift 18s ease-out forwards;
    animation-play-state: paused;
}
.hero-slide.is-active .hero-slide__bg { animation-play-state: running; }

@keyframes heroDrift {
    from { transform: scale(1.06); }
    to   { transform: scale(1); }
}

/* Scrim: opaque navy under the copy, clearing to the right so the photograph
   is still a photograph. */
.hero-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(96deg, rgba(0, 20, 40, .93) 0%, rgba(0, 26, 51, .86) 34%, rgba(0, 34, 66, .55) 66%, rgba(0, 34, 66, .28) 100%),
        linear-gradient(180deg, rgba(0, 34, 66, .35) 0%, rgba(0, 34, 66, 0) 30%, rgba(0, 34, 66, .45) 100%);
}

/* A frame that is already dark needs less scrim, or the subject disappears. */
.hero-slide--dark .hero-slide__bg { filter: brightness(1.22) saturate(1.05); }
.hero-slide--dark::after {
    background:
        linear-gradient(96deg, rgba(0, 20, 40, .86) 0%, rgba(0, 26, 51, .62) 40%, rgba(0, 34, 66, .18) 72%, rgba(0, 34, 66, 0) 100%),
        linear-gradient(180deg, rgba(0, 34, 66, .30) 0%, rgba(0, 34, 66, 0) 34%, rgba(0, 34, 66, .34) 100%);
}

.hero-slide__inner {
    position: relative;
    z-index: 2;
    max-width: var(--max-width);
    width: 100%;
}
.hero-slide__inner > * { max-width: 34rem; }

/* The copy sits on photography now — invert everything the light hero set. */
.hero--full .hero__badge {
    color: #fff;
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .28);
    backdrop-filter: blur(6px);
    box-shadow: none;
}
.hero--full .hero__title {
    color: #fff;
    text-shadow: 0 2px 24px rgba(0, 20, 40, .45);
    margin: 0;
    max-width: 19ch;
    text-wrap: balance;
}
.hero--full h2.hero__title { font-size: clamp(1.9rem, 3.8vw, 2.9rem); }
.hero--full .hero__subtitle { color: rgba(255, 255, 255, .84); }

.hero--full .hero__actions .btn--primary {
    background: #fff;
    color: var(--color-primary);
    border-color: #fff;
    box-shadow: 0 10px 30px rgba(0, 12, 24, .35);
}
.hero--full .hero__actions .btn--primary:hover {
    background: var(--color-accent-light);
    border-color: var(--color-accent-light);
}
.hero--full .hero__actions .btn--outline {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .38);
    color: #fff;
    backdrop-filter: blur(6px);
}
.hero--full .hero__actions .btn--outline:hover {
    background: rgba(255, 255, 255, .18);
    border-color: #fff;
}
.hero--full .hero-search__wrap {
    background: rgba(255, 255, 255, .95);
    border-color: transparent;
    box-shadow: 0 10px 30px rgba(0, 12, 24, .3);
}

/* The carousel still advances for these visitors — there are no controls, so
   stopping it would strand them on slide 1. What goes away is the animation:
   slides cut over instantly and the Ken Burns drift never runs. */
@media (prefers-reduced-motion: reduce) {
    .hero-slide__bg { animation: none; }
    .hero-slide { transition: none; }
}

/* ─── Photographic CTA band ─── */

.cta-band {
    position: relative;
    overflow: hidden;
    background: var(--color-primary);
    padding: 3.75rem 0;
    isolation: isolate;
}
.cta-band__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    opacity: .85;
}
.cta-band::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Opaque under the copy, thinning to the right so the photograph reads. */
    background:
        radial-gradient(680px 340px at 78% 10%, rgba(110, 173, 208, .22) 0%, rgba(110, 173, 208, 0) 70%),
        linear-gradient(100deg, #1D1E20 0%, rgba(29, 30, 32, .94) 38%, rgba(29, 30, 32, .62) 72%, rgba(29, 30, 32, .45) 100%);
}
.cta-band__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
}
.cta-band .lab-eyebrow { color: var(--color-accent-light); }
.cta-band .lab-eyebrow::before { background: var(--color-accent); }
.cta-band__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0;
}
.cta-band__body {
    margin: .85rem 0 0;
    max-width: 56ch;
    font-size: .97rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, .78);
}
.cta-band__actions { display: flex; gap: .75rem; flex-shrink: 0; flex-wrap: wrap; }
.cta-band .btn--primary {
    background: #fff;
    color: var(--color-primary);
    border-color: #fff;
}
.cta-band .btn--primary:hover { background: var(--color-accent-light); border-color: var(--color-accent-light); }
.btn--ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .38);
    color: #fff;
}
.btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

/* ─── Numbered process (replaces a 2×2 of identical cards) ─── */

.lab-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: step;
}
.lab-step {
    margin: 0;
    padding-top: 1.1rem;
    border-top: 2px solid var(--color-border-strong);
    transition: border-color var(--transition);
}
.lab-step:hover { border-top-color: var(--color-accent); }
.lab-step__num {
    display: block;
    font-family: var(--font-mono);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--color-primary-light);
    margin-bottom: .7rem;
}
.lab-step__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 .5rem;
}
.lab-step__body {
    font-size: .89rem;
    line-height: 1.7;
    color: var(--color-text-muted);
    margin: 0;
}

/* ─── Ruled list (replaces a 3×2 of identical cards) ─── */

.lab-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 3rem;
}
.lab-list__item {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--color-border);
}
.lab-list__item:nth-child(-n+3) { border-top: 1px solid var(--color-border); }
.lab-list__item h3 {
    display: flex;
    align-items: baseline;
    gap: .55rem;
    font-size: .98rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 .45rem;
}
.lab-list__item h3::before {
    content: '';
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: var(--color-accent);
    flex-shrink: 0;
}
.lab-list__item p {
    font-size: .89rem;
    line-height: 1.7;
    color: var(--color-text-muted);
    margin: 0;
}

/* ─── Compact reference grid (handling & storage) ─── */

.ref-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.75rem;
    margin: 0;
}
.ref-grid__item { border-left: 2px solid var(--color-border-strong); padding-left: 1.1rem; }
.ref-grid dt {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: .5rem;
}
.ref-grid dd {
    margin: 0;
    font-size: .85rem;
    line-height: 1.7;
    color: var(--color-text-muted);
}

/* FAQ reads as a two-column split: the head holds the left rail so the
   accordion does not leave half the band empty. */
.lab-faq {
    display: grid;
    grid-template-columns: minmax(0, .34fr) minmax(0, .66fr);
    gap: 3.5rem;
    align-items: start;
}
.lab-faq .lab-head { margin-bottom: 0; position: sticky; top: 5rem; }

/* ─── Split variants ─── */

/* The photograph fills its column top to bottom — centring it left 120px of
   dead space above and below the frame. */
.lab-split--reverse {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
}
.lab-split--reverse .lab-figure {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.lab-split--reverse .lab-figure picture {
    flex: 1;
    min-height: 0;
    display: block;
}
.lab-split--reverse .lab-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 55% 50%;
}
.lab-split--even { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }

.lab-figure--tinted { position: relative; }
.lab-figure--tinted::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(150deg, rgba(0, 34, 66, .22) 0%, rgba(78, 139, 184, .10) 60%, rgba(157, 202, 225, .04) 100%);
    pointer-events: none;
}
.lab-figure figcaption {
    padding: .7rem .95rem;
    font-size: .74rem;
    letter-spacing: .02em;
    color: var(--color-text-light);
    background: #fff;
    border-top: 1px solid var(--color-border);
    position: relative;
    z-index: 2;
}

/* ─── Category cards: fill the grid, equal heights ─── */

.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 2rem;
}
.category-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 1.5rem 1.5rem 1.35rem;
}
.category-card__text { margin-top: auto; }
.category-card h3 {
    font-size: 1rem;
    line-height: 1.35;
    color: var(--color-primary);
    margin-bottom: .3rem;
}
.category-card__count {
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--color-text-light);
}
.section--tinted .category-card,
.categories-section .category-card { background: #fff; }

/* ══════════════════════════════════════════════════════════════
   Header — navy identity band + sticky clean-room navigation band
   ══════════════════════════════════════════════════════════════ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background:
        radial-gradient(560px 180px at 88% 0%, rgba(20, 71, 114, .85) 0%, rgba(20, 71, 114, 0) 72%),
        var(--color-primary);
    border-bottom: 1px solid rgba(157, 202, 225, .14);
    box-shadow: 0 1px 0 rgba(0, 34, 66, .06), 0 8px 24px rgba(0, 34, 66, .06);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    height: 68px;
}

/* ─── Navigation, in the band itself ─── */

.site-nav { flex: 1; display: flex; justify-content: center; }
.site-nav__list {
    display: flex;
    align-items: center;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-nav__list a {
    position: relative;
    display: block;
    padding: .35rem 0;
    font-size: .875rem;
    font-weight: 500;
    color: rgba(220, 232, 241, .82);
    text-decoration: none;
    transition: color var(--transition);
}
.site-nav__list a:hover { color: #fff; }
.site-nav__list a.is-active { color: #fff; font-weight: 600; }
.site-nav__list a.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.35rem;
    height: 2px;
    border-radius: 2px;
    background: var(--color-accent);
}

.site-header__logo-icon { height: 40px; }

.site-header__logo-text {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .15em;
    white-space: nowrap;
}
.site-header__logo-sub {
    font-size: .58rem;
    letter-spacing: .36em;
    color: var(--color-accent);
    font-weight: 500;
}

.site-header__actions { gap: .6rem; }

/* Search sits in the band; the suggest dropdown stays bound to the hero input. */
.site-header .site-search {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 190px;
    height: 34px;
    padding: 0 .9rem;
    background: rgba(157, 202, 225, .10);
    border: 1px solid rgba(157, 202, 225, .18);
    border-radius: var(--radius-pill);
    transition: width var(--transition), background var(--transition), border-color var(--transition);
}
.site-header .site-search:focus-within {
    width: 240px;
    background: rgba(157, 202, 225, .16);
    border-color: rgba(157, 202, 225, .45);
}
.site-header .site-search__icon { color: var(--color-accent); flex-shrink: 0; }
.site-header .site-search__input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-sans);
    font-size: .8rem;
    color: #fff;
}
.site-header .site-search__input::placeholder { color: rgba(157, 202, 225, .65); }
.site-header .site-search__input::-webkit-search-cancel-button { display: none; }

.site-header__account,
.site-header__cart {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 34px;
    padding: 0 .9rem;
    border-radius: var(--radius-pill);
    font-size: .82rem;
    font-weight: 500;
    color: #E4EFF7;
    border: 1px solid transparent;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.site-header__account { border-color: rgba(157, 202, 225, .22); }
.site-header__account:hover {
    background: rgba(157, 202, 225, .10);
    border-color: rgba(157, 202, 225, .40);
    color: #fff;
}
.site-header__cart {
    background: rgba(157, 202, 225, .12);
    border-color: rgba(157, 202, 225, .18);
}
.site-header__cart:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary);
}
.site-header__cart-badge {
    background: var(--color-accent);
    color: var(--color-primary);
    top: -4px;
    right: -4px;
    font-family: var(--font-mono);
    font-size: .6rem;
    font-weight: 600;
}
.site-header__cart:hover .site-header__cart-badge {
    background: var(--color-primary);
    color: #fff;
}

/* ─── Mobile menu search ─── */

.mobile-menu__search {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: .75rem 1.25rem .25rem;
    padding: 0 .9rem;
    height: 38px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
}
.mobile-menu__search svg { color: var(--color-primary-light); flex-shrink: 0; }
.mobile-menu__search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-sans);
    font-size: .88rem;
    color: var(--color-text);
}
.mobile-menu__search input::placeholder { color: var(--color-text-light); }

/* ─── Mobile menu (inherited panel, brought onto the palette) ─── */

.mobile-menu__nav a.is-active {
    color: var(--color-primary);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--color-accent);
    background: var(--color-surface);
}

/* ══════════════════════════════════════════════════════════════
   Footer — the closing deep-navy surface (same family as .cta-box)
   ══════════════════════════════════════════════════════════════ */

.site-footer {
    margin-top: 0;
    padding: 0;
    background:
        radial-gradient(720px 340px at 85% 0%, rgba(110, 173, 208, .16) 0%, rgba(110, 173, 208, 0) 70%),
        linear-gradient(180deg, #1D1E20 0%, #131416 100%);
    border-top: 1px solid rgba(157, 202, 225, .16);
    color: rgba(220, 232, 241, .72);
}

.site-footer__top {
    display: grid;
    grid-template-columns: 1.15fr 2fr;
    gap: 4rem;
    padding: 4rem 0 2.75rem;
}

.site-footer__brand { gap: 1.15rem; }
.site-footer__logo img { height: 44px; opacity: 1; }
.site-footer__logo-text {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .15em;
}
.site-footer__logo-sub {
    font-size: .58rem;
    letter-spacing: .36em;
    color: var(--color-accent);
    font-weight: 500;
}

.site-footer .site-footer__tagline {
    font-size: .875rem;
    line-height: 1.75;
    color: rgba(157, 202, 225, .72);
    max-width: 34ch;
}

.site-footer__contact {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-footer__contact li {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
}
.site-footer__contact svg { color: var(--color-accent); flex-shrink: 0; }
.site-footer__contact a {
    font-size: .84rem;
    color: rgba(220, 232, 241, .78);
    text-decoration: none;
    transition: color var(--transition);
}
.site-footer__contact a:hover { color: var(--color-accent-light); }

.site-footer__columns { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }

.site-footer__col h3 {
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .16em;
    color: #fff;
    margin-bottom: 1.15rem;
}
.site-footer__col ul { gap: .65rem; }
.site-footer__col ul a {
    font-size: .86rem;
    color: rgba(220, 232, 241, .66);
    transition: color var(--transition);
}
.site-footer__col ul a:hover { color: var(--color-accent-light); }

.site-footer .site-footer__disclaimer {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    background: rgba(157, 202, 225, .05);
    border: 1px solid rgba(157, 202, 225, .14);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius);
    padding: 1.15rem 1.35rem;
    margin: 0;
}
.site-footer .site-footer__disclaimer svg {
    color: var(--color-accent);
    flex-shrink: 0;
    margin-top: 2px;
}
.site-footer .site-footer__disclaimer p {
    font-size: .78rem;
    line-height: 1.7;
    color: rgba(157, 202, 225, .78);
    margin: 0;
}
.site-footer .site-footer__disclaimer strong { color: #fff; font-weight: 600; }

.site-footer .site-footer__note {
    font-size: .74rem;
    line-height: 1.6;
    color: rgba(157, 202, 225, .52);
    text-align: center;
    margin: 1.25rem 0 0;
}

.site-footer__bottom {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.25rem;
    margin-top: 2.5rem;
    padding: 1.5rem 0 1.75rem;
    border-top: 1px solid rgba(157, 202, 225, .12);
}
.site-footer .site-footer__bottom p {
    font-size: .75rem;
    color: rgba(157, 202, 225, .52);
    margin: 0;
}
.site-footer__badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.site-footer .g-badge {
    background: rgba(157, 202, 225, .07);
    border-color: rgba(157, 202, 225, .18);
    color: rgba(220, 232, 241, .82);
}
.site-footer .g-badge:hover {
    background: rgba(157, 202, 225, .13);
    border-color: rgba(157, 202, 225, .32);
}

.site-footer__payments {
    display: flex;
    gap: .4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-footer__payments li {
    margin: 0;
    padding: .22rem .6rem;
    font-size: .64rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(157, 202, 225, .7);
    background: rgba(157, 202, 225, .07);
    border: 1px solid rgba(157, 202, 225, .16);
    border-radius: var(--radius-pill);
}

.site-footer__powered-by { justify-self: end; }
.site-footer__powered-by a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: rgba(157, 202, 225, .52);
    text-decoration: none;
    font-size: .75rem;
    transition: color var(--transition);
}
.site-footer__powered-by a:hover { color: rgba(157, 202, 225, .8); }
.site-footer__powered-by a > span:first-child { border-bottom: 1px dotted currentColor; }
.site-footer__powered-mark {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: linear-gradient(135deg, #00E5FF 0%, #4FD1FF 100%);
    color: #001218;
    font-weight: 800;
    font-size: 11px;
    line-height: 1;
    box-shadow: 0 0 12px rgba(0, 229, 255, .35);
}

/* ─── WhatsApp floating button (was an inline <style> in footer.php) ─── */

.whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #25D366;
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(0, 34, 66, .28);
    z-index: 9999;
    text-decoration: none;
    transition: transform var(--transition), box-shadow var(--transition);
}
.whatsapp-float:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 12px 30px rgba(0, 34, 66, .34);
}

/* ─── Responsive ─── */

@media (max-width: 980px) {
    .site-nav__list { gap: 1.15rem; }
    .site-search { width: 220px; }
    .site-footer__top { grid-template-columns: 1fr; gap: 2.5rem; }
    .site-footer .site-footer__tagline { max-width: 46ch; }
}

@media (max-width: 768px) {
    /* Navigation and search live in the slide-out menu below this width. */
    .site-header__inner {
        height: 56px;
        gap: .5rem;
        padding: 0 .875rem;
    }
    .site-nav { display: none; }
    .site-header .site-search { display: none; }
    .site-header__logo { flex: 1; min-width: 0; }
    .site-header__logo-icon { height: 32px; }
    .site-header__logo-text { font-size: .85rem; letter-spacing: .1em; }
    .site-header__logo-sub { font-size: .5rem; letter-spacing: .3em; }

    .site-header__actions { gap: .4rem; }
    /* Icon-only controls: the wordmark needs the width more than the labels do. */
    .site-header__account {
        width: 34px;
        padding: 0;
        justify-content: center;
    }
    .site-header__account span { display: none; }
    .site-header__cart { width: 34px; padding: 0; justify-content: center; }

    .site-footer__columns { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
    .site-footer__brand { text-align: left; align-items: flex-start; }
    .site-footer .site-footer__tagline { text-align: left; max-width: 100%; }
    .site-footer__bottom {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 1rem;
    }
    .site-footer__powered-by { justify-self: center; }
}

@media (max-width: 980px) {
    .hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
    .hero__figure { max-width: 520px; }
    .hero-slide__bg { object-position: 66% 50%; }
    .lab-split,
    .lab-split--reverse,
    .lab-split--even { grid-template-columns: 1fr; gap: 2rem; }
    /* Stacked, the figure is its own auto row — a 100% height would collapse it. */
    .lab-split--reverse .lab-figure { height: auto; }
    .lab-split--reverse .lab-figure img { height: auto; aspect-ratio: 4 / 3; }
    .lab-grid { grid-template-columns: repeat(2, 1fr); }
    .lab-strip { grid-template-columns: repeat(2, 1fr); }

    .lab-head--row { flex-direction: column; align-items: flex-start; gap: .75rem; }
    .lab-steps { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
    .lab-list { grid-template-columns: repeat(2, 1fr); gap: 0 2rem; }
    .lab-list__item:nth-child(-n+3) { border-top: none; }
    .lab-list__item:nth-child(-n+2) { border-top: 1px solid var(--color-border); }
    .ref-grid { grid-template-columns: repeat(2, 1fr); }
    .category-grid { grid-template-columns: repeat(2, 1fr); }
    .cta-band__inner { flex-direction: column; align-items: flex-start; gap: 2rem; }
    .lab-faq { grid-template-columns: 1fr; gap: 2rem; }
    .lab-faq .lab-head { position: static; }
}

@media (max-width: 620px) {
    .section { padding: 3rem 0; }
    .lab-grid, .lab-grid--2, .lab-strip { grid-template-columns: 1fr; }
    .lab-strip { margin-top: -1.5rem; }
    .cta-box { padding: 2rem 1.5rem; }
    .lab-table th { width: 9rem; }
    .hero__title { max-width: none; }

    .hero-slide {
        min-height: 460px;
        padding: 3rem 0 4.5rem;
    }
    .hero-slide__inner > * { max-width: 100%; }
    /* Balancing picks the hyphen in "Research-grade" as a break point here. */
    .hero--full .hero__title { text-wrap: normal; }
    /* Vertical scrim on narrow screens — there is no room to clear to the side. */
    .hero-slide::after {
        background:
            linear-gradient(180deg, rgba(0, 20, 40, .70) 0%, rgba(0, 26, 51, .82) 55%, rgba(0, 34, 66, .92) 100%);
    }
    .lab-steps, .ref-grid, .category-grid { grid-template-columns: 1fr; }
    .lab-list { grid-template-columns: 1fr; }
    .lab-list__item:nth-child(-n+2) { border-top: none; }
    .lab-list__item:first-child { border-top: 1px solid var(--color-border); }
    .cta-band { padding: 2.5rem 0; }
    .cta-band__actions { width: 100%; }
    .cta-band__actions .btn { flex: 1; text-align: center; }

    /* The inherited theme centred the whole footer below 480px; keep it left-read. */
    .site-footer__top { padding: 3rem 0 2rem; }
    .site-footer__columns { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; text-align: left; }
    .site-footer__col ul { align-items: flex-start; }
    .site-footer .site-footer__disclaimer {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        padding: 1rem 1.1rem;
    }
    .site-footer__payments { justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════
   BioLifeLab storefront — components mirroring the client's store
   ══════════════════════════════════════════════════════════════ */

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 16px; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

body { font-family: var(--font-sans); color: var(--color-text-body); background: var(--color-bg); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; letter-spacing: normal; text-transform: none; color: var(--color-text); }
a { color: var(--color-text); }
a:hover { color: var(--color-primary); }

/* ─── Section rhythm ─── */
.bll-section { padding: 50px 0; }
.bll-section--tight { padding: 28px 0 50px; }
.bll-heading {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.75rem, 3.4vw, 3rem);
    line-height: 1.3;
    color: var(--color-heading);
    text-align: center;
    margin: 0 0 2rem;
}
.bll-empty { text-align: center; color: var(--color-text-muted); padding: 2rem 0; }

/* ─── Hero / decorative bands: full-bleed image, no overlaid copy ─── */
.bll-hero img, .bll-band img { display: block; width: 100%; height: auto; }
.bll-hero { line-height: 0; }
.bll-band { line-height: 0; margin: 8px 0; }

/* ─── Trust strip ─── */
.bll-trust { padding: 40px 0 8px; }
.bll-trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.bll-trust__item { margin: 0; text-align: center; }
.bll-trust__item img {
    width: 194px; height: 194px; max-width: 100%;
    border-radius: 50%; object-fit: cover; margin: 0 auto;
}
.bll-trust__item figcaption {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.25rem; line-height: 1.3;
    color: var(--color-heading); margin-top: 1rem;
}

/* ─── Product grid: 6 up, stepping down. The client's store jumps 6 → 2 with
       nothing between; the intermediate steps are added here. ─── */
.bll-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px 20px; }
.bll-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1200px) { .bll-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { .bll-grid, .bll-grid--4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .bll-grid, .bll-grid--4 { grid-template-columns: repeat(2, 1fr); gap: 24px; } }

/* ─── Product card: borderless, square, flat ─── */
.bll-card { background: transparent; border: 0; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; }
.bll-card__link { text-decoration: none; color: inherit; display: block; }
.bll-card__image { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--color-surface); }
.bll-card__image img, .bll-card__image picture { width: 100%; height: 100%; object-fit: cover; border-radius: 0; display: block; }
.bll-card__image img { transition: transform 300ms ease; }
.bll-card:hover .bll-card__image img { transform: scale(1.06); }
.bll-card__ribbon {
    position: absolute; top: 0; left: 0; z-index: 2;
    background: #1D1E20; color: #fff;
    font-family: var(--font-sans); font-size: .875rem; font-weight: 400;
    padding: .35rem .75rem; border-radius: 0;
}
.bll-card__title {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.25rem; line-height: 1.2;
    color: var(--color-text); margin: .9rem 0 .45rem;
}
.bll-card__prices { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; font-family: var(--font-sans); font-size: 1rem; }
.bll-card__compare { text-decoration: line-through; color: var(--color-text-muted); }
.bll-card__price { color: var(--color-text-body); }
.bll-card__btn {
    margin-top: .85rem; align-self: flex-start;
    background: transparent; color: var(--color-ink);
    border: 2px solid var(--color-ink); border-radius: var(--radius-pill);
    font-family: var(--font-sans); font-size: 1rem; font-weight: 400;
    padding: 13px 22px; cursor: pointer;
    transition: background 160ms ease, color 160ms ease;
}
.bll-card__btn:hover { background: var(--color-ink); color: #fff; }
.bll-card__btn[disabled] { opacity: .6; cursor: default; }

/* ─── Newsletter band ─── */
.bll-newsletter { position: relative; padding: 84px 0; overflow: hidden; }
.bll-newsletter__bg {
    position: absolute; inset: 0;
    background: linear-gradient(rgba(29,30,32,.70), rgba(29,30,32,.70)), url('/assets/images/home/newsletter-bg.jpg') center/cover no-repeat;
}
.bll-newsletter__inner { position: relative; text-align: center; color: #fff; }
.bll-newsletter h4 {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.3;
    color: #fff; margin: 0 0 1.5rem;
}
.bll-newsletter__form { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.bll-newsletter__form input {
    width: min(503px, 100%); height: 53px;
    padding: 0 16px; font-family: var(--font-sans); font-size: 1rem;
    background: #fff; color: var(--color-text);
    border: 1px solid var(--color-border); border-radius: var(--radius-input);
}
.bll-newsletter__form button {
    height: 51px; min-width: 131px; padding: 0 26px;
    background: var(--color-primary); color: #fff;
    font-family: var(--font-display); font-weight: 700; font-size: 1rem;
    border: 0; border-radius: var(--radius-pill); cursor: pointer;
    transition: background 160ms ease;
}
.bll-newsletter__form button:hover { background: var(--color-primary-dark); }
.bll-newsletter__note { margin: 1rem 0 0; font-size: .95rem; color: rgba(255,255,255,.82); }
.bll-newsletter__msg { margin: .75rem 0 0; font-size: .95rem; color: #fff; }

/* ─── Our journey ─── */
.bll-journey__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.bll-journey__copy .bll-heading { text-align: left; }
.bll-journey__copy p { line-height: 1.75; color: var(--color-text-muted); margin: 0 0 1rem; max-width: 58ch; }
.bll-journey__ruo { font-size: .9rem; color: var(--color-text-light) !important; }
.bll-journey__media { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bll-journey__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; display: block; }
@media (max-width: 900px) {
    .bll-journey__grid { grid-template-columns: 1fr; gap: 32px; }
    .bll-trust__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Header ─── */
.bll-header { background: #fff; border: 0; box-shadow: none; position: relative; z-index: 20; }
.bll-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header-height); padding-top: 25px; padding-bottom: 25px; }
.bll-header__logo img { width: 180px; height: auto; display: block; }
.bll-nav ul { display: flex; align-items: center; gap: 40px; list-style: none; margin: 0; padding: 0; }
.bll-nav a { font-family: var(--font-sans); font-size: 1rem; color: var(--color-text); text-decoration: none; padding-bottom: 4px; border-bottom: 2px solid transparent; }
.bll-nav a:hover { color: var(--color-primary); }
.bll-nav a.is-active { border-bottom-color: var(--color-primary); color: var(--color-primary); }
.bll-header__actions { display: flex; align-items: center; gap: 20px; }
.bll-header__account { font-size: 1rem; text-decoration: none; color: var(--color-text); }
.bll-header__account:hover { color: var(--color-primary); }
.bll-header__cart { position: relative; display: inline-flex; align-items: center; gap: 8px; color: var(--color-text); text-decoration: none; font-size: 1rem; }
.bll-header__cart:hover { color: var(--color-primary); }
.bll-header__cart-badge { position: absolute; top: -8px; left: 14px; background: var(--color-primary); color: #fff; font-size: .7rem; line-height: 1; padding: 3px 6px; border-radius: var(--radius-pill); }
.bll-burger { display: none; flex-direction: column; gap: 4px; background: none; border: 0; cursor: pointer; padding: 6px; }
.bll-burger span { display: block; width: 22px; height: 2px; background: var(--color-text); }

.bll-mobile { position: fixed; inset: 0; z-index: 60; visibility: hidden; }
.bll-mobile[aria-hidden="false"] { visibility: visible; }
.bll-mobile__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45); opacity: 0; transition: opacity 180ms ease; }
.bll-mobile[aria-hidden="false"] .bll-mobile__overlay { opacity: 1; }
.bll-mobile__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(320px, 84vw); background: #fff; padding: 72px 24px 24px; display: flex; flex-direction: column; gap: 4px; transform: translateX(100%); transition: transform 220ms ease; }
.bll-mobile[aria-hidden="false"] .bll-mobile__panel { transform: none; }
.bll-mobile__panel a { padding: 14px 0; border-bottom: 1px solid var(--color-surface-2); text-decoration: none; color: var(--color-text); font-size: 1.05rem; }
.bll-mobile__close { position: absolute; top: 18px; right: 20px; background: none; border: 0; font-size: 2rem; line-height: 1; cursor: pointer; color: var(--color-text); }
body.menu-open { overflow: hidden; }

@media (max-width: 980px) {
    .bll-nav, .bll-header__account, .bll-header__cart-label { display: none; }
    .bll-burger { display: flex; }
    .bll-header__inner { min-height: 78px; padding-top: 16px; padding-bottom: 16px; }
    .bll-header__logo img { width: 125px; }
}

/* ─── Footer ─── */
.bll-footer { position: relative; padding: 64px 0 32px; overflow: hidden; color: var(--color-text); }
.bll-footer__bg { position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.82)), url('/assets/images/home/footer-sky.jpg') center/cover no-repeat; }
.bll-footer__inner { position: relative; }
.bll-footer__lead { text-align: center; max-width: 74ch; margin: 0 auto 3rem; }
.bll-footer__lead h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.75rem, 3.4vw, 3rem); line-height: 1.3; color: var(--color-heading); margin: 0 0 1rem; }
.bll-footer__lead p { color: var(--color-text-muted); line-height: 1.7; margin: 0; }
.bll-footer__cols { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: start; }
.bll-footer__links { display: grid; grid-template-columns: repeat(3, auto); gap: 14px 32px; justify-content: start; }
.bll-footer__links a { font-family: var(--font-display); font-weight: 900; font-size: 1.125rem; color: var(--color-text); text-decoration: underline; }
.bll-footer__links a:hover { color: var(--color-primary); }
.bll-footer__contact { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.bll-footer__contact p { margin: 0; font-size: 1rem; }
.bll-footer__contact a { color: var(--color-text); }
.bll-footer__phone { font-weight: 700; }
.bll-footer__logo { width: 180px; height: auto; margin-top: .5rem; }
.bll-footer__payments { width: 240px; height: auto; }
.bll-footer__ruo { margin: 3rem 0 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(26,26,26,.14); font-size: .82rem; line-height: 1.65; color: var(--color-text-muted); max-width: 86ch; }
.bll-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: .875rem; color: var(--color-text-muted); }
.bll-footer__bottom p { margin: 0; }
.bll-footer__credit a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }

@media (max-width: 900px) {
    .bll-footer__cols { grid-template-columns: 1fr; }
    .bll-footer__links { grid-template-columns: 1fr; }
    .bll-footer__contact { text-align: left; align-items: flex-start; }
}

/* The hero and band sources are square AI renders; without a fixed height they
   render as tall as they are wide. The client's blocks are 467px and 288px. */
.bll-hero img { height: 467px; object-fit: cover; object-position: center; }
.bll-band img { height: 288px; object-fit: cover; object-position: center 40%; }
@media (max-width: 768px) {
    .bll-hero img { height: 300px; }
    .bll-band img { height: 180px; }
}

/* Let the client's sky photograph actually read in the footer. */
.bll-footer__bg { background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.72)), url('/assets/images/home/footer-sky.jpg') center/cover no-repeat; }

/* ─── PDP ─── */
.bll-pdp-ruo {
    margin: .85rem 0 1.25rem; padding: .7rem .9rem;
    background: var(--color-surface); border-left: 3px solid var(--color-primary);
    font-size: .82rem; line-height: 1.6; color: var(--color-text-muted);
}
.product-detail__price .price-current { font-family: var(--font-sans); font-size: 1.125rem; color: var(--color-text); }
.product-detail__price .price-compare { font-family: var(--font-sans); font-size: 1.125rem; color: var(--color-text-muted); text-decoration: line-through; margin-left: .5rem; }
.add-to-cart-btn, .btn--primary { background: var(--color-ink); color: #fff; border: 2px solid var(--color-ink); border-radius: var(--radius-pill); font-family: var(--font-sans); font-weight: 400; }
.add-to-cart-btn:hover, .btn--primary:hover { background: #2E2E2E; border-color: #2E2E2E; color: #fff; }

/* ─── Catalog grid: denser than the inherited 3-up, closer to the client's
       6-up shelf, but stepping down instead of jumping straight to 2. ─── */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 20px; }
@media (max-width: 1200px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .product-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; } }
.catalog__title { font-family: var(--font-display); font-weight: 700; color: var(--color-heading); }

/* ══════════════════════════════════════════════════════════════
   Home — section rework (H1 in the hero, richer bands)
   ══════════════════════════════════════════════════════════════ */

/* ─── Hero with an overlaid copy panel ─── */
.bll-hero { position: relative; }
.bll-hero__panel {
    position: absolute; inset: 0; display: flex; align-items: center;
    background: linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.86) 42%, rgba(255,255,255,.20) 72%, rgba(255,255,255,0) 100%);
}
.bll-hero__panel .container { width: 100%; }
.bll-hero__eyebrow {
    font-family: var(--font-sans); font-size: .82rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--color-primary); margin: 0 0 .6rem;
}
.bll-hero h1 {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(1.85rem, 3.6vw, 3.1rem); line-height: 1.15;
    color: var(--color-heading); margin: 0 0 .9rem; max-width: 17ch;
}
.bll-hero__sub { font-size: 1.02rem; line-height: 1.7; color: var(--color-text-body); margin: 0 0 1.5rem; max-width: 52ch; }
.bll-hero__cta { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.bll-btn {
    display: inline-block; font-family: var(--font-sans); font-size: 1rem;
    padding: 13px 26px; border-radius: var(--radius-pill); text-decoration: none;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.bll-btn--solid { background: var(--color-ink); color: #fff; border: 2px solid var(--color-ink); }
.bll-btn--solid:hover { background: #2E2E2E; border-color: #2E2E2E; color: #fff; }
.bll-btn--ghost { background: transparent; color: var(--color-ink); border: 2px solid var(--color-ink); }
.bll-btn--ghost:hover { background: var(--color-ink); color: #fff; }
.bll-hero__specs { display: flex; gap: 1.75rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; font-size: .88rem; color: var(--color-text-muted); }
.bll-hero__specs strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--color-text); }
@media (max-width: 860px) {
    .bll-hero img { height: 520px; object-position: 70% center; }
    .bll-hero__panel { background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.9) 62%, rgba(255,255,255,.55) 100%); }
    .bll-hero h1 { max-width: none; }
    .bll-hero__specs { gap: 1.1rem; }
}

/* ─── Section lead (heading + intro paragraph) ─── */
.bll-lead { max-width: 68ch; margin: 0 auto 2.25rem; text-align: center; }
.bll-lead .bll-heading { margin-bottom: .9rem; }
.bll-lead p { color: var(--color-text-muted); line-height: 1.75; margin: 0; }
.bll-section--tinted { background: var(--color-surface); }
.bll-note { font-size: .85rem; color: var(--color-text-light); text-align: center; margin: 1.25rem 0 0; }
.bll-textlink { color: var(--color-primary); text-decoration: none; font-weight: 700; }
.bll-textlink:hover { text-decoration: underline; }

/* ─── Trust strip with supporting copy ─── */
.bll-trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 24px; }
.bll-trust__item { margin: 0; text-align: center; }
.bll-trust__item figcaption h3 {
    font-family: var(--font-display); font-weight: 700; font-size: 1.2rem;
    color: var(--color-heading); margin: 1rem 0 .5rem;
}
.bll-trust__item figcaption p { font-size: .92rem; line-height: 1.65; color: var(--color-text-muted); margin: 0; }

/* ─── Comparison table ─── */
.bll-table-wrap { overflow-x: auto; }
.bll-table { width: 100%; border-collapse: collapse; font-size: .95rem; background: #fff; }
.bll-table caption { text-align: left; }
.bll-table th, .bll-table td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--color-surface-2); }
.bll-table thead th {
    font-family: var(--font-display); font-weight: 700; font-size: .8rem;
    letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted);
    border-bottom: 2px solid var(--color-border);
}
.bll-table tbody th { font-family: var(--font-display); font-weight: 700; color: var(--color-text); white-space: nowrap; }
.bll-table tbody tr:hover { background: var(--color-surface); }
.bll-table__num { font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
.bll-table td a { color: var(--color-primary); font-weight: 700; text-decoration: none; white-space: nowrap; }
.bll-table td a:hover { text-decoration: underline; }

/* ─── Stat band over the decorative image ─── */
.bll-band { position: relative; }
.bll-band__stats { position: absolute; inset: 0; display: flex; align-items: center; background: rgba(29,30,32,.62); }
.bll-band__stats .container { width: 100%; }
.bll-band__stats dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 0; text-align: center; color: #fff; }
.bll-band__stats dt { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.72); margin-bottom: .35rem; }
.bll-band__stats dd { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; margin: 0; }
@media (max-width: 700px) {
    .bll-band__stats dl { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .bll-band__stats dd { font-size: 1.05rem; }
    .bll-band img { height: 240px; }
}

/* ─── Split copy / media sections ─── */
.bll-split__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.bll-split__grid--reverse .bll-split__copy { order: 2; }
.bll-split__grid--reverse .bll-split__media { order: 1; }
.bll-split__copy .bll-heading { text-align: left; margin-bottom: 1.1rem; }
.bll-split__copy p { line-height: 1.8; color: var(--color-text-muted); margin: 0 0 1rem; max-width: 60ch; }
.bll-split__media img { width: 100%; height: auto; border-radius: 14px; display: block; }
.bll-journey__ruo { font-size: .88rem; color: var(--color-text-light) !important; }

/* ─── Storage / spec cards ─── */
.bll-specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 40px; max-width: 980px; margin: 0 auto; }
.bll-specs h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--color-heading); margin: 0 0 .5rem; }
.bll-specs p { line-height: 1.75; color: var(--color-text-muted); margin: 0; font-size: .95rem; }

/* ─── Home FAQ ─── */
.bll-faq { max-width: 860px; }
.bll-faq .bll-heading { text-align: left; }
.bll-faq .faq-item { border-bottom: 1px solid var(--color-surface-2); }
.bll-faq .faq-item__question {
    font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
    color: var(--color-text); padding: 1.1rem 0; cursor: pointer; list-style: none;
}
.bll-faq .faq-item__question::-webkit-details-marker { display: none; }
.bll-faq .faq-item__question::after { content: '+'; float: right; color: var(--color-primary); font-weight: 400; }
.bll-faq .faq-item[open] .faq-item__question::after { content: '\2212'; }
.bll-faq .faq-item__answer p { line-height: 1.8; color: var(--color-text-muted); margin: 0 0 1.1rem; }
.bll-faq .bll-note { text-align: left; }

@media (max-width: 900px) {
    .bll-split__grid { grid-template-columns: 1fr; gap: 32px; }
    .bll-split__grid--reverse .bll-split__copy,
    .bll-split__grid--reverse .bll-split__media { order: initial; }
    .bll-trust__grid { grid-template-columns: repeat(2, 1fr); }
    .bll-specs { grid-template-columns: 1fr; }
}

/* ─── Logo colours ───────────────────────────────────────────────
   Re-sampled from the client's price sheets, which print the wordmark far
   larger than the site favicon did. "Lab" is #C00810 — a deeper red than the
   #F30328 I had read off the small PNG, and the same red the Retatrutide table
   uses. Red stays restricted to commerce signals (ribbon, sale price) so it
   reads as a discount cue rather than as decoration. */
:root {
    --color-brand-blue: #004098;
    --color-brand-red:  #C00810;
}

.bll-hero__eyebrow { color: var(--color-brand-blue); }
.bll-textlink { color: var(--color-brand-blue); }
.bll-textlink:hover { color: var(--color-primary); }

/* Sale price in brand red, original struck through beside it. */
.bll-card__price { color: var(--color-brand-red); font-weight: 700; }
.bll-card__compare { color: var(--color-text-light); }
.product-detail__price .price-current { color: var(--color-brand-red); font-weight: 700; }

/* Best Seller ribbon picks up the mark's red. */
.bll-card__ribbon { background: var(--color-brand-red); }

/* Table: strength column in the logo blue, price in the logo red. */
.bll-table tbody th { color: var(--color-brand-blue); }
.bll-table tbody td:nth-child(2) { color: var(--color-brand-red); font-weight: 700; }
.bll-table td a { color: var(--color-brand-blue); }

/* Footer links hover to the mark's blue rather than the lighter UI blue. */
.bll-footer__links a:hover { color: var(--color-brand-blue); }

/* main.css styles dt/dd for spec tables (inline, side by side). The stat band
   needs them stacked, so state it explicitly rather than relying on defaults. */
.bll-band__stats dl > div { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.bll-band__stats dt { display: block; float: none; width: auto; margin: 0 0 .35rem; padding: 0; line-height: 1.2; }
.bll-band__stats dd { display: block; float: none; width: auto; margin: 0; padding: 0; line-height: 1.2; }

/* Note: headings were #254813 (forest green) until 2026-07-26. That colour came
   from the "greenshop" template the client's builder shipped with — it is not a
   brand colour, and it fought the blue of the logo, the vial caps and every
   photograph on the page. --color-heading is now the logo's own navy. */

/* Hero spec row — explicit stacking; the previous <strong> + text-node pair
   was being laid out inline by main.css and the two overlapped. */
.bll-hero__specs li { display: flex; flex-direction: column; gap: 2px; }
.bll-hero__specs .v { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.2; color: var(--color-text); }
.bll-hero__specs .k { font-size: .82rem; line-height: 1.2; color: var(--color-text-muted); }

/* Softer hero scrim: the earlier stops produced a visible vertical seam where
   the white panel met the photograph. */
.bll-hero__panel {
    background: linear-gradient(90deg,
        rgba(255,255,255,.96) 0%,
        rgba(255,255,255,.93) 30%,
        rgba(255,255,255,.72) 46%,
        rgba(255,255,255,.28) 60%,
        rgba(255,255,255,0) 74%);
}
@media (max-width: 860px) {
    .bll-hero__panel {
        background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 58%, rgba(255,255,255,.6) 100%);
    }
}

/* ─── CMS content pages ───
   The inherited template let prose run the full 1224px width and rendered no
   H1 at all. Constrain the measure and give the title the page's heading style. */
.static-page { padding: 3rem 0 4rem; }
.static-page .container { max-width: 820px; }
.static-page__title { text-align: left; margin: .5rem 0 1.75rem; }
.static-page__content { font-size: 1rem; line-height: 1.8; color: var(--color-text-body); }
.static-page__content h2,
.static-page__content h3 { font-family: var(--font-display); font-weight: 700; color: var(--color-heading); margin: 2rem 0 .75rem; }
.static-page__content h3 { font-size: 1.2rem; }
.static-page__content p { margin: 0 0 1rem; }
.static-page__content ul, .static-page__content ol { margin: 0 0 1.25rem 1.25rem; }
.static-page__content li { margin: 0 0 .45rem; }
.static-page__content a { color: var(--color-brand-blue); }
.static-page__content .ruo-note { margin-top: 2rem; padding: .85rem 1rem; background: var(--color-surface); border-left: 3px solid var(--color-primary); font-size: .85rem; }

/* ══════════════════════════════════════════════════════════════
   Header + hero, rebuilt 2026-07-26
   Utility bar carries the research-use notice; the hero is a dark navy
   split with the client's own vials on the right. Earlier rules for
   .bll-hero (full-bleed photo with a white scrim) are superseded below.
   ══════════════════════════════════════════════════════════════ */

/* ─── Utility bar ─── */
.bll-utility { background: var(--color-brand-blue); color: rgba(255,255,255,.86); font-size: .78rem; }
.bll-utility__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; flex-wrap: wrap; }
.bll-utility p { margin: 0; }
.bll-utility__notice { letter-spacing: .02em; }
.bll-utility__contact { display: flex; align-items: center; gap: 10px; }
.bll-utility a { color: #fff; text-decoration: none; }
.bll-utility a:hover { text-decoration: underline; }
@media (max-width: 760px) { .bll-utility__contact { display: none; } .bll-utility__inner { justify-content: center; } }

/* ─── Header ─── */
.bll-header { position: sticky; top: 0; z-index: 40; background: #fff; transition: box-shadow 180ms ease; }
.bll-header.is-stuck { box-shadow: 0 1px 0 var(--color-surface-2), 0 6px 20px rgba(0,34,66,.06); }
.bll-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 78px; padding-top: 14px; padding-bottom: 14px; }
.bll-header__logo img { width: 178px; height: auto; display: block; }
.bll-nav ul { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
.bll-nav a { font-size: .98rem; color: var(--color-text); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.bll-nav a:hover { color: var(--color-primary); }
.bll-nav a.is-active { color: var(--color-brand-blue); border-bottom-color: var(--color-brand-blue); font-weight: 700; }

.bll-header__actions { display: flex; align-items: center; gap: 14px; }
.bll-headsearch { display: flex; align-items: center; gap: 7px; background: var(--color-surface); border: 1px solid var(--color-surface-2); border-radius: var(--radius-pill); padding: 7px 14px; transition: border-color 160ms ease; }
.bll-headsearch:focus-within { border-color: var(--color-primary); background: #fff; }
.bll-headsearch svg { width: 16px; height: 16px; color: var(--color-text-light); flex: none; }
.bll-headsearch input { border: 0; background: transparent; outline: none; font: inherit; font-size: .9rem; width: 132px; color: var(--color-text); }
.bll-header__account, .bll-header__cart { position: relative; display: inline-flex; align-items: center; gap: 7px; color: var(--color-text); text-decoration: none; font-size: .93rem; white-space: nowrap; }
.bll-header__account svg, .bll-header__cart svg { width: 20px; height: 20px; }
.bll-header__account:hover, .bll-header__cart:hover { color: var(--color-primary); }
.bll-header__cart-badge { position: absolute; top: -7px; left: 11px; min-width: 17px; height: 17px; display: grid; place-items: center; padding: 0 4px; background: var(--color-brand-red); color: #fff; font-size: .66rem; font-weight: 700; line-height: 1; border-radius: var(--radius-pill); }

@media (max-width: 1080px) { .bll-headsearch input { width: 96px; } .bll-nav ul { gap: 20px; } }
@media (max-width: 980px) {
    .bll-nav, .bll-headsearch, .bll-header__account span, .bll-header__cart span { display: none; }
    .bll-burger { display: flex; }
    .bll-header__inner { min-height: 66px; }
    .bll-header__logo img { width: 140px; }
}
.bll-mobile__search { margin-bottom: 8px; }
.bll-mobile__search input { width: 100%; padding: 11px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-input); font: inherit; }
.bll-mobile__notice { margin-top: 20px; font-size: .78rem; line-height: 1.6; color: var(--color-text-light); }

/* ─── Hero ─── */
.bll-hero {
    position: relative;
    background:
        radial-gradient(120% 140% at 78% 40%, rgba(0,64,152,.34) 0%, rgba(0,64,152,0) 58%),
        linear-gradient(135deg, #002864 0%, #002058 44%, #001233 100%);
    color: #fff;
    overflow: hidden;
}
.bll-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; padding: 68px 16px 64px; }
.bll-hero__eyebrow {
    font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--color-primary-light); margin: 0 0 1rem;
}
.bll-hero h1 {
    font-family: var(--font-display); font-weight: 700; color: #fff;
    font-size: clamp(2rem, 3.9vw, 3.35rem); line-height: 1.1; letter-spacing: -.015em;
    margin: 0 0 1.1rem; max-width: 15ch;
}
.bll-hero__sub { font-size: 1.03rem; line-height: 1.75; color: rgba(255,255,255,.8); margin: 0 0 1.9rem; max-width: 54ch; }
.bll-hero__cta { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.bll-btn--accent { background: var(--color-primary); color: #fff; border: 2px solid var(--color-primary); }
.bll-btn--accent:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }
.bll-btn--outline { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.4); }
.bll-btn--outline:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }

.bll-hero__search { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius-pill); padding: 6px 6px 6px 18px; max-width: 460px; margin-bottom: 1.9rem; }
.bll-hero__search:focus-within { border-color: var(--color-primary-light); background: rgba(255,255,255,.12); }
.bll-hero__search svg { width: 18px; height: 18px; color: rgba(255,255,255,.6); flex: none; }
.bll-hero__search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font: inherit; font-size: .95rem; color: #fff; }
.bll-hero__search input::placeholder { color: rgba(255,255,255,.5); }
.bll-hero__search button { border: 0; background: var(--color-primary); color: #fff; font: inherit; font-size: .9rem; padding: 10px 20px; border-radius: var(--radius-pill); cursor: pointer; }
.bll-hero__search button:hover { background: var(--color-primary-dark); }

.bll-hero__specs { display: flex; gap: 2rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.bll-hero__specs li { display: flex; flex-direction: column; gap: 2px; }
.bll-hero__specs .v { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.2; color: #fff; }
.bll-hero__specs .k { font-size: .78rem; line-height: 1.2; color: rgba(255,255,255,.6); }

.bll-hero__media { position: relative; }
.bll-hero__media img { width: 100%; height: auto; display: block; filter: drop-shadow(0 30px 60px rgba(0,0,0,.45)); }

@media (max-width: 980px) {
    .bll-hero__grid { grid-template-columns: 1fr; gap: 28px; padding: 48px 16px 40px; text-align: center; }
    .bll-hero h1 { max-width: none; }
    .bll-hero__sub { margin-left: auto; margin-right: auto; }
    .bll-hero__cta, .bll-hero__specs { justify-content: center; }
    .bll-hero__search { margin-left: auto; margin-right: auto; }
    .bll-hero__media { max-width: 560px; margin: 0 auto; }
}

/* Wrapped lines need an explicit line-height: the eyebrow and the utility
   notice both inherit a tight one and collided with themselves on narrow
   viewports. */
.bll-hero__eyebrow { line-height: 1.55; }
.bll-utility__notice, .bll-utility__contact { line-height: 1.5; }
.bll-utility__inner { padding-top: 6px; padding-bottom: 6px; }

@media (max-width: 520px) {
    .bll-hero h1 { font-size: 1.9rem; }
    .bll-hero__specs { gap: 1.1rem 1.6rem; }
    .bll-hero__search { flex-wrap: wrap; border-radius: var(--radius-input); padding: 10px; }
    .bll-hero__search input { flex: 1 1 auto; min-width: 0; width: auto; padding: 4px 2px; }
    .bll-hero__search button { flex: 1 1 100%; margin-top: 8px; }
}

/* The supplied vial artwork is wider than it is tall, so at the column's own
   width it leaves dead vertical space next to a three-line H1. Let it run into
   the right gutter — the section clips at its own edge, and nothing lives
   there. Rightward only: growing symmetrically would crowd the headline. */
@media (min-width: 981px) {
    .bll-hero__media img { width: 117%; max-width: none; }
}

/* ─── Family tables, after the client's price sheets ──────────────
   Every sheet builds a table the same way: a saturated header band in the
   family's colour with white type, a hairline border of the same colour around
   the whole block, rounded corners, and the row labels tinted to match. The
   dosage comparison table is the site's equivalent, so it takes the same
   treatment in the Tirzepatide blue.

   The family colour is a single custom property, so a Retatrutide or a vitamin
   table later is one class away rather than a second copy of these rules. */
.bll-table-wrap {
    --family: var(--accent-blue);
    border: 1px solid var(--family);
    border-radius: 12px;
    /* `overflow: hidden` here would clip the radius nicely and silently kill the
       horizontal scroll this table needs below ~430px, pushing the whole page
       wider than the viewport. `auto` clips just the same. */
    overflow-x: auto;
}
.bll-table-wrap--red    { --family: var(--accent-red); }
.bll-table-wrap--orange { --family: var(--accent-orange); }
.bll-table-wrap--green  { --family: var(--accent-green); }
.bll-table-wrap--purple { --family: var(--accent-purple); }

.bll-table thead th {
    background: var(--family);
    color: #fff;
    border-bottom: 0;
}
.bll-table tbody th { color: var(--family); }
.bll-table td a { color: var(--family); }
.bll-table tbody tr:last-child th,
.bll-table tbody tr:last-child td { border-bottom: 0; }

/* ─── Footer band, after the client's price sheets ────────────────
   All three sheets close on a solid navy band with the wordmark reversed out.
   The sky photograph here came from the Zyro template and, next to the new
   palette, it was the one warm light surface left on the page. Same layout,
   inverted for the dark ground. */
.bll-footer { color: rgba(255,255,255,.86); }
.bll-footer__bg {
    background: linear-gradient(180deg, #002864 0%, #002058 55%, #001840 100%);
}
.bll-footer__lead h3 { color: #fff; }
.bll-footer__lead p { color: rgba(255,255,255,.78); }
.bll-footer__links a { color: #fff; }
.bll-footer__links a:hover { color: var(--color-primary-light); }
.bll-footer__contact a { color: rgba(255,255,255,.86); }
.bll-footer__contact a:hover { color: #fff; }
.bll-footer__ruo {
    border-top-color: rgba(255,255,255,.20);
    color: rgba(255,255,255,.70);
}
.bll-footer__ruo strong { color: #fff; }
.bll-footer__bottom { color: rgba(255,255,255,.65); }

/* The payment badges are dark-on-white artwork; on navy they need their own
   surface rather than being punched out of the band. */
.bll-footer__payments {
    display: block;
    width: 240px;
    height: auto;
    background: #fff;
    padding: 7px 11px;
    border-radius: 8px;
    box-sizing: content-box;
}

/* ══════════════════════════════════════════════════════════════════
   HOME — Pepitiva section architecture in the BioLifeLab palette

   Structure, spacing and grid ratios follow pepitiva2's home.css (.hx-*)
   so the two homepages read as the same system. Only the colours change:
   Pepitiva's cyan/ink tokens are replaced by the navy #002058 and the
   family accents from the client's price sheets.
   ══════════════════════════════════════════════════════════════════ */

.bll-sec { position: relative; padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.bll-sec--tint { background: linear-gradient(180deg, var(--color-surface) 0%, #fff 60%); }
.bll-sec--accentline::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-red));
}
.bll-sec--dark { background: linear-gradient(160deg, #002864 0%, #002058 55%, #001840 100%); color: rgba(255,255,255,.82); }
.bll-sec--dark .bll-h2, .bll-sec--dark .bll-feat__t { color: #fff; }
.bll-sec--dark .bll-lead { color: rgba(255,255,255,.78); }
.bll-sec--dark .bll-eyebrow { color: var(--color-primary-light); }

/* Section headers */
.bll-head { max-width: 62ch; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.bll-head--left { margin-inline: 0; text-align: left; max-width: 60ch; }
.bll-eyebrow {
    display: inline-block; font-size: .74rem; font-weight: 700;
    letter-spacing: .13em; text-transform: uppercase;
    color: var(--color-primary); margin-bottom: .8rem;
}
.bll-h2 {
    font-family: var(--font-display); font-weight: 700; color: var(--color-heading);
    font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.2; margin: 0 0 .9rem;
}
.bll-h2 em { font-style: normal; color: var(--color-primary); }
.bll-sec--dark .bll-h2 em { color: var(--color-primary-light); }
.bll-lead { font-size: 1.06rem; line-height: 1.7; color: var(--color-text-muted); margin: 0; }
.bll-head .bll-lead { margin-inline: auto; }

/* Stats band */
.bll-stats { padding-block: clamp(2.2rem, 4vw, 3.2rem); }
.bll-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
.bll-stat__num {
    font-family: var(--font-display); font-weight: 700; line-height: 1;
    font-size: clamp(1.9rem, 4vw, 2.9rem); color: var(--color-primary);
}
.bll-stat__label { margin-top: .5rem; font-weight: 700; color: var(--color-text); font-size: .98rem; }
.bll-stat__sub { margin-top: .2rem; font-size: .84rem; color: var(--color-text-muted); }

/* Beyond purity — editorial with a vial bleeding off the right edge */
.bll-beyond { overflow: hidden; background: linear-gradient(180deg, #fff 0%, var(--color-surface) 100%); }
.bll-beyond__vial {
    position: absolute; right: -60px; bottom: -80px; width: 300px; height: auto;
    opacity: .5; pointer-events: none; z-index: 0;
}
.bll-beyond__inner { position: relative; z-index: 1; }
.bll-beyond__grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; margin-top: 2.5rem; }
.bll-bcard { background: #fff; border: 1px solid var(--color-surface-2); border-radius: 12px; padding: 1.4rem 1.5rem; }
.bll-bcard__k { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--color-primary); }
.bll-bcard__t { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; color: var(--color-heading); margin: .5rem 0 .5rem; }
.bll-bcard__d { font-size: .95rem; line-height: 1.7; color: var(--color-text-muted); margin: 0; }
.bll-bcard__why { display: block; margin-top: .7rem; font-size: .82rem; color: var(--color-text-light); }
.bll-bcard__why b { color: var(--color-text); }

/* Navy statement */
.bll-statement { text-align: center; }
.bll-statement .bll-lead { max-width: 66ch; margin-inline: auto; }

/* Compound families — each card carries its family accent */
.bll-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1.1rem; }
.bll-area {
    --family: var(--accent-blue);
    display: block; text-decoration: none; background: #fff;
    border: 1px solid var(--color-surface-2); border-top: 3px solid var(--family);
    border-radius: 12px; padding: 1.5rem; transition: border-color .18s ease, transform .18s ease;
}
.bll-area:hover { border-color: var(--family); transform: translateY(-2px); }
.bll-area--blue   { --family: var(--accent-blue); }
.bll-area--red    { --family: var(--accent-red); }
.bll-area--orange { --family: var(--accent-orange); }
.bll-area--green  { --family: var(--accent-green); }
.bll-area--purple { --family: var(--accent-purple); }
.bll-area--grey   { --family: var(--accent-grey); }
.bll-area__ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 10px;
    background: color-mix(in srgb, var(--family) 10%, #fff); color: var(--family);
}
.bll-area__ico svg { width: 24px; height: 24px; }
.bll-area__name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--color-heading); margin: .9rem 0 .45rem; }
.bll-area__desc { font-size: .93rem; line-height: 1.65; color: var(--color-text-muted); margin: 0 0 1.1rem; }
.bll-area__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .82rem; }
.bll-area__count { color: var(--color-text-light); }
.bll-area__cta { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--family); }
.bll-area__cta svg { width: 16px; height: 16px; }

/* Why us — numbered features on the dark band */
.bll-feats { display: grid; grid-template-columns: 1fr; gap: 1.6rem 2.4rem; }
.bll-feat { border-top: 1px solid rgba(255,255,255,.18); padding-top: 1.1rem; }
.bll-feat__n { font-family: var(--font-display); font-weight: 700; font-size: .85rem; color: var(--color-primary-light); letter-spacing: .08em; }
.bll-feat__t { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; margin: .45rem 0 .5rem; }
.bll-feat__d { font-size: .94rem; line-height: 1.7; color: rgba(255,255,255,.74); margin: 0; }
.bll-feat__m { display: inline-block; margin-top: .8rem; font-size: .8rem; font-weight: 700; color: var(--color-primary-light); }

/* Educational prose */
.bll-prose { max-width: 760px; margin-inline: auto; }
.bll-prose p { font-size: 1.04rem; line-height: 1.8; color: var(--color-text-body); margin: 0 0 1.1rem; }

/* Bulk order band */
.bll-cta {
    background: linear-gradient(140deg, #002864 0%, #002058 52%, #001840 100%);
    border-radius: 16px; padding: clamp(1.8rem, 4vw, 3rem); color: rgba(255,255,255,.84);
}
.bll-cta__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
.bll-eyebrow--onDark { color: var(--color-primary-light); }
.bll-cta__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.22; color: #fff; margin: 0 0 .8rem; }
.bll-cta__text { font-size: 1.02rem; line-height: 1.7; color: rgba(255,255,255,.78); margin: 0; }
.bll-cta__perks { list-style: none; padding: 0; margin: 1.2rem 0 1.8rem; display: grid; gap: .6rem; }
.bll-cta__perks li { display: flex; align-items: flex-start; gap: .6rem; font-size: .95rem; line-height: 1.55; }
.bll-cta__perks svg { width: 18px; height: 18px; flex: none; margin-top: .18rem; color: var(--color-primary-light); }

.bll-cta__chart { margin: 0; }
.bll-cta__bars { display: flex; align-items: flex-end; gap: 8px; height: 190px; }
.bll-cta__bar {
    position: relative; flex: 1; height: var(--h); min-height: 10px; border-radius: 6px 6px 0 0;
    background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
}
.bll-cta__bar-k { position: absolute; left: 0; right: 0; bottom: -22px; text-align: center; font-size: .7rem; color: rgba(255,255,255,.6); }
.bll-cta__chart figcaption { margin-top: 2rem; font-size: .8rem; color: rgba(255,255,255,.6); text-align: center; }

/* FAQ accordion */
.bll-faq { max-width: 820px; margin-inline: auto; display: grid; gap: .7rem; }
.bll-faq__item { background: #fff; border: 1px solid var(--color-surface-2); border-radius: 12px; overflow: hidden; }
.bll-faq__item[open] { border-color: var(--color-primary); }
.bll-faq__q {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.05rem 1.3rem; cursor: pointer; list-style: none;
    font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--color-heading);
}
.bll-faq__q::-webkit-details-marker { display: none; }
.bll-faq__q svg { width: 20px; height: 20px; flex: none; color: var(--color-primary); transition: transform .2s ease; }
.bll-faq__item[open] .bll-faq__q svg { transform: rotate(180deg); }
.bll-faq__a { padding: 0 1.3rem 1.2rem; }
.bll-faq__a p { margin: 0; font-size: .97rem; line-height: 1.75; color: var(--color-text-muted); }

@media (min-width: 760px) {
    .bll-beyond__grid { grid-template-columns: 1fr 1fr; }
    .bll-feats { grid-template-columns: 1fr 1fr; }
    .bll-cta__grid { grid-template-columns: 1.15fr .85fr; }
    .bll-beyond__vial { width: 380px; right: -40px; }
}
@media (min-width: 1080px) {
    .bll-feats { grid-template-columns: repeat(3, 1fr); }
    .bll-beyond__vial { width: 440px; right: 0; opacity: .6; }
}
@media (max-width: 720px) {
    .bll-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1rem; }
    .bll-beyond__vial { display: none; }
    .bll-cta__bars { height: 140px; gap: 5px; }
}

/* The newsletter heading is styled a few hundred lines up as `.bll-newsletter h4`,
   but the markup emits an h2 — the heading hierarchy was corrected and the
   selector was not. The result was default navy type on a dark photograph. */
.bll-newsletter__inner h2 {
    font-family: var(--font-display); font-weight: 700; color: #fff;
    font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.25; margin: 0 0 1.4rem;
}

/* A left-aligned section header must not inherit the centred lead. */
.bll-head--left .bll-lead { margin-inline: 0; }

/* `.bll-lead` was a centred block wrapper in the previous home and is a section
   lead paragraph now. The old rule still carries `text-align: center`, which
   overrode the left-aligned header. Follow the header instead of restating it. */
.bll-head .bll-lead { text-align: inherit; }

/* The decorative vial is a bleed, not an illustration — at 440px it competed
   with the cards it sits behind. */
.bll-beyond__vial { width: 210px; right: 1%; bottom: -50px; opacity: .3; }
@media (min-width: 760px) { .bll-beyond__vial { width: 250px; right: 2%; } }
@media (min-width: 1080px) { .bll-beyond__vial { width: 300px; right: 3%; opacity: .34; } }

/* This crop is a whole vial — narrow and very tall — so constraining its width
   still let it run the full height of the section. Size it by height instead. */
.bll-beyond__vial { width: auto; height: 300px; right: 3%; bottom: -40px; opacity: .26; }
@media (min-width: 760px)  { .bll-beyond__vial { height: 360px; } }
@media (min-width: 1080px) { .bll-beyond__vial { height: 420px; opacity: .3; } }

/* The table's `.visually-hidden` spans are absolutely positioned. With no
   positioned ancestor inside the scroll container their containing block was
   the section, so they escaped the wrap's clipping and stretched the page 47px
   past the viewport on narrow screens. Contain them. */
.bll-table-wrap { position: relative; }

/* ─── Product card — BuyBio anatomy (buybio.shop/shop) ────────────
   Bordered and rounded with a tinted image panel, a pinned badge and a padded
   body: eyebrow → title → price. Replaces the borderless flat card inherited
   from the client's Zyro theme, which had no container at all and let the
   cards bleed into the page.

   No shadow, matching `.bll-area` and `.bll-bcard` — the lift on hover is the
   border and 2px of travel. */
.bll-card {
    background: #fff;
    border: 1px solid var(--color-surface-2);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color .18s ease, transform .18s ease;
}
.bll-card:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.bll-card__link { display: block; text-decoration: none; color: inherit; }

.bll-card__image { position: relative; aspect-ratio: 1 / 1; background: var(--color-surface); overflow: hidden; }
.bll-card__image img, .bll-card__image picture { width: 100%; height: 100%; object-fit: cover; display: block; }
.bll-card__image img { transition: transform 300ms ease; }
.bll-card:hover .bll-card__image img { transform: scale(1.05); }

.bll-card__badge {
    position: absolute; top: .75rem; left: .75rem;
    background: var(--accent-red); color: #fff;
    font-family: var(--font-display); font-size: .65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    padding: 4px 9px; border-radius: 4px;
}

.bll-card__body { padding: 1rem; }
.bll-card__eyebrow {
    display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--color-text-muted); margin-bottom: .3rem;
}
.bll-card__title {
    font-family: var(--font-display); font-weight: 700; font-size: .98rem; line-height: 1.3;
    color: var(--color-heading); margin: 0 0 .35rem;
}
.bll-card__prices { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; font-size: 1rem; }
.bll-card__price { color: var(--accent-red); font-weight: 700; }
.bll-card__compare { text-decoration: line-through; font-weight: 400; color: var(--color-text-light); }

/* Kept for whenever a surface switches the button back on. */
.bll-card__btn { margin: 0 1rem 1rem; }

/* ══════════════════════════════════════════════════════════════════
   FOOTER — BioScience Prime Labs model (bioscienceprimelabs.com)

   Same structure and proportions as the reference (1.15fr / 2fr top grid,
   three link columns, bordered RUO callout with a left accent rule, three-slot
   bottom bar). Every colour is ours: the navy from the client's price sheets
   instead of Prime Labs' #002242, and --color-primary-light where they use
   their pale blue. Their cyan powered-by chip becomes our blue.

   This replaces the sky-photograph footer taken from the client's Zyro theme.
   ══════════════════════════════════════════════════════════════════ */
.bll-footer {
    margin-top: 0;
    padding: 0;
    overflow: hidden;
    background:
        radial-gradient(720px 340px at 85% 0%, rgba(124,163,220,.16) 0%, rgba(124,163,220,0) 70%),
        linear-gradient(180deg, #002864 0%, #001840 100%);
    border-top: 1px solid rgba(124,163,220,.16);
    color: rgba(224,232,244,.72);
}

.bll-footer__top {
    display: grid;
    grid-template-columns: 1.15fr 2fr;
    gap: 4rem;
    padding: 4rem 0 2.75rem;
}

.bll-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 1.15rem; }
.bll-footer__logo-link { display: inline-block; }
.bll-footer__logo { width: 180px; height: auto; display: block; }
.bll-footer__tagline {
    font-size: .875rem; line-height: 1.75;
    color: rgba(160,190,232,.76); max-width: 34ch; margin: 0;
}

.bll-footer__contact { display: flex; flex-direction: column; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.bll-footer__contact li { display: flex; align-items: center; gap: .6rem; margin: 0; }
.bll-footer__contact svg { width: 15px; height: 15px; color: var(--color-primary-light); flex-shrink: 0; }
.bll-footer__contact a {
    font-size: .84rem; color: rgba(224,232,244,.78);
    text-decoration: none; transition: color .18s ease;
}
.bll-footer__contact a:hover { color: #fff; }

.bll-footer__payments { width: 220px; height: auto; background: #fff; padding: 7px 11px; border-radius: 8px; box-sizing: content-box; }

.bll-footer__columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.bll-footer__col h3 {
    font-family: var(--font-display); font-size: .68rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: #fff; margin: 0 0 1.15rem;
}
.bll-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.bll-footer__col li { margin: 0; }
.bll-footer__col a {
    font-size: .86rem; color: rgba(224,232,244,.66);
    text-decoration: none; transition: color .18s ease;
}
.bll-footer__col a:hover { color: var(--color-primary-light); }

.bll-footer__disclaimer {
    display: flex; align-items: flex-start; gap: .85rem;
    background: rgba(124,163,220,.05);
    border: 1px solid rgba(124,163,220,.14);
    border-left: 3px solid var(--color-primary-light);
    border-radius: 8px;
    padding: 1.15rem 1.35rem;
    margin: 0;
}
.bll-footer__disclaimer svg { width: 16px; height: 16px; color: var(--color-primary-light); flex-shrink: 0; margin-top: 3px; }
.bll-footer__disclaimer p { font-size: .78rem; line-height: 1.7; color: rgba(160,190,232,.8); margin: 0; }
.bll-footer__disclaimer strong { color: #fff; font-weight: 700; }

.bll-footer__note {
    font-size: .74rem; line-height: 1.6; text-align: center;
    color: rgba(160,190,232,.55); margin: 1.25rem 0 0;
}

.bll-footer__bottom {
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.25rem;
    margin-top: 2.5rem; padding: 1.5rem 0 1.75rem;
    border-top: 1px solid rgba(124,163,220,.12);
}
.bll-footer__bottom p { font-size: .75rem; color: rgba(160,190,232,.55); margin: 0; }
.bll-footer__powered { justify-self: end; }
.bll-footer__powered a {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .75rem; color: rgba(160,190,232,.55);
    text-decoration: none; transition: color .18s ease;
}
.bll-footer__powered a:hover { color: rgba(160,190,232,.85); }
.bll-footer__powered a > span:first-child { border-bottom: 1px dotted currentColor; }
.bll-footer__powered-mark {
    display: inline-grid; place-items: center; width: 20px; height: 20px;
    border-radius: 5px; background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    color: #fff; font-weight: 800; font-size: 11px; line-height: 1;
}

@media (max-width: 900px) {
    .bll-footer__top { grid-template-columns: 1fr; gap: 2.5rem; padding-top: 3rem; }
    .bll-footer__tagline { max-width: 46ch; }
}
@media (max-width: 560px) {
    .bll-footer__columns { grid-template-columns: 1fr; gap: 1.75rem; }
    .bll-footer__bottom { grid-template-columns: 1fr; justify-items: start; gap: .75rem; }
    .bll-footer__powered { justify-self: start; }
}

/* Centred call-to-action under a grid, the way Pepitiva closes its product
   sections. */
.bll-center { text-align: center; margin: 2.5rem 0 0; }