/* ============================================================
   Packaging Forest LLC — "Warm Sustainable" design system
   Kraft / forest-green palette, Lora (serif) + Karla (sans)
   ============================================================ */

:root {
    --pf-bg: #fdf9f1;
    --pf-bg-card: #fffaf1;
    --pf-border: #e6dcc4;
    --pf-bg-alt: #f3ead9;

    --pf-dark-green: #2c3a2e;
    --pf-mid-green: #3f5b44;
    --pf-accent: #b9793c;
    --pf-accent-dark: #a3652e;

    --pf-hero-gradient: linear-gradient(120deg, #0f2f24 0%, #1c3d2c 55%, #3f5b44 100%);

    --pf-text: #2c3a2e;
    --pf-text-muted: #5a6658;
    --pf-text-muteder: #6b7568;
    --pf-text-faint: #8a9186;

    --pf-radius-card: 14px;
    --pf-radius-pill: 24px;

    --pf-font-heading: 'Lora', serif;
    --pf-font-body: 'Karla', sans-serif;
}

/* Scoped to a wrapper div (not <body>) so untouched pages keep their existing font/background. */
.pf-warm-page {
    background: var(--pf-bg);
    font-family: var(--pf-font-body);
    color: var(--pf-text);
}

.pf-warm h1, .pf-warm h2, .pf-warm h3, .pf-warm h4,
.pf-heading {
    font-family: var(--pf-font-heading);
    font-weight: 600;
    color: var(--pf-dark-green);
}

.pf-warm a { color: var(--pf-mid-green); }
.pf-warm a:hover { color: var(--pf-accent); }

/* ── Eyebrow label ── */
.pf-eyebrow {
    display: inline-block;
    font-family: var(--pf-font-body);
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pf-accent);
    font-weight: 700;
    margin-bottom: 10px;
}

/* ── Section heading ── */
.pf-section-title {
    font-family: var(--pf-font-heading);
    font-size: 28px;
    font-weight: 600;
    color: var(--pf-dark-green);
    margin-bottom: 14px;
}

/* ── Cards ── */
.pf-card {
    background: var(--pf-bg-card);
    border: 1.5px solid var(--pf-border);
    border-radius: var(--pf-radius-card);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pf-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(44, 58, 46, 0.12);
}

/* ── Buttons ── */
.pf-btn {
    display: inline-block;
    text-decoration: none;
    font-family: var(--pf-font-body);
    font-weight: 700;
    font-size: 15px;
    padding: 13px 28px;
    border-radius: var(--pf-radius-pill);
    border: none;
    transition: background 0.2s ease, color 0.2s ease;
}
.pf-btn-primary {
    background: var(--pf-accent);
    color: #fff;
}
.pf-btn-primary:hover {
    background: var(--pf-accent-dark);
    color: #fff;
}
.pf-btn-outline-light {
    border: 1.5px solid #fff;
    color: #fff;
    background: transparent;
}
.pf-btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.pf-btn-outline-green {
    border: 1.5px solid var(--pf-mid-green);
    color: var(--pf-mid-green);
    background: transparent;
}
.pf-btn-outline-green:hover {
    background: var(--pf-mid-green);
    color: #fff;
}
.pf-btn-green {
    background: var(--pf-mid-green);
    color: #fff;
}
.pf-btn-green:hover {
    background: var(--pf-dark-green);
    color: #fff;
}

/* ── Hero band ── */
.pf-hero-band {
    background: var(--pf-hero-gradient);
    border-radius: 16px;
    color: #fff;
}

/* ── Trust marquee ── */
.pf-marquee {
    background: var(--pf-accent);
    overflow: hidden;
    padding: 12px 0;
}
.pf-marquee-track {
    display: flex;
    gap: 40px;
    width: max-content;
    animation: pfMarqueeScroll 22s linear infinite;
}
.pf-marquee-track span {
    color: #fff;
    font-family: var(--pf-font-body);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.3px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 40px;
}
.pf-marquee-track span::after {
    content: "•";
    margin-left: 40px;
    opacity: 0.6;
}
.pf-marquee-track span:last-child::after {
    content: "";
    margin-left: 0;
}
@keyframes pfMarqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .pf-marquee-track { animation: none; overflow-x: auto; }
}

/* ── Trust badge icon row ── */
.pf-badges-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}
.pf-badge-card {
    background: var(--pf-bg-card);
    border: 1.5px solid var(--pf-border);
    border-radius: 12px;
    padding: 20px 14px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pf-badge-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(44, 58, 46, 0.12);
}
.pf-badge-card svg { width: 30px; height: 30px; margin-bottom: 10px; }
.pf-badge-title { font-weight: 700; font-size: 14px; color: var(--pf-dark-green); margin-bottom: 4px; }
.pf-badge-text { font-size: 12px; color: var(--pf-text-muteder); line-height: 1.4; }

@media (max-width: 767.98px) {
    .pf-badges-row { grid-template-columns: repeat(2, 1fr); }
}

/* ── Mid-page checkmark strip ── */
.pf-mid-strip {
    background: var(--pf-mid-green);
    padding: 34px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 32px;
    color: #fff;
    font-family: var(--pf-font-body);
    font-size: 14px;
}

/* ── Utility bar ── */
.pf-utility-bar {
    background: var(--pf-mid-green);
    color: #e4ecdf;
    font-family: var(--pf-font-body);
    font-size: 12.5px;
    padding: 9px 20px;
    display: flex;
    justify-content: center;
    gap: 22px;
    flex-wrap: wrap;
    text-align: center;
}
.pf-utility-bar span.dot { opacity: 0.6; }

/* ── Footer / dark section text ── */
.pf-on-dark { color: #dce6d8; }