/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Mar 09 2026 | 22:08:56 */
/* =========================
   BLKFOG TYPOGRAPHY SYSTEM – LOCKED
   ========================= */

/* =========================
   COLOR SYSTEM
   ========================= */

:root {
    --bf-black: #1A1A1A;
    --bf-body: #3A3A3A;
    --bf-muted: #6A6A6A;
    --bf-bg: #F5F5F3;
	--bf-white: #F2F2F2;
     /* UI borders */
    --bf-border:#e6e6e6;
     /* subtle black underline / link accents */
    --bf-black-25: rgba(26,26,26,.25);
}

/* =========================
   CONTAINER
   ========================= */

.bf-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* =========================
   SPACING SYSTEM
   ========================= */

.bf-intro {
    padding: 120px 0 80px;
}

.bf-section {
    padding: 80px 0;
}

/* =========================
   HERO DISPLAY TYPOGRAPHY
   ========================= */

.bf-display {
    font-size: clamp(2.6rem, 5.5vw, 8.5rem);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--bf-black);
}

.bf-hero-lead {
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    line-height: 1.6;
    max-width: 700px;
    margin-bottom: 1vh;
    color: var(--bf-body);
    font-weight: 600;
}

.bf-hero-label {
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: 0;
    color: var(--bf-black);
    font-weight: 600;
}
.product-sec-label {
    font-size: 1.2rem !important;
    line-height: 1.7;
    letter-spacing: .18em;
    margin-bottom: 16px;
    color: var(--bf-muted);
    opacity: .65;
    text-transform: uppercase;
}
.price-label {
	font-weight: 600;
	margin-bottom: 0 !important;
}
/* =========================
   IMG FADE ON SIDE
   ========================= */

/* =========================
   HEADINGS
   ========================= */

.bf-h1 {
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 24px;
    color: var(--bf-black);
}

.bf-h1--statement {
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin-top: 2vh;
    margin-bottom: 2vh;
}

.bf-h2 {
    font-size: clamp(1.4rem, 4vw, 2rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    margin-bottom: 16px;
    color: var(--bf-black);
}

.bf-h2--fixed {
    font-size: clamp(1.6rem, 3.8vw, 3rem);
}

.bf-h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--bf-black);
}

/* =========================
   TEXT SYSTEM
   ========================= */

.bf-lead {
    font-size: clamp(1rem, 3.5vw, 1.7rem);
    line-height: 1.7;
    max-width: 560px;
    margin-bottom: 2vh;
    color: var(--bf-body);
}

.bf-body {
    font-size: 1.7rem;
    line-height: 1.7;
    margin-bottom: 16px;
    color: var(--bf-body);
}

.bf-body--product {
    font-size: 1.5rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

.bf-small {
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 8px;
    color: var(--bf-muted);
}

/* =========================
   POLICY / DIVIDER
   ========================= */

.bf-policy-note {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #E5E5E5;
}

/* =========================
   CONTACT GRID
   ========================= */

.bf-contact-grid {
    display: flex;
    gap: 60px;
    flex-wrap: wrap;
}

/* =========================
   TEXT ALIGN RIGHT
   ========================= */

.bf-section--right {
    text-align: right;
}

.bf-section--right .bf-lead {
    margin-left: auto;
}

/* =========================
   FAQ INTRO
   ========================= */

.faq-intro .bf-lead {
    max-width: 45ch;
}

.bf-lead--compact {
    max-width: 40ch;
}

/* =========================
   BUTTON SYSTEM – MATTE LOCK
   ========================= */

button,
.button,
.wp-block-button__link {
    background-color: var(--bf-black);
    color: var(--bf-bg);
    border: none;
    transition: background-color 0.25s ease;
}

button:hover,
.button:hover,
.wp-block-button__link:hover {
    background-color: #111111;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 768px) {

    .bf-intro {
        padding: 80px 0 50px;
    }

    .bf-section {
        padding: 60px 0;
    }

    .bf-h1 {
        margin-bottom: 20px;
    }

    .bf-section--right {
        text-align: left;
    }

    .bf-section--right .bf-lead {
        margin-left: 0;
    }
}

@media (max-width: 480px) {

    .bf-container {
        padding: 0 16px;
    }

}