{"id":8,"date":"2026-09-01T08:20:29","date_gmt":"2026-09-01T08:20:29","guid":{"rendered":"https:\/\/cookieswp2.mystartupcrew.com\/?page_id=8"},"modified":"2026-09-01T17:20:09","modified_gmt":"2026-09-01T17:20:09","slug":"home","status":"publish","type":"page","link":"https:\/\/cookieswp2.mystartupcrew.com\/","title":{"rendered":"home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"8\" class=\"elementor elementor-8\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7c7cad9 e-con-full e-flex e-con e-parent\" data-id=\"7c7cad9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4539f9a elementor-widget elementor-widget-html\" data-id=\"4539f9a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* =========================================================\r\n   BROOKLYN COOKIES \u2014 HERO V5\r\n   SAME LEFT DESIGN\r\n   FIXED FULL-HEIGHT RIGHT IMAGE\r\n   NO TOP \/ BOTTOM GAP\r\n   NO IMAGE MOVEMENT\r\n========================================================= *\/\r\n\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');\r\n\r\n\r\n\/* =========================================================\r\n   HERO\r\n========================================================= *\/\r\n\r\n.bkc-hero {\r\n    --bkc-dark: #24150f;\r\n    --bkc-dark-2: #352118;\r\n    --bkc-cream: #f4eee5;\r\n    --bkc-white: #fffdf9;\r\n    --bkc-caramel: #b97945;\r\n    --bkc-brown: #74452d;\r\n    --bkc-muted: #796b61;\r\n\r\n    position: relative;\r\n    width: 100%;\r\n    min-height: 820px;\r\n\r\n    overflow: hidden;\r\n\r\n    background: var(--bkc-cream);\r\n\r\n    font-family: 'DM Sans', sans-serif;\r\n\r\n    isolation: isolate;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FIXED RIGHT IMAGE PANEL\r\n   \u2713 FULL HEIGHT\r\n   \u2713 TOUCHES TOP\r\n   \u2713 TOUCHES BOTTOM\r\n   \u2713 NO GAP\r\n   \u2713 NO MOVEMENT\r\n========================================================= *\/\r\n\r\n.bkc-right-image {\r\n    position: absolute;\r\n\r\n    top: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n\r\n    width: 43%;\r\n    height: 100%;\r\n\r\n    overflow: hidden;\r\n\r\n    z-index: 1;\r\n\r\n    background: var(--bkc-dark);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   IMAGE\r\n========================================================= *\/\r\n\r\n.bkc-right-image img {\r\n    position: absolute;\r\n\r\n    inset: 0;\r\n\r\n    width: 100%;\r\n    height: 100%;\r\n\r\n    display: block;\r\n\r\n    object-fit: cover;\r\n    object-position: center center;\r\n\r\n    margin: 0;\r\n    padding: 0;\r\n\r\n    max-width: none;\r\n\r\n    transform: none !important;\r\n\r\n    transition: none !important;\r\n\r\n    animation: none !important;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   IMAGE OVERLAY\r\n========================================================= *\/\r\n\r\n.bkc-right-image::after {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    inset: 0;\r\n\r\n    background:\r\n        linear-gradient(\r\n            180deg,\r\n            rgba(36,21,15,.12) 0%,\r\n            rgba(36,21,15,.02) 38%,\r\n            rgba(36,21,15,.38) 100%\r\n        ),\r\n        linear-gradient(\r\n            90deg,\r\n            rgba(36,21,15,.10) 0%,\r\n            transparent 32%,\r\n            rgba(0,0,0,.10) 100%\r\n        );\r\n\r\n    pointer-events: none;\r\n\r\n    z-index: 2;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   IMAGE INNER BORDER\r\n========================================================= *\/\r\n\r\n.bkc-image-border {\r\n    position: absolute;\r\n\r\n    top: 22px;\r\n    right: 22px;\r\n    bottom: 22px;\r\n\r\n    width: calc(43% - 44px);\r\n\r\n    border: 1px solid rgba(255,255,255,.16);\r\n\r\n    z-index: 20;\r\n\r\n    pointer-events: none;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   IMAGE GLOW\r\n========================================================= *\/\r\n\r\n.bkc-image-glow {\r\n    position: absolute;\r\n\r\n    top: 0;\r\n    right: 0;\r\n\r\n    width: 43%;\r\n    height: 100%;\r\n\r\n    z-index: 3;\r\n\r\n    pointer-events: none;\r\n\r\n    background:\r\n        radial-gradient(\r\n            circle at 50% 45%,\r\n            rgba(255,255,255,.08),\r\n            transparent 58%\r\n        );\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CONTAINER\r\n========================================================= *\/\r\n\r\n.bkc-hero-inner {\r\n    position: relative;\r\n\r\n    z-index: 10;\r\n\r\n    width: 100%;\r\n    max-width: 1480px;\r\n\r\n    min-height: 820px;\r\n\r\n    margin: auto;\r\n\r\n    padding: 38px 65px 55px;\r\n\r\n    display: flex;\r\n    flex-direction: column;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADER\r\n========================================================= *\/\r\n\r\n.bkc-header {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n\r\n    padding-bottom: 22px;\r\n\r\n    border-bottom: 1px solid rgba(36,21,15,.12);\r\n\r\n    opacity: 0;\r\n\r\n    transform: translateY(-15px);\r\n}\r\n\r\n.bkc-hero.active .bkc-header {\r\n    animation: bkcHeader .7s ease .1s forwards;\r\n}\r\n\r\n\r\n.bkc-logo {\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    gap: 11px;\r\n}\r\n\r\n\r\n.bkc-logo-circle {\r\n    width: 39px;\r\n    height: 39px;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: var(--bkc-dark);\r\n\r\n    color: var(--bkc-cream);\r\n\r\n    font-family: 'Playfair Display', serif;\r\n\r\n    font-size: 18px;\r\n\r\n    font-style: italic;\r\n}\r\n\r\n\r\n.bkc-logo-text {\r\n    color: var(--bkc-dark);\r\n\r\n    font-size: 10px;\r\n\r\n    font-weight: 700;\r\n\r\n    letter-spacing: 2.5px;\r\n\r\n    text-transform: uppercase;\r\n}\r\n\r\n\r\n.bkc-header-right {\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    gap: 10px;\r\n\r\n    color: rgba(255,255,255,.78);\r\n\r\n    font-size: 9px;\r\n\r\n    font-weight: 600;\r\n\r\n    letter-spacing: 1.5px;\r\n\r\n    text-transform: uppercase;\r\n}\r\n\r\n\r\n.bkc-header-dot {\r\n    width: 6px;\r\n    height: 6px;\r\n\r\n    flex-shrink: 0;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: #d99a67;\r\n\r\n    box-shadow:\r\n        0 0 0 4px rgba(217,154,103,.12);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MAIN\r\n========================================================= *\/\r\n\r\n.bkc-main {\r\n    flex: 1;\r\n\r\n    display: grid;\r\n\r\n    grid-template-columns: 52% 48%;\r\n\r\n    align-items: center;\r\n\r\n    position: relative;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LEFT CONTENT\r\n========================================================= *\/\r\n\r\n.bkc-copy {\r\n    position: relative;\r\n\r\n    z-index: 30;\r\n\r\n    max-width: 650px;\r\n\r\n    padding-top: 20px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   EYEBROW\r\n========================================================= *\/\r\n\r\n.bkc-eyebrow {\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    gap: 13px;\r\n\r\n    margin-bottom: 25px;\r\n\r\n    opacity: 0;\r\n\r\n    transform: translateY(20px);\r\n}\r\n\r\n.bkc-hero.active .bkc-eyebrow {\r\n    animation: bkcUp .7s ease .25s forwards;\r\n}\r\n\r\n\r\n.bkc-eyebrow-line {\r\n    width: 42px;\r\n    height: 1px;\r\n\r\n    flex-shrink: 0;\r\n\r\n    background: var(--bkc-caramel);\r\n}\r\n\r\n\r\n.bkc-eyebrow-text {\r\n    color: var(--bkc-brown);\r\n\r\n    font-size: 10px;\r\n\r\n    font-weight: 700;\r\n\r\n    letter-spacing: 2.8px;\r\n\r\n    text-transform: uppercase;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TITLE\r\n========================================================= *\/\r\n\r\n.bkc-title {\r\n    margin: 0;\r\n\r\n    color: var(--bkc-dark);\r\n\r\n    font-family: 'Playfair Display', serif;\r\n\r\n    font-size: clamp(66px, 7.5vw, 108px);\r\n\r\n    line-height: .87;\r\n\r\n    letter-spacing: -4.5px;\r\n\r\n    font-weight: 600;\r\n\r\n    opacity: 0;\r\n\r\n    transform: translateY(45px);\r\n}\r\n\r\n.bkc-hero.active .bkc-title {\r\n    animation:\r\n        bkcTitle\r\n        1s\r\n        cubic-bezier(.16,1,.3,1)\r\n        .32s\r\n        forwards;\r\n}\r\n\r\n\r\n.bkc-title-line {\r\n    display: block;\r\n}\r\n\r\n\r\n.bkc-title-line:nth-child(2) {\r\n    color: var(--bkc-caramel);\r\n\r\n    font-style: italic;\r\n}\r\n\r\n\r\n.bkc-title-line:nth-child(2)::after {\r\n    content: \"\";\r\n\r\n    display: block;\r\n\r\n    width: 0;\r\n    height: 6px;\r\n\r\n    margin-top: 10px;\r\n\r\n    border-radius: 20px;\r\n\r\n    background: rgba(185,121,69,.28);\r\n}\r\n\r\n.bkc-hero.active\r\n.bkc-title-line:nth-child(2)::after {\r\n    animation:\r\n        bkcLine\r\n        .8s\r\n        ease\r\n        1.05s\r\n        forwards;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DESCRIPTION\r\n========================================================= *\/\r\n\r\n.bkc-description {\r\n    max-width: 520px;\r\n\r\n    margin: 32px 0 31px;\r\n\r\n    color: var(--bkc-muted);\r\n\r\n    font-size: 15px;\r\n\r\n    line-height: 1.85;\r\n\r\n    font-weight: 400;\r\n\r\n    opacity: 0;\r\n\r\n    transform: translateY(20px);\r\n}\r\n\r\n.bkc-hero.active .bkc-description {\r\n    animation:\r\n        bkcUp\r\n        .8s\r\n        ease\r\n        .55s\r\n        forwards;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BUTTONS\r\n========================================================= *\/\r\n\r\n.bkc-actions {\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    gap: 13px;\r\n\r\n    margin-bottom: 38px;\r\n\r\n    opacity: 0;\r\n\r\n    transform: translateY(20px);\r\n}\r\n\r\n.bkc-hero.active .bkc-actions {\r\n    animation:\r\n        bkcUp\r\n        .8s\r\n        ease\r\n        .7s\r\n        forwards;\r\n}\r\n\r\n\r\n.bkc-primary {\r\n    position: relative;\r\n\r\n    display: inline-flex;\r\n\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    gap: 14px;\r\n\r\n    min-height: 54px;\r\n\r\n    padding: 0 27px;\r\n\r\n    border-radius: 3px;\r\n\r\n    background: var(--bkc-dark);\r\n\r\n    color: #fff !important;\r\n\r\n    text-decoration: none !important;\r\n\r\n    font-size: 10px;\r\n\r\n    font-weight: 700;\r\n\r\n    letter-spacing: 1.5px;\r\n\r\n    text-transform: uppercase;\r\n\r\n    overflow: hidden;\r\n\r\n    transition:\r\n        transform .3s ease,\r\n        box-shadow .3s ease;\r\n}\r\n\r\n\r\n.bkc-primary::before {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    inset: 0;\r\n\r\n    background: var(--bkc-caramel);\r\n\r\n    transform: translateX(-101%);\r\n\r\n    transition:\r\n        transform .45s\r\n        cubic-bezier(.16,1,.3,1);\r\n}\r\n\r\n\r\n.bkc-primary:hover {\r\n    transform: translateY(-3px);\r\n\r\n    box-shadow:\r\n        0 14px 30px rgba(36,21,15,.2);\r\n}\r\n\r\n\r\n.bkc-primary:hover::before {\r\n    transform: translateX(0);\r\n}\r\n\r\n\r\n.bkc-primary span,\r\n.bkc-primary svg {\r\n    position: relative;\r\n\r\n    z-index: 2;\r\n}\r\n\r\n\r\n.bkc-primary svg {\r\n    width: 17px;\r\n    height: 17px;\r\n\r\n    transition: transform .3s ease;\r\n}\r\n\r\n\r\n.bkc-primary:hover svg {\r\n    transform: translateX(4px);\r\n}\r\n\r\n\r\n.bkc-secondary {\r\n    display: inline-flex;\r\n\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    min-height: 54px;\r\n\r\n    padding: 0 26px;\r\n\r\n    border: 1px solid rgba(36,21,15,.18);\r\n\r\n    border-radius: 3px;\r\n\r\n    color: var(--bkc-dark) !important;\r\n\r\n    text-decoration: none !important;\r\n\r\n    font-size: 10px;\r\n\r\n    font-weight: 700;\r\n\r\n    letter-spacing: 1.5px;\r\n\r\n    text-transform: uppercase;\r\n\r\n    transition:\r\n        background .3s ease,\r\n        color .3s ease,\r\n        transform .3s ease;\r\n}\r\n\r\n\r\n.bkc-secondary:hover {\r\n    background: var(--bkc-dark);\r\n\r\n    color: #fff !important;\r\n\r\n    transform: translateY(-3px);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BENEFITS\r\n========================================================= *\/\r\n\r\n.bkc-benefits {\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    gap: 25px;\r\n\r\n    opacity: 0;\r\n\r\n    transform: translateY(20px);\r\n}\r\n\r\n.bkc-hero.active .bkc-benefits {\r\n    animation:\r\n        bkcUp\r\n        .8s\r\n        ease\r\n        .85s\r\n        forwards;\r\n}\r\n\r\n\r\n.bkc-benefit {\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    gap: 9px;\r\n\r\n    color: var(--bkc-muted);\r\n\r\n    font-size: 10px;\r\n\r\n    font-weight: 600;\r\n}\r\n\r\n\r\n.bkc-benefit-icon {\r\n    width: 27px;\r\n    height: 27px;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    border: 1px solid rgba(111,73,48,.18);\r\n\r\n    border-radius: 50%;\r\n\r\n    color: var(--bkc-brown);\r\n\r\n    transition:\r\n        background .3s ease,\r\n        color .3s ease,\r\n        transform .3s ease;\r\n}\r\n\r\n\r\n.bkc-benefit:hover .bkc-benefit-icon {\r\n    background: var(--bkc-dark);\r\n\r\n    color: #fff;\r\n\r\n    transform: translateY(-2px);\r\n}\r\n\r\n\r\n.bkc-benefit-icon svg {\r\n    width: 13px;\r\n    height: 13px;\r\n}\r\n\r\n\r\n.bkc-divider {\r\n    width: 1px;\r\n    height: 20px;\r\n\r\n    background: rgba(36,21,15,.12);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   RIGHT VISUAL\r\n   IMPORTANT:\r\n   This area DOES NOT contain the image.\r\n   Image is fixed behind it.\r\n========================================================= *\/\r\n\r\n.bkc-visual {\r\n    position: relative;\r\n\r\n    height: 100%;\r\n\r\n    min-height: 650px;\r\n\r\n    width: 100%;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    z-index: 15;\r\n\r\n    opacity: 0;\r\n\r\n    transform: translateX(45px);\r\n}\r\n\r\n.bkc-hero.active .bkc-visual {\r\n    animation:\r\n        bkcVisual\r\n        1.1s\r\n        cubic-bezier(.16,1,.3,1)\r\n        .35s\r\n        forwards;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   STAMP\r\n========================================================= *\/\r\n\r\n.bkc-stamp {\r\n    position: absolute;\r\n\r\n    left: 4%;\r\n\r\n    top: 12%;\r\n\r\n    width: 105px;\r\n    height: 105px;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: var(--bkc-caramel);\r\n\r\n    color: #fff;\r\n\r\n    z-index: 25;\r\n\r\n    box-shadow:\r\n        0 20px 45px rgba(0,0,0,.30);\r\n\r\n    animation:\r\n        bkcFloat\r\n        5s\r\n        ease-in-out\r\n        infinite;\r\n}\r\n\r\n\r\n.bkc-stamp::before {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    inset: 7px;\r\n\r\n    border: 1px solid rgba(255,255,255,.35);\r\n\r\n    border-radius: 50%;\r\n}\r\n\r\n\r\n.bkc-stamp::after {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    inset: 12px;\r\n\r\n    border: 1px dashed rgba(255,255,255,.20);\r\n\r\n    border-radius: 50%;\r\n}\r\n\r\n\r\n.bkc-stamp span {\r\n    position: relative;\r\n\r\n    z-index: 2;\r\n\r\n    max-width: 62px;\r\n\r\n    text-align: center;\r\n\r\n    font-size: 7px;\r\n\r\n    line-height: 1.55;\r\n\r\n    font-weight: 700;\r\n\r\n    letter-spacing: 1px;\r\n\r\n    text-transform: uppercase;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MARKET INFO\r\n========================================================= *\/\r\n\r\n.bkc-side-info {\r\n    position: absolute;\r\n\r\n    right: 5%;\r\n\r\n    bottom: 10%;\r\n\r\n    z-index: 25;\r\n\r\n    width: 205px;\r\n\r\n    padding: 22px 23px 21px;\r\n\r\n    color: rgba(255,255,255,.72);\r\n\r\n    background:\r\n        rgba(36,21,15,.72);\r\n\r\n    border: 1px solid rgba(255,255,255,.13);\r\n\r\n    backdrop-filter: blur(12px);\r\n\r\n    -webkit-backdrop-filter: blur(12px);\r\n\r\n    box-shadow:\r\n        0 20px 50px rgba(0,0,0,.22);\r\n\r\n    opacity: 0;\r\n\r\n    transform: translateY(20px);\r\n}\r\n\r\n\r\n.bkc-hero.active .bkc-side-info {\r\n    animation:\r\n        bkcInfoReveal\r\n        .8s\r\n        cubic-bezier(.16,1,.3,1)\r\n        1s\r\n        forwards;\r\n}\r\n\r\n\r\n.bkc-side-info-label {\r\n    margin-bottom: 10px;\r\n\r\n    font-size: 8px;\r\n\r\n    font-weight: 700;\r\n\r\n    letter-spacing: 2px;\r\n\r\n    text-transform: uppercase;\r\n\r\n    color: rgba(255,255,255,.52);\r\n}\r\n\r\n\r\n.bkc-side-info-title {\r\n    margin: 0 0 7px;\r\n\r\n    color: #fff;\r\n\r\n    font-family: 'Playfair Display', serif;\r\n\r\n    font-size: 25px;\r\n\r\n    line-height: 1.05;\r\n}\r\n\r\n\r\n.bkc-side-info-text {\r\n    margin: 0;\r\n\r\n    font-size: 9px;\r\n\r\n    line-height: 1.7;\r\n\r\n    color: rgba(255,255,255,.60);\r\n}\r\n\r\n\r\n.bkc-side-line {\r\n    width: 45px;\r\n    height: 1px;\r\n\r\n    margin-top: 18px;\r\n\r\n    background: var(--bkc-caramel);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   VERTICAL LABEL\r\n========================================================= *\/\r\n\r\n.bkc-image-label {\r\n    position: absolute;\r\n\r\n    right: 20px;\r\n\r\n    top: 50%;\r\n\r\n    transform:\r\n        translateY(-50%)\r\n        rotate(180deg);\r\n\r\n    writing-mode: vertical-rl;\r\n\r\n    color: rgba(255,255,255,.55);\r\n\r\n    font-size: 8px;\r\n\r\n    font-weight: 700;\r\n\r\n    letter-spacing: 3px;\r\n\r\n    text-transform: uppercase;\r\n\r\n    z-index: 25;\r\n\r\n    opacity: 0;\r\n}\r\n\r\n\r\n.bkc-hero.active .bkc-image-label {\r\n    animation:\r\n        bkcLabelReveal\r\n        .8s\r\n        ease\r\n        1.15s\r\n        forwards;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   IMAGE BOTTOM LABEL\r\n========================================================= *\/\r\n\r\n.bkc-image-bottom {\r\n    position: absolute;\r\n\r\n    left: 6%;\r\n\r\n    bottom: 7%;\r\n\r\n    z-index: 25;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    gap: 10px;\r\n\r\n    color: rgba(255,255,255,.85);\r\n\r\n    font-size: 8px;\r\n\r\n    font-weight: 700;\r\n\r\n    letter-spacing: 1.8px;\r\n\r\n    text-transform: uppercase;\r\n\r\n    opacity: 0;\r\n}\r\n\r\n\r\n.bkc-hero.active .bkc-image-bottom {\r\n    animation:\r\n        bkcUp\r\n        .8s\r\n        ease\r\n        1.15s\r\n        forwards;\r\n}\r\n\r\n\r\n.bkc-image-bottom-line {\r\n    width: 30px;\r\n    height: 1px;\r\n\r\n    background: rgba(255,255,255,.65);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BOTTOM MARKET\r\n========================================================= *\/\r\n\r\n.bkc-bottom {\r\n    position: absolute;\r\n\r\n    left: 65px;\r\n\r\n    bottom: 24px;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    gap: 12px;\r\n\r\n    z-index: 30;\r\n\r\n    opacity: 0;\r\n}\r\n\r\n\r\n.bkc-hero.active .bkc-bottom {\r\n    animation:\r\n        bkcUp\r\n        .8s\r\n        ease\r\n        1.1s\r\n        forwards;\r\n}\r\n\r\n\r\n.bkc-bottom-line {\r\n    width: 35px;\r\n    height: 1px;\r\n\r\n    background: var(--bkc-caramel);\r\n}\r\n\r\n\r\n.bkc-bottom-text {\r\n    color: var(--bkc-muted);\r\n\r\n    font-size: 8px;\r\n\r\n    font-weight: 700;\r\n\r\n    letter-spacing: 1.3px;\r\n\r\n    text-transform: uppercase;\r\n}\r\n\r\n\r\n.bkc-bottom-text strong {\r\n    color: var(--bkc-brown);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ANIMATIONS\r\n========================================================= *\/\r\n\r\n@keyframes bkcHeader {\r\n\r\n    from {\r\n        opacity: 0;\r\n        transform: translateY(-15px);\r\n    }\r\n\r\n    to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n\r\n}\r\n\r\n\r\n@keyframes bkcUp {\r\n\r\n    from {\r\n        opacity: 0;\r\n        transform: translateY(25px);\r\n    }\r\n\r\n    to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n\r\n}\r\n\r\n\r\n@keyframes bkcTitle {\r\n\r\n    from {\r\n        opacity: 0;\r\n        transform: translateY(45px);\r\n    }\r\n\r\n    to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n\r\n}\r\n\r\n\r\n@keyframes bkcVisual {\r\n\r\n    from {\r\n        opacity: 0;\r\n        transform:\r\n            translateX(45px);\r\n    }\r\n\r\n    to {\r\n        opacity: 1;\r\n        transform:\r\n            translateX(0);\r\n    }\r\n\r\n}\r\n\r\n\r\n@keyframes bkcInfoReveal {\r\n\r\n    from {\r\n        opacity: 0;\r\n        transform: translateY(25px);\r\n    }\r\n\r\n    to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n\r\n}\r\n\r\n\r\n@keyframes bkcLabelReveal {\r\n\r\n    from {\r\n        opacity: 0;\r\n        transform:\r\n            translateY(-50%)\r\n            rotate(180deg)\r\n            translateX(15px);\r\n    }\r\n\r\n    to {\r\n        opacity: 1;\r\n        transform:\r\n            translateY(-50%)\r\n            rotate(180deg)\r\n            translateX(0);\r\n    }\r\n\r\n}\r\n\r\n\r\n@keyframes bkcLine {\r\n\r\n    from {\r\n        width: 0;\r\n    }\r\n\r\n    to {\r\n        width: 285px;\r\n    }\r\n\r\n}\r\n\r\n\r\n@keyframes bkcFloat {\r\n\r\n    0%,\r\n    100% {\r\n        transform:\r\n            translateY(0)\r\n            rotate(-5deg);\r\n    }\r\n\r\n    50% {\r\n        transform:\r\n            translateY(-11px)\r\n            rotate(1deg);\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LARGE DESKTOP\r\n========================================================= *\/\r\n\r\n@media (min-width: 1500px) {\r\n\r\n    .bkc-right-image {\r\n        width: 44%;\r\n    }\r\n\r\n    .bkc-image-glow {\r\n        width: 44%;\r\n    }\r\n\r\n    .bkc-image-border {\r\n        width: calc(44% - 44px);\r\n    }\r\n\r\n    .bkc-hero-inner {\r\n        padding-left: 75px;\r\n        padding-right: 75px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LAPTOP\r\n========================================================= *\/\r\n\r\n@media (max-width: 1100px) {\r\n\r\n    .bkc-right-image {\r\n        width: 43%;\r\n    }\r\n\r\n    .bkc-image-glow {\r\n        width: 43%;\r\n    }\r\n\r\n    .bkc-image-border {\r\n        width: calc(43% - 44px);\r\n    }\r\n\r\n    .bkc-hero-inner {\r\n        padding-left: 35px;\r\n        padding-right: 35px;\r\n    }\r\n\r\n    .bkc-main {\r\n        grid-template-columns: 52% 48%;\r\n    }\r\n\r\n    .bkc-title {\r\n        font-size:\r\n            clamp(\r\n                58px,\r\n                7vw,\r\n                82px\r\n            );\r\n    }\r\n\r\n    .bkc-side-info {\r\n        right: 4%;\r\n\r\n        width: 180px;\r\n    }\r\n\r\n    .bkc-stamp {\r\n        left: 3%;\r\n\r\n        width: 88px;\r\n        height: 88px;\r\n    }\r\n\r\n    .bkc-image-label {\r\n        right: 12px;\r\n    }\r\n\r\n    .bkc-bottom {\r\n        left: 35px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media (max-width: 850px) {\r\n\r\n    .bkc-hero {\r\n        min-height: auto;\r\n    }\r\n\r\n\r\n    \/* -----------------------------------------------------\r\n       MOBILE\/TABLET IMAGE MOVES BELOW CONTENT\r\n    ----------------------------------------------------- *\/\r\n\r\n    .bkc-right-image {\r\n        top: 57%;\r\n\r\n        right: 0;\r\n        bottom: auto;\r\n\r\n        width: 100%;\r\n        height: 43%;\r\n\r\n        min-height: 0;\r\n    }\r\n\r\n\r\n    .bkc-image-glow {\r\n        top: 57%;\r\n\r\n        right: 0;\r\n\r\n        width: 100%;\r\n        height: 43%;\r\n    }\r\n\r\n\r\n    .bkc-image-border {\r\n        top: calc(57% + 18px);\r\n\r\n        right: 18px;\r\n\r\n        bottom: auto;\r\n\r\n        width: calc(100% - 36px);\r\n\r\n        height: calc(43% - 36px);\r\n    }\r\n\r\n\r\n    .bkc-hero-inner {\r\n\r\n        min-height: auto;\r\n\r\n        padding:\r\n            25px\r\n            22px\r\n            60px;\r\n    }\r\n\r\n\r\n    .bkc-main {\r\n\r\n        display: flex;\r\n\r\n        flex-direction: column;\r\n\r\n        padding-top: 55px;\r\n    }\r\n\r\n\r\n    .bkc-copy {\r\n\r\n        width: 100%;\r\n\r\n        max-width: 680px;\r\n\r\n        text-align: center;\r\n    }\r\n\r\n\r\n    .bkc-eyebrow {\r\n\r\n        justify-content: center;\r\n    }\r\n\r\n\r\n    .bkc-title {\r\n\r\n        font-size:\r\n            clamp(\r\n                55px,\r\n                11vw,\r\n                80px\r\n            );\r\n    }\r\n\r\n\r\n    .bkc-description {\r\n\r\n        margin-left: auto;\r\n\r\n        margin-right: auto;\r\n    }\r\n\r\n\r\n    .bkc-actions {\r\n\r\n        justify-content: center;\r\n    }\r\n\r\n\r\n    .bkc-benefits {\r\n\r\n        justify-content: center;\r\n    }\r\n\r\n\r\n    .bkc-visual {\r\n\r\n        width: 100%;\r\n\r\n        height: 540px;\r\n\r\n        min-height: 540px;\r\n\r\n        margin-top: 25px;\r\n    }\r\n\r\n\r\n    .bkc-stamp {\r\n\r\n        left: 7%;\r\n\r\n        top: 9%;\r\n    }\r\n\r\n\r\n    .bkc-side-info {\r\n\r\n        right: 7%;\r\n\r\n        bottom: 8%;\r\n    }\r\n\r\n\r\n    .bkc-image-label {\r\n\r\n        right: 4%;\r\n\r\n        top: 50%;\r\n    }\r\n\r\n\r\n    .bkc-image-bottom {\r\n\r\n        left: 8%;\r\n\r\n        bottom: 8%;\r\n    }\r\n\r\n\r\n    .bkc-bottom {\r\n\r\n        position: relative;\r\n\r\n        left: auto;\r\n\r\n        bottom: auto;\r\n\r\n        justify-content: center;\r\n\r\n        margin-top: 20px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 560px) {\r\n\r\n    .bkc-hero-inner {\r\n\r\n        padding:\r\n            18px\r\n            16px\r\n            45px;\r\n    }\r\n\r\n\r\n    .bkc-header {\r\n\r\n        padding-bottom: 18px;\r\n    }\r\n\r\n\r\n    .bkc-header-right {\r\n\r\n        display: none;\r\n    }\r\n\r\n\r\n    .bkc-logo-circle {\r\n\r\n        width: 34px;\r\n        height: 34px;\r\n    }\r\n\r\n\r\n    .bkc-logo-text {\r\n\r\n        font-size: 8px;\r\n\r\n        letter-spacing: 2px;\r\n    }\r\n\r\n\r\n    .bkc-main {\r\n\r\n        padding-top: 45px;\r\n    }\r\n\r\n\r\n    .bkc-eyebrow {\r\n\r\n        margin-bottom: 20px;\r\n    }\r\n\r\n\r\n    .bkc-eyebrow-text {\r\n\r\n        font-size: 8px;\r\n\r\n        letter-spacing: 2px;\r\n    }\r\n\r\n\r\n    .bkc-title {\r\n\r\n        font-size:\r\n            clamp(\r\n                45px,\r\n                13vw,\r\n                63px\r\n            );\r\n\r\n        line-height: .92;\r\n\r\n        letter-spacing: -2.5px;\r\n    }\r\n\r\n\r\n    .bkc-title-line:nth-child(2)::after {\r\n\r\n        height: 5px;\r\n\r\n        margin-top: 7px;\r\n    }\r\n\r\n\r\n    .bkc-description {\r\n\r\n        margin-top: 25px;\r\n\r\n        font-size: 13px;\r\n\r\n        line-height: 1.75;\r\n    }\r\n\r\n\r\n    .bkc-actions {\r\n\r\n        flex-direction: column;\r\n\r\n        width: 100%;\r\n\r\n        gap: 9px;\r\n    }\r\n\r\n\r\n    .bkc-primary,\r\n    .bkc-secondary {\r\n\r\n        width: 100%;\r\n\r\n        min-height: 51px;\r\n    }\r\n\r\n\r\n    .bkc-benefits {\r\n\r\n        flex-direction: column;\r\n\r\n        gap: 11px;\r\n    }\r\n\r\n\r\n    .bkc-divider {\r\n\r\n        display: none;\r\n    }\r\n\r\n\r\n    \/* -----------------------------------------------------\r\n       MOBILE IMAGE\r\n       \u2713 FULL WIDTH\r\n       \u2713 NO SIDE GAP\r\n       \u2713 NO TOP\/BOTTOM GAP INSIDE PANEL\r\n    ----------------------------------------------------- *\/\r\n\r\n    .bkc-right-image {\r\n\r\n        top: 57%;\r\n\r\n        right: 0;\r\n\r\n        width: 100%;\r\n\r\n        height: 43%;\r\n\r\n        min-height: 0;\r\n    }\r\n\r\n\r\n    .bkc-image-glow {\r\n\r\n        top: 57%;\r\n\r\n        right: 0;\r\n\r\n        width: 100%;\r\n\r\n        height: 43%;\r\n    }\r\n\r\n\r\n    .bkc-image-border {\r\n\r\n        top: calc(57% + 12px);\r\n\r\n        right: 12px;\r\n\r\n        width: calc(100% - 24px);\r\n\r\n        height: calc(43% - 24px);\r\n    }\r\n\r\n\r\n    .bkc-visual {\r\n\r\n        height: 445px;\r\n\r\n        min-height: 445px;\r\n\r\n        margin-top: 10px;\r\n    }\r\n\r\n\r\n    .bkc-stamp {\r\n\r\n        width: 70px;\r\n\r\n        height: 70px;\r\n\r\n        left: 2px;\r\n\r\n        top: 28px;\r\n    }\r\n\r\n\r\n    .bkc-stamp span {\r\n\r\n        max-width: 43px;\r\n\r\n        font-size: 5.5px;\r\n    }\r\n\r\n\r\n    .bkc-side-info {\r\n\r\n        right: 0;\r\n\r\n        bottom: 15px;\r\n\r\n        width: 155px;\r\n\r\n        padding:\r\n            15px\r\n            16px\r\n            14px;\r\n    }\r\n\r\n\r\n    .bkc-side-info-label {\r\n\r\n        font-size: 7px;\r\n\r\n        margin-bottom: 8px;\r\n    }\r\n\r\n\r\n    .bkc-side-info-title {\r\n\r\n        font-size: 19px;\r\n    }\r\n\r\n\r\n    .bkc-side-info-text {\r\n\r\n        font-size: 8px;\r\n    }\r\n\r\n\r\n    .bkc-side-line {\r\n\r\n        margin-top: 12px;\r\n\r\n        width: 32px;\r\n    }\r\n\r\n\r\n    .bkc-image-label {\r\n\r\n        display: none;\r\n    }\r\n\r\n\r\n    .bkc-image-bottom {\r\n\r\n        left: 5%;\r\n\r\n        bottom: 17px;\r\n\r\n        font-size: 6.5px;\r\n\r\n        letter-spacing: 1px;\r\n    }\r\n\r\n\r\n    .bkc-image-bottom-line {\r\n\r\n        width: 20px;\r\n    }\r\n\r\n\r\n    .bkc-bottom {\r\n\r\n        margin-top: 5px;\r\n    }\r\n\r\n\r\n    .bkc-bottom-text {\r\n\r\n        font-size: 7px;\r\n\r\n        letter-spacing: .8px;\r\n\r\n        text-align: center;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   VERY SMALL\r\n========================================================= *\/\r\n\r\n@media (max-width: 380px) {\r\n\r\n    .bkc-title {\r\n\r\n        font-size: 41px;\r\n    }\r\n\r\n\r\n    .bkc-visual {\r\n\r\n        height: 400px;\r\n\r\n        min-height: 400px;\r\n    }\r\n\r\n\r\n    .bkc-side-info {\r\n\r\n        width: 135px;\r\n\r\n        padding: 13px;\r\n    }\r\n\r\n\r\n    .bkc-side-info-title {\r\n\r\n        font-size: 17px;\r\n    }\r\n\r\n\r\n    .bkc-stamp {\r\n\r\n        width: 60px;\r\n\r\n        height: 60px;\r\n\r\n        left: 0;\r\n    }\r\n\r\n\r\n    .bkc-stamp span {\r\n\r\n        max-width: 38px;\r\n\r\n        font-size: 5px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REDUCED MOTION\r\n========================================================= *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n    .bkc-hero * {\r\n\r\n        animation: none !important;\r\n\r\n        transition: none !important;\r\n    }\r\n\r\n\r\n    .bkc-header,\r\n    .bkc-eyebrow,\r\n    .bkc-title,\r\n    .bkc-description,\r\n    .bkc-actions,\r\n    .bkc-benefits,\r\n    .bkc-visual,\r\n    .bkc-bottom,\r\n    .bkc-side-info,\r\n    .bkc-image-label,\r\n    .bkc-image-bottom {\r\n\r\n        opacity: 1 !important;\r\n\r\n        transform: none !important;\r\n    }\r\n\r\n}\r\n<\/style>\r\n\r\n\r\n<!-- =========================================================\r\n     HERO\r\n========================================================= -->\r\n\r\n<section class=\"bkc-hero\" id=\"bkcHero\">\r\n\r\n\r\n    <!-- =====================================================\r\n         FIXED RIGHT IMAGE\r\n         THIS IMAGE ALWAYS COVERS THE COMPLETE RIGHT PANEL\r\n    ====================================================== -->\r\n\r\n    <div class=\"bkc-right-image\">\r\n\r\n        <img decoding=\"async\"\r\n            src=\"https:\/\/cookieswp2.mystartupcrew.com\/wp-content\/uploads\/2026\/09\/495a4e03b7d750b86bab709e5d84870b.jpg\"\r\n            alt=\"Freshly baked chocolate chip cookies\"\r\n        >\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- IMAGE BORDER -->\r\n\r\n    <div class=\"bkc-image-border\"><\/div>\r\n\r\n\r\n    <!-- IMAGE GLOW -->\r\n\r\n    <div class=\"bkc-image-glow\"><\/div>\r\n\r\n\r\n\r\n    <div class=\"bkc-hero-inner\">\r\n\r\n\r\n        <!-- =================================================\r\n             HEADER\r\n        ================================================= -->\r\n\r\n        <div class=\"bkc-header\">\r\n\r\n            <div class=\"bkc-logo\">\r\n\r\n                <div class=\"bkc-logo-circle\">\r\n                    B\r\n                <\/div>\r\n\r\n                <div class=\"bkc-logo-text\">\r\n                    Brooklyn Cookies\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"bkc-header-right\">\r\n\r\n                <span class=\"bkc-header-dot\"><\/span>\r\n\r\n                Freshly Baked Today\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <!-- =================================================\r\n             MAIN\r\n        ================================================= -->\r\n\r\n        <div class=\"bkc-main\">\r\n\r\n\r\n            <!-- =================================================\r\n                 LEFT CONTENT\r\n            ================================================= -->\r\n\r\n            <div class=\"bkc-copy\">\r\n\r\n\r\n                <!-- EYEBROW -->\r\n\r\n                <div class=\"bkc-eyebrow\">\r\n\r\n                    <span class=\"bkc-eyebrow-line\"><\/span>\r\n\r\n                    <span class=\"bkc-eyebrow-text\">\r\n                        Freshly Baked \u2022 Locally Loved\r\n                    <\/span>\r\n\r\n                <\/div>\r\n\r\n\r\n\r\n                <!-- TITLE -->\r\n\r\n                <h1 class=\"bkc-title\">\r\n\r\n                    <span class=\"bkc-title-line\">\r\n                        Baked Fresh,\r\n                    <\/span>\r\n\r\n                    <span class=\"bkc-title-line\">\r\n                        Made to Crave.\r\n                    <\/span>\r\n\r\n                <\/h1>\r\n\r\n\r\n\r\n                <!-- DESCRIPTION -->\r\n\r\n                <p class=\"bkc-description\">\r\n\r\n                    Handcrafted cookies baked fresh daily with premium ingredients\r\n                    and a whole lot of love. Pre-order your favorites and pick them\r\n                    up at our next local market.\r\n\r\n                <\/p>\r\n\r\n\r\n\r\n                <!-- BUTTONS -->\r\n\r\n                <div class=\"bkc-actions\">\r\n\r\n\r\n                    <a href=\"#\" class=\"bkc-primary\">\r\n\r\n                        <span>\r\n                            Pre-Order Now\r\n                        <\/span>\r\n\r\n\r\n                        <svg\r\n                            viewBox=\"0 0 24 24\"\r\n                            fill=\"none\"\r\n                            xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n                            aria-hidden=\"true\"\r\n                        >\r\n\r\n                            <path\r\n                                d=\"M5 12H19\"\r\n                                stroke=\"currentColor\"\r\n                                stroke-width=\"2\"\r\n                                stroke-linecap=\"round\"\r\n                            \/>\r\n\r\n                            <path\r\n                                d=\"M13 6L19 12L13 18\"\r\n                                stroke=\"currentColor\"\r\n                                stroke-width=\"2\"\r\n                                stroke-linecap=\"round\"\r\n                                stroke-linejoin=\"round\"\r\n                            \/>\r\n\r\n                        <\/svg>\r\n\r\n                    <\/a>\r\n\r\n\r\n\r\n                    <a href=\"#\" class=\"bkc-secondary\">\r\n\r\n                        View Our Menu\r\n\r\n                    <\/a>\r\n\r\n\r\n                <\/div>\r\n\r\n\r\n\r\n                <!-- BENEFITS -->\r\n\r\n                <div class=\"bkc-benefits\">\r\n\r\n\r\n                    <div class=\"bkc-benefit\">\r\n\r\n                        <span class=\"bkc-benefit-icon\">\r\n\r\n                            <svg\r\n                                viewBox=\"0 0 24 24\"\r\n                                fill=\"none\"\r\n                            >\r\n\r\n                                <path\r\n                                    d=\"M12 3C7.5 3 4 6.2 4 10.2C4 15.1 8.4 19.1 12 21C15.6 19.1 20 15.1 20 10.2C20 6.2 16.5 3 12 3Z\"\r\n                                    stroke=\"currentColor\"\r\n                                    stroke-width=\"1.7\"\r\n                                \/>\r\n\r\n                                <path\r\n                                    d=\"M8.5 10.5C9.2 11.2 10.2 11.5 11.2 11.3\"\r\n                                    stroke=\"currentColor\"\r\n                                    stroke-width=\"1.7\"\r\n                                    stroke-linecap=\"round\"\r\n                                \/>\r\n\r\n                            <\/svg>\r\n\r\n                        <\/span>\r\n\r\n                        Fresh Daily\r\n\r\n                    <\/div>\r\n\r\n\r\n                    <span class=\"bkc-divider\"><\/span>\r\n\r\n\r\n                    <div class=\"bkc-benefit\">\r\n\r\n                        <span class=\"bkc-benefit-icon\">\r\n\r\n                            <svg\r\n                                viewBox=\"0 0 24 24\"\r\n                                fill=\"none\"\r\n                            >\r\n\r\n                                <path\r\n                                    d=\"M12 21C16.5 17.2 19 13.8 19 9.8C19 6 16 3 12 3C8 3 5 6 5 9.8C5 13.8 7.5 17.2 12 21Z\"\r\n                                    stroke=\"currentColor\"\r\n                                    stroke-width=\"1.7\"\r\n                                \/>\r\n\r\n                                <circle\r\n                                    cx=\"12\"\r\n                                    cy=\"9\"\r\n                                    r=\"2.3\"\r\n                                    stroke=\"currentColor\"\r\n                                    stroke-width=\"1.7\"\r\n                                \/>\r\n\r\n                            <\/svg>\r\n\r\n                        <\/span>\r\n\r\n                        Local Pickup\r\n\r\n                    <\/div>\r\n\r\n\r\n                    <span class=\"bkc-divider\"><\/span>\r\n\r\n\r\n                    <div class=\"bkc-benefit\">\r\n\r\n                        <span class=\"bkc-benefit-icon\">\r\n\r\n                            <svg\r\n                                viewBox=\"0 0 24 24\"\r\n                                fill=\"none\"\r\n                            >\r\n\r\n                                <path\r\n                                    d=\"M12 3L14.5 8L20 8.8L16 12.7L17 18.2L12 15.6L7 18.2L8 12.7L9.5 8L12 3Z\"\r\n                                    stroke=\"currentColor\"\r\n                                    stroke-width=\"1.7\"\r\n                                    stroke-linejoin=\"round\"\r\n                                \/>\r\n\r\n                            <\/svg>\r\n\r\n                        <\/span>\r\n\r\n                        Made with Love\r\n\r\n                    <\/div>\r\n\r\n\r\n                <\/div>\r\n\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <!-- =================================================\r\n                 RIGHT CONTENT \/ IMAGE OVERLAY CONTENT\r\n            ================================================= -->\r\n\r\n            <div class=\"bkc-visual\">\r\n\r\n\r\n                <!-- STAMP -->\r\n\r\n                <div class=\"bkc-stamp\">\r\n\r\n                    <span>\r\n\r\n                        Handcrafted\r\n\r\n                        <br>\r\n\r\n                        With Love\r\n\r\n                    <\/span>\r\n\r\n                <\/div>\r\n\r\n\r\n\r\n                <!-- MARKET INFO -->\r\n\r\n                <div class=\"bkc-side-info\">\r\n\r\n                    <div class=\"bkc-side-info-label\">\r\n                        Next Market\r\n                    <\/div>\r\n\r\n\r\n                    <h3 class=\"bkc-side-info-title\">\r\n                        This Saturday\r\n                    <\/h3>\r\n\r\n\r\n                    <p class=\"bkc-side-info-text\">\r\n\r\n                        Fresh cookies\r\n\r\n                        <br>\r\n\r\n                        9:00 AM \u2013 2:00 PM\r\n\r\n                    <\/p>\r\n\r\n\r\n                    <div class=\"bkc-side-line\"><\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n\r\n                <!-- VERTICAL TEXT -->\r\n\r\n                <div class=\"bkc-image-label\">\r\n\r\n                    Small Batch \u2022 Big Flavor\r\n\r\n                <\/div>\r\n\r\n\r\n\r\n                <!-- IMAGE BOTTOM LABEL -->\r\n\r\n                <div class=\"bkc-image-bottom\">\r\n\r\n                    <span class=\"bkc-image-bottom-line\"><\/span>\r\n\r\n                    Freshly Baked\r\n\r\n                <\/div>\r\n\r\n\r\n            <\/div>\r\n\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <!-- =================================================\r\n             BOTTOM MARKET\r\n        ================================================= -->\r\n\r\n        <div class=\"bkc-bottom\">\r\n\r\n            <span class=\"bkc-bottom-line\"><\/span>\r\n\r\n\r\n            <div class=\"bkc-bottom-text\">\r\n\r\n                Find us this weekend\r\n\r\n                &nbsp;\u2022&nbsp;\r\n\r\n                <strong>\r\n                    Local Flea Market \u2022 Booth #12\r\n                <\/strong>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n\r\n<script>\r\n\r\ndocument.addEventListener(\r\n    'DOMContentLoaded',\r\n    function () {\r\n\r\n        const hero =\r\n            document.getElementById('bkcHero');\r\n\r\n        if (!hero) return;\r\n\r\n\r\n        function activateHero() {\r\n\r\n            hero.classList.add('active');\r\n\r\n        }\r\n\r\n\r\n        if (\r\n            'IntersectionObserver'\r\n            in window\r\n        ) {\r\n\r\n            const observer =\r\n                new IntersectionObserver(\r\n\r\n                    function (entries) {\r\n\r\n                        entries.forEach(\r\n                            function (entry) {\r\n\r\n                                if (\r\n                                    entry.isIntersecting\r\n                                ) {\r\n\r\n                                    activateHero();\r\n\r\n                                    observer.unobserve(\r\n                                        hero\r\n                                    );\r\n\r\n                                }\r\n\r\n                            }\r\n                        );\r\n\r\n                    },\r\n\r\n                    {\r\n                        threshold: 0.08\r\n                    }\r\n\r\n                );\r\n\r\n\r\n            observer.observe(hero);\r\n\r\n        } else {\r\n\r\n            activateHero();\r\n\r\n        }\r\n\r\n    }\r\n\r\n);\r\n\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-65b6c16 e-con-full e-flex e-con e-parent\" data-id=\"65b6c16\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7b4d088 elementor-widget elementor-widget-html\" data-id=\"7b4d088\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* =========================================================\r\n   BROOKLYN COOKIES \u2014 ABOUT US\r\n   PREMIUM RESPONSIVE VERSION\r\n   Isolated CSS \u2014 ONLY affects .bkc-about\r\n========================================================= *\/\r\n\r\n.bkc-about,\r\n.bkc-about * {\r\n    box-sizing: border-box;\r\n}\r\n\r\n.bkc-about {\r\n    --about-dark: #24150f;\r\n    --about-dark-2: #352118;\r\n    --about-cream: #f4eee5;\r\n    --about-white: #ffffff;\r\n    --about-caramel: #b97945;\r\n    --about-brown: #74452d;\r\n    --about-muted: #796b61;\r\n    --about-line: rgba(36, 21, 15, .12);\r\n\r\n    position: relative;\r\n    width: 100%;\r\n    padding: 80px 0 80px;\r\n\r\n    background: #ffffff;\r\n\r\n    overflow: hidden;\r\n    isolation: isolate;\r\n\r\n    font-family: 'DM Sans', sans-serif;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FONT\r\n========================================================= *\/\r\n\r\n.bkc-about .bkc-about-serif,\r\n.bkc-about-heading,\r\n.bkc-about-content-title,\r\n.bkc-about-signature-text,\r\n.bkc-about-stat-number {\r\n    font-family: 'Playfair Display', serif;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BACKGROUND DECOR\r\n========================================================= *\/\r\n\r\n.bkc-about-bg-number {\r\n    position: absolute;\r\n\r\n    top: 40px;\r\n    right: -15px;\r\n\r\n    font-family: 'Playfair Display', serif;\r\n\r\n    font-size: clamp(180px, 22vw, 340px);\r\n    line-height: 1;\r\n    font-weight: 600;\r\n\r\n    color: rgba(36, 21, 15, .025);\r\n\r\n    pointer-events: none;\r\n    user-select: none;\r\n\r\n    z-index: -1;\r\n}\r\n\r\n\r\n.bkc-about-bg-circle {\r\n    position: absolute;\r\n\r\n    left: -180px;\r\n    bottom: -180px;\r\n\r\n    width: 430px;\r\n    height: 430px;\r\n\r\n    border: 1px solid rgba(185, 121, 69, .10);\r\n\r\n    border-radius: 50%;\r\n\r\n    pointer-events: none;\r\n}\r\n\r\n\r\n.bkc-about-bg-circle::before {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    inset: 35px;\r\n\r\n    border: 1px solid rgba(185, 121, 69, .08);\r\n\r\n    border-radius: 50%;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CONTAINER\r\n========================================================= *\/\r\n\r\n.bkc-about-container {\r\n    width: min(1420px, calc(100% - 110px));\r\n\r\n    margin: 0 auto;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TOP\r\n========================================================= *\/\r\n\r\n.bkc-about-top {\r\n    display: flex;\r\n\r\n    align-items: flex-end;\r\n    justify-content: space-between;\r\n\r\n    gap: 50px;\r\n\r\n    margin-bottom: 70px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HERO STYLE BADGE\r\n========================================================= *\/\r\n\r\n.bkc-about-badge {\r\n    display: inline-flex;\r\n\r\n    align-items: center;\r\n\r\n    gap: 13px;\r\n\r\n    margin-bottom: 25px;\r\n\r\n    opacity: 0;\r\n\r\n    transform: translateY(22px);\r\n}\r\n\r\n\r\n.bkc-about.active .bkc-about-badge {\r\n    animation: bkcAboutUp .8s cubic-bezier(.16,1,.3,1) .05s forwards;\r\n}\r\n\r\n\r\n.bkc-about-badge-line {\r\n    width: 42px;\r\n    height: 1px;\r\n\r\n    background: var(--about-caramel);\r\n}\r\n\r\n\r\n.bkc-about-badge-text {\r\n    color: var(--about-brown);\r\n\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n\r\n    letter-spacing: 2.8px;\r\n\r\n    text-transform: uppercase;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MAIN HEADING\r\n========================================================= *\/\r\n\r\n.bkc-about-heading {\r\n    max-width: 820px;\r\n\r\n    margin: 0;\r\n\r\n    color: var(--about-dark);\r\n\r\n    font-size: clamp(52px, 6vw, 88px);\r\n\r\n    line-height: .94;\r\n\r\n    letter-spacing: -3.5px;\r\n\r\n    font-weight: 600;\r\n\r\n    opacity: 0;\r\n\r\n    transform: translateY(40px);\r\n}\r\n\r\n\r\n.bkc-about.active .bkc-about-heading {\r\n    animation:\r\n        bkcAboutTitle\r\n        1s\r\n        cubic-bezier(.16,1,.3,1)\r\n        .15s\r\n        forwards;\r\n}\r\n\r\n\r\n.bkc-about-heading em {\r\n    color: var(--about-caramel);\r\n\r\n    font-style: italic;\r\n\r\n    font-weight: 500;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TOP DESCRIPTION\r\n========================================================= *\/\r\n\r\n.bkc-about-top-copy {\r\n    width: 290px;\r\n\r\n    padding-bottom: 7px;\r\n\r\n    color: var(--about-muted);\r\n\r\n    font-size: 12px;\r\n\r\n    line-height: 1.8;\r\n\r\n    opacity: 0;\r\n\r\n    transform: translateY(22px);\r\n}\r\n\r\n\r\n.bkc-about.active .bkc-about-top-copy {\r\n    animation:\r\n        bkcAboutUp\r\n        .8s\r\n        cubic-bezier(.16,1,.3,1)\r\n        .28s\r\n        forwards;\r\n}\r\n\r\n\r\n.bkc-about-top-copy-line {\r\n    width: 35px;\r\n    height: 1px;\r\n\r\n    margin-bottom: 17px;\r\n\r\n    background: var(--about-caramel);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MAIN GRID\r\n========================================================= *\/\r\n\r\n.bkc-about-grid {\r\n    display: grid;\r\n\r\n    grid-template-columns: 49% 51%;\r\n\r\n    align-items: center;\r\n\r\n    gap: 0;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   IMAGE WRAPPER\r\n========================================================= *\/\r\n\r\n.bkc-about-image-wrap {\r\n    position: relative;\r\n\r\n    width: 100%;\r\n\r\n    padding-right: 55px;\r\n\r\n    opacity: 0;\r\n\r\n    transform: translateX(-45px);\r\n}\r\n\r\n\r\n.bkc-about.active .bkc-about-image-wrap {\r\n    animation:\r\n        bkcAboutImage\r\n        1.15s\r\n        cubic-bezier(.16,1,.3,1)\r\n        .25s\r\n        forwards;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   IMAGE\r\n========================================================= *\/\r\n\r\n.bkc-about-image {\r\n    position: relative;\r\n\r\n    width: 100%;\r\n    height: 620px;\r\n\r\n    overflow: hidden;\r\n\r\n    background: var(--about-cream);\r\n}\r\n\r\n\r\n.bkc-about-image img {\r\n    display: block;\r\n\r\n    width: 100%;\r\n    height: 100%;\r\n\r\n    object-fit: cover;\r\n\r\n    object-position: center;\r\n\r\n    transition:\r\n        transform 1.2s cubic-bezier(.16,1,.3,1);\r\n}\r\n\r\n\r\n.bkc-about-image-wrap:hover .bkc-about-image img {\r\n    transform: scale(1.045);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BLACK TOP LEFT DESIGN\r\n========================================================= *\/\r\n\r\n.bkc-about-image-shape {\r\n    position: absolute;\r\n\r\n    top: 0;\r\n    left: 0;\r\n\r\n    width: 145px;\r\n    height: 145px;\r\n\r\n    background: var(--about-dark);\r\n\r\n    z-index: 4;\r\n\r\n    clip-path: polygon(\r\n        0 0,\r\n        100% 0,\r\n        78% 14%,\r\n        61% 28%,\r\n        50% 46%,\r\n        38% 61%,\r\n        23% 77%,\r\n        0 100%\r\n    );\r\n}\r\n\r\n\r\n.bkc-about-image-shape::after {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    top: 20px;\r\n    left: 20px;\r\n\r\n    width: 8px;\r\n    height: 8px;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: var(--about-caramel);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BLACK BOTTOM RIGHT DESIGN\r\n========================================================= *\/\r\n\r\n.bkc-about-image-shape-bottom {\r\n    position: absolute;\r\n\r\n    right: 0;\r\n    bottom: 0;\r\n\r\n    width: 180px;\r\n    height: 180px;\r\n\r\n    background: var(--about-dark);\r\n\r\n    z-index: 4;\r\n\r\n    clip-path: polygon(\r\n        100% 0,\r\n        100% 100%,\r\n        0 100%,\r\n        17% 82%,\r\n        31% 67%,\r\n        47% 53%,\r\n        63% 38%,\r\n        78% 20%\r\n    );\r\n}\r\n\r\n\r\n.bkc-about-image-shape-bottom::after {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    right: 30px;\r\n    bottom: 29px;\r\n\r\n    width: 35px;\r\n    height: 1px;\r\n\r\n    background: var(--about-caramel);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   IMAGE FRAME\r\n========================================================= *\/\r\n\r\n.bkc-about-image-frame {\r\n    position: absolute;\r\n\r\n    top: 17px;\r\n    left: 17px;\r\n    right: 72px;\r\n    bottom: 17px;\r\n\r\n    border: 1px solid rgba(255,255,255,.42);\r\n\r\n    z-index: 5;\r\n\r\n    pointer-events: none;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   IMAGE LABEL\r\n========================================================= *\/\r\n\r\n.bkc-about-image-label {\r\n    position: absolute;\r\n\r\n    left: -1px;\r\n    bottom: 42px;\r\n\r\n    z-index: 8;\r\n\r\n    padding: 10px 18px;\r\n\r\n    background: #ffffff;\r\n\r\n    color: var(--about-dark);\r\n\r\n    font-size: 8px;\r\n\r\n    font-weight: 700;\r\n\r\n    letter-spacing: 2px;\r\n\r\n    text-transform: uppercase;\r\n\r\n    box-shadow: 0 10px 30px rgba(36,21,15,.10);\r\n}\r\n\r\n\r\n.bkc-about-image-label span {\r\n    color: var(--about-caramel);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ROUND BADGE\r\n========================================================= *\/\r\n\r\n.bkc-about-round {\r\n    position: absolute;\r\n\r\n    top: 45px;\r\n    right: 10px;\r\n\r\n    width: 112px;\r\n    height: 112px;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: var(--about-caramel);\r\n\r\n    color: #ffffff;\r\n\r\n    z-index: 9;\r\n\r\n    box-shadow:\r\n        0 18px 45px rgba(36,21,15,.25);\r\n\r\n    transform: rotate(-8deg);\r\n\r\n    transition:\r\n        transform .4s ease;\r\n}\r\n\r\n\r\n.bkc-about-image-wrap:hover .bkc-about-round {\r\n    transform: rotate(0deg) translateY(-5px);\r\n}\r\n\r\n\r\n.bkc-about-round::before {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    inset: 8px;\r\n\r\n    border: 1px solid rgba(255,255,255,.35);\r\n\r\n    border-radius: 50%;\r\n}\r\n\r\n\r\n.bkc-about-round::after {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    inset: 14px;\r\n\r\n    border: 1px dashed rgba(255,255,255,.25);\r\n\r\n    border-radius: 50%;\r\n}\r\n\r\n\r\n.bkc-about-round-content {\r\n    position: relative;\r\n\r\n    z-index: 2;\r\n\r\n    text-align: center;\r\n}\r\n\r\n\r\n.bkc-about-round-number {\r\n    display: block;\r\n\r\n    font-family: 'Playfair Display', serif;\r\n\r\n    font-size: 27px;\r\n\r\n    line-height: 1;\r\n\r\n    font-weight: 600;\r\n}\r\n\r\n\r\n.bkc-about-round-text {\r\n    display: block;\r\n\r\n    margin-top: 4px;\r\n\r\n    font-size: 6px;\r\n\r\n    font-weight: 700;\r\n\r\n    letter-spacing: 1.3px;\r\n\r\n    text-transform: uppercase;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CONTENT\r\n========================================================= *\/\r\n\r\n.bkc-about-content {\r\n    position: relative;\r\n\r\n    padding:\r\n        30px\r\n        0\r\n        20px\r\n        85px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CONTENT LABEL\r\n========================================================= *\/\r\n\r\n.bkc-about-content-label {\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    gap: 11px;\r\n\r\n    margin-bottom: 23px;\r\n\r\n    color: var(--about-brown);\r\n\r\n    font-size: 9px;\r\n\r\n    font-weight: 700;\r\n\r\n    letter-spacing: 2.2px;\r\n\r\n    text-transform: uppercase;\r\n\r\n    opacity: 0;\r\n\r\n    transform: translateY(22px);\r\n}\r\n\r\n\r\n.bkc-about.active .bkc-about-content-label {\r\n    animation:\r\n        bkcAboutUp\r\n        .8s\r\n        cubic-bezier(.16,1,.3,1)\r\n        .4s\r\n        forwards;\r\n}\r\n\r\n\r\n.bkc-about-content-label::before {\r\n    content: \"\";\r\n\r\n    width: 28px;\r\n    height: 1px;\r\n\r\n    background: var(--about-caramel);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CONTENT TITLE\r\n========================================================= *\/\r\n\r\n.bkc-about-content-title {\r\n    max-width: 570px;\r\n\r\n    margin: 0 0 25px;\r\n\r\n    color: var(--about-dark);\r\n\r\n    font-size: clamp(35px, 3.6vw, 56px);\r\n\r\n    line-height: 1.02;\r\n\r\n    letter-spacing: -2px;\r\n\r\n    font-weight: 600;\r\n\r\n    opacity: 0;\r\n\r\n    transform: translateY(28px);\r\n}\r\n\r\n\r\n.bkc-about.active .bkc-about-content-title {\r\n    animation:\r\n        bkcAboutUp\r\n        .9s\r\n        cubic-bezier(.16,1,.3,1)\r\n        .48s\r\n        forwards;\r\n}\r\n\r\n\r\n.bkc-about-content-title em {\r\n    color: var(--about-caramel);\r\n\r\n    font-style: italic;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TEXT\r\n========================================================= *\/\r\n\r\n.bkc-about-text {\r\n    max-width: 550px;\r\n\r\n    margin: 0 0 17px;\r\n\r\n    color: var(--about-muted);\r\n\r\n    font-size: 13px;\r\n\r\n    line-height: 1.9;\r\n\r\n    opacity: 0;\r\n\r\n    transform: translateY(24px);\r\n}\r\n\r\n\r\n.bkc-about.active .bkc-about-text:nth-of-type(1) {\r\n    animation:\r\n        bkcAboutUp\r\n        .8s\r\n        cubic-bezier(.16,1,.3,1)\r\n        .6s\r\n        forwards;\r\n}\r\n\r\n\r\n.bkc-about.active .bkc-about-text:nth-of-type(2) {\r\n    animation:\r\n        bkcAboutUp\r\n        .8s\r\n        cubic-bezier(.16,1,.3,1)\r\n        .72s\r\n        forwards;\r\n}\r\n\r\n\r\n.bkc-about-text strong {\r\n    color: var(--about-dark);\r\n\r\n    font-weight: 700;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SIGNATURE\r\n========================================================= *\/\r\n\r\n.bkc-about-signature {\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    gap: 17px;\r\n\r\n    margin-top: 30px;\r\n\r\n    opacity: 0;\r\n\r\n    transform: translateY(22px);\r\n}\r\n\r\n\r\n.bkc-about.active .bkc-about-signature {\r\n    animation:\r\n        bkcAboutUp\r\n        .8s\r\n        cubic-bezier(.16,1,.3,1)\r\n        .82s\r\n        forwards;\r\n}\r\n\r\n\r\n.bkc-about-signature-line {\r\n    width: 45px;\r\n    height: 1px;\r\n\r\n    background: var(--about-caramel);\r\n}\r\n\r\n\r\n.bkc-about-signature-text {\r\n    color: var(--about-dark);\r\n\r\n    font-size: 18px;\r\n\r\n    font-style: italic;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   STATS \u2014 PREMIUM BOXES\r\n========================================================= *\/\r\n\r\n.bkc-about-stats {\r\n    display: grid;\r\n\r\n    grid-template-columns: repeat(3, minmax(0, 1fr));\r\n\r\n    gap: 12px;\r\n\r\n    width: 100%;\r\n    max-width: 560px;\r\n\r\n    margin-top: 48px;\r\n\r\n    padding-top: 0;\r\n\r\n    border-top: 0;\r\n\r\n    opacity: 0;\r\n\r\n    transform: translateY(28px);\r\n}\r\n\r\n\r\n.bkc-about.active .bkc-about-stats {\r\n    animation:\r\n        bkcAboutUp\r\n        .9s\r\n        cubic-bezier(.16,1,.3,1)\r\n        .94s\r\n        forwards;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   INDIVIDUAL STAT BOX\r\n========================================================= *\/\r\n\r\n.bkc-about-stat {\r\n    position: relative;\r\n\r\n    min-height: 118px;\r\n\r\n    display: flex;\r\n\r\n    flex-direction: column;\r\n\r\n    justify-content: center;\r\n\r\n    padding: 22px 18px;\r\n\r\n    background: #F4EEE5;\r\n\r\n    border: 1px solid rgba(36, 21, 15, .07);\r\n\r\n    overflow: hidden;\r\n\r\n    transition:\r\n        transform .35s ease,\r\n        box-shadow .35s ease,\r\n        background .35s ease;\r\n}\r\n\r\n\r\n.bkc-about-stat::before {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    top: 0;\r\n    left: 0;\r\n\r\n    width: 4px;\r\n    height: 100%;\r\n\r\n    background: var(--about-caramel);\r\n\r\n    transform: scaleY(0);\r\n\r\n    transform-origin: bottom;\r\n\r\n    transition: transform .35s ease;\r\n}\r\n\r\n\r\n.bkc-about-stat::after {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    right: -25px;\r\n    bottom: -35px;\r\n\r\n    width: 90px;\r\n    height: 90px;\r\n\r\n    border: 1px solid rgba(185,121,69,.14);\r\n\r\n    border-radius: 50%;\r\n\r\n    transition: transform .4s ease;\r\n}\r\n\r\n\r\n.bkc-about-stat:hover {\r\n    transform: translateY(-6px);\r\n\r\n    box-shadow:\r\n        0 18px 35px rgba(36,21,15,.09);\r\n\r\n    background: #f1e9dd;\r\n}\r\n\r\n\r\n.bkc-about-stat:hover::before {\r\n    transform: scaleY(1);\r\n}\r\n\r\n\r\n.bkc-about-stat:hover::after {\r\n    transform: scale(1.25);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   NUMBER\r\n========================================================= *\/\r\n\r\n.bkc-about-stat-number {\r\n    position: relative;\r\n\r\n    z-index: 2;\r\n\r\n    display: block;\r\n\r\n    color: var(--about-dark);\r\n\r\n    font-size: 31px;\r\n\r\n    line-height: 1;\r\n\r\n    font-weight: 600;\r\n\r\n    white-space: nowrap;\r\n}\r\n\r\n\r\n.bkc-about-stat-number span {\r\n    color: var(--about-caramel);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LABEL\r\n========================================================= *\/\r\n\r\n.bkc-about-stat-label {\r\n    position: relative;\r\n\r\n    z-index: 2;\r\n\r\n    display: block;\r\n\r\n    margin-top: 10px;\r\n\r\n    color: var(--about-muted);\r\n\r\n    font-size: 8px;\r\n\r\n    line-height: 1.35;\r\n\r\n    font-weight: 700;\r\n\r\n    letter-spacing: 1.35px;\r\n\r\n    text-transform: uppercase;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   VERTICAL DECOR\r\n========================================================= *\/\r\n\r\n.bkc-about-vertical {\r\n    position: absolute;\r\n\r\n    right: 16px;\r\n    top: 50%;\r\n\r\n    transform:\r\n        translateY(-50%)\r\n        rotate(180deg);\r\n\r\n    writing-mode: vertical-rl;\r\n\r\n    color: rgba(36,21,15,.24);\r\n\r\n    font-size: 8px;\r\n\r\n    font-weight: 700;\r\n\r\n    letter-spacing: 3px;\r\n\r\n    text-transform: uppercase;\r\n\r\n    pointer-events: none;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BOTTOM ORNAMENT\r\n========================================================= *\/\r\n\r\n.bkc-about-bottom {\r\n    display: flex;\r\n\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    gap: 14px;\r\n\r\n    width: 100%;\r\n\r\n    margin-top: 85px;\r\n\r\n    color: rgba(36,21,15,.62);\r\n\r\n    font-size: 9px;\r\n\r\n    line-height: 1;\r\n\r\n    font-weight: 700;\r\n\r\n    letter-spacing: 2.5px;\r\n\r\n    text-transform: uppercase;\r\n\r\n    text-align: center;\r\n\r\n    opacity: 0;\r\n\r\n    transform: translateY(20px);\r\n}\r\n\r\n\r\n.bkc-about.active .bkc-about-bottom {\r\n    animation:\r\n        bkcAboutUp\r\n        .8s\r\n        cubic-bezier(.16,1,.3,1)\r\n        1.12s\r\n        forwards;\r\n}\r\n\r\n\r\n.bkc-about-bottom-line {\r\n    flex: 0 0 52px;\r\n\r\n    width: 52px;\r\n    height: 1px;\r\n\r\n    background: var(--about-caramel);\r\n\r\n    opacity: .65;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ANIMATIONS\r\n========================================================= *\/\r\n\r\n@keyframes bkcAboutUp {\r\n\r\n    0% {\r\n        opacity: 0;\r\n\r\n        transform:\r\n            translateY(28px);\r\n    }\r\n\r\n    100% {\r\n        opacity: 1;\r\n\r\n        transform:\r\n            translateY(0);\r\n    }\r\n\r\n}\r\n\r\n\r\n@keyframes bkcAboutTitle {\r\n\r\n    0% {\r\n        opacity: 0;\r\n\r\n        transform:\r\n            translateY(42px);\r\n    }\r\n\r\n    100% {\r\n        opacity: 1;\r\n\r\n        transform:\r\n            translateY(0);\r\n    }\r\n\r\n}\r\n\r\n\r\n@keyframes bkcAboutImage {\r\n\r\n    0% {\r\n        opacity: 0;\r\n\r\n        transform:\r\n            translateX(-45px)\r\n            scale(.96);\r\n    }\r\n\r\n    100% {\r\n        opacity: 1;\r\n\r\n        transform:\r\n            translateX(0)\r\n            scale(1);\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LARGE DESKTOP\r\n========================================================= *\/\r\n\r\n@media (min-width: 1500px) {\r\n\r\n    .bkc-about {\r\n        padding-top: 145px;\r\n        padding-bottom: 140px;\r\n    }\r\n\r\n    .bkc-about-container {\r\n        width: min(1500px, calc(100% - 150px));\r\n    }\r\n\r\n    .bkc-about-image {\r\n        height: 670px;\r\n    }\r\n\r\n    .bkc-about-content {\r\n        padding-left: 105px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LAPTOP\r\n========================================================= *\/\r\n\r\n@media (max-width: 1150px) {\r\n\r\n    .bkc-about {\r\n        padding: 100px 0 110px;\r\n    }\r\n\r\n    .bkc-about-container {\r\n        width: min(100% - 70px, 1100px);\r\n    }\r\n\r\n    .bkc-about-top {\r\n        margin-bottom: 55px;\r\n    }\r\n\r\n    .bkc-about-heading {\r\n        font-size: clamp(48px, 6.2vw, 72px);\r\n    }\r\n\r\n    .bkc-about-image-wrap {\r\n        padding-right: 40px;\r\n    }\r\n\r\n    .bkc-about-image {\r\n        height: 570px;\r\n    }\r\n\r\n    .bkc-about-content {\r\n        padding-left: 55px;\r\n    }\r\n\r\n    .bkc-about-content-title {\r\n        font-size: clamp(33px, 4vw, 48px);\r\n    }\r\n\r\n    .bkc-about-round {\r\n        width: 95px;\r\n        height: 95px;\r\n\r\n        right: 0;\r\n    }\r\n\r\n    .bkc-about-round-number {\r\n        font-size: 23px;\r\n    }\r\n\r\n    .bkc-about-image-shape {\r\n        width: 125px;\r\n        height: 125px;\r\n    }\r\n\r\n    .bkc-about-image-shape-bottom {\r\n        width: 155px;\r\n        height: 155px;\r\n    }\r\n\r\n    .bkc-about-stat {\r\n        min-height: 108px;\r\n\r\n        padding: 19px 14px;\r\n    }\r\n\r\n    .bkc-about-stat-number {\r\n        font-size: 27px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media (max-width: 850px) {\r\n\r\n    .bkc-about {\r\n        padding: 85px 0 95px;\r\n    }\r\n\r\n    .bkc-about-container {\r\n        width: calc(100% - 44px);\r\n    }\r\n\r\n    .bkc-about-top {\r\n        display: block;\r\n\r\n        margin-bottom: 55px;\r\n    }\r\n\r\n    .bkc-about-heading {\r\n        max-width: 700px;\r\n\r\n        font-size: clamp(48px, 9vw, 70px);\r\n    }\r\n\r\n    .bkc-about-top-copy {\r\n        width: 100%;\r\n        max-width: 500px;\r\n\r\n        margin-top: 25px;\r\n    }\r\n\r\n    .bkc-about-grid {\r\n        display: flex;\r\n\r\n        flex-direction: column;\r\n    }\r\n\r\n    .bkc-about-image-wrap {\r\n        width: 100%;\r\n\r\n        padding-right: 25px;\r\n    }\r\n\r\n    .bkc-about-image {\r\n        height: 570px;\r\n    }\r\n\r\n    .bkc-about-content {\r\n        width: 100%;\r\n\r\n        padding:\r\n            65px\r\n            25px\r\n            20px;\r\n    }\r\n\r\n    .bkc-about-content-title {\r\n        max-width: 650px;\r\n\r\n        font-size: clamp(38px, 7vw, 55px);\r\n    }\r\n\r\n    .bkc-about-text {\r\n        max-width: 650px;\r\n    }\r\n\r\n    .bkc-about-stats {\r\n        max-width: 650px;\r\n    }\r\n\r\n    .bkc-about-vertical {\r\n        display: none;\r\n    }\r\n\r\n    .bkc-about-bottom {\r\n        margin-top: 60px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 560px) {\r\n\r\n    .bkc-about {\r\n        padding: 70px 0 70px;\r\n    }\r\n\r\n    .bkc-about-container {\r\n        width: calc(100% - 32px);\r\n    }\r\n\r\n    .bkc-about-bg-number {\r\n        top: 20px;\r\n        right: -20px;\r\n\r\n        font-size: 150px;\r\n    }\r\n\r\n    .bkc-about-bg-circle {\r\n        width: 280px;\r\n        height: 280px;\r\n\r\n        left: -150px;\r\n        bottom: -100px;\r\n    }\r\n\r\n    .bkc-about-top {\r\n        margin-bottom: 40px;\r\n    }\r\n\r\n    .bkc-about-badge {\r\n        gap: 10px;\r\n\r\n        margin-bottom: 20px;\r\n    }\r\n\r\n    .bkc-about-badge-line {\r\n        width: 32px;\r\n    }\r\n\r\n    .bkc-about-badge-text {\r\n        font-size: 8px;\r\n\r\n        letter-spacing: 2px;\r\n    }\r\n\r\n    .bkc-about-heading {\r\n        font-size: clamp(43px, 13vw, 60px);\r\n\r\n        line-height: .96;\r\n\r\n        letter-spacing: -2.5px;\r\n    }\r\n\r\n    .bkc-about-top-copy {\r\n        font-size: 11px;\r\n\r\n        line-height: 1.75;\r\n\r\n        margin-top: 22px;\r\n    }\r\n\r\n    .bkc-about-image-wrap {\r\n        padding-right: 13px;\r\n    }\r\n\r\n    .bkc-about-image {\r\n        height: 450px;\r\n    }\r\n\r\n    .bkc-about-image-frame {\r\n        top: 11px;\r\n        left: 11px;\r\n        right: 38px;\r\n        bottom: 11px;\r\n    }\r\n\r\n    .bkc-about-image-shape {\r\n        width: 95px;\r\n        height: 95px;\r\n    }\r\n\r\n    .bkc-about-image-shape::after {\r\n        top: 14px;\r\n        left: 14px;\r\n\r\n        width: 6px;\r\n        height: 6px;\r\n    }\r\n\r\n    .bkc-about-image-shape-bottom {\r\n        width: 120px;\r\n        height: 120px;\r\n    }\r\n\r\n    .bkc-about-image-shape-bottom::after {\r\n        right: 20px;\r\n        bottom: 21px;\r\n\r\n        width: 25px;\r\n    }\r\n\r\n    .bkc-about-round {\r\n        width: 82px;\r\n        height: 82px;\r\n\r\n        top: 28px;\r\n        right: -4px;\r\n    }\r\n\r\n    .bkc-about-round::before {\r\n        inset: 6px;\r\n    }\r\n\r\n    .bkc-about-round::after {\r\n        inset: 11px;\r\n    }\r\n\r\n    .bkc-about-round-number {\r\n        font-size: 20px;\r\n    }\r\n\r\n    .bkc-about-round-text {\r\n        font-size: 5px;\r\n\r\n        letter-spacing: 1px;\r\n    }\r\n\r\n    .bkc-about-image-label {\r\n        bottom: 25px;\r\n\r\n        padding: 8px 12px;\r\n\r\n        font-size: 6px;\r\n\r\n        letter-spacing: 1.4px;\r\n    }\r\n\r\n    .bkc-about-content {\r\n        padding:\r\n            48px\r\n            5px\r\n            10px;\r\n    }\r\n\r\n    .bkc-about-content-label {\r\n        font-size: 8px;\r\n\r\n        letter-spacing: 1.8px;\r\n    }\r\n\r\n    .bkc-about-content-title {\r\n        margin-bottom: 20px;\r\n\r\n        font-size: clamp(32px, 9vw, 45px);\r\n\r\n        line-height: 1.04;\r\n\r\n        letter-spacing: -1.5px;\r\n    }\r\n\r\n    .bkc-about-text {\r\n        font-size: 12px;\r\n\r\n        line-height: 1.85;\r\n    }\r\n\r\n    .bkc-about-signature {\r\n        margin-top: 24px;\r\n    }\r\n\r\n    .bkc-about-signature-text {\r\n        font-size: 16px;\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       MOBILE STATS\r\n    ===================================================== *\/\r\n\r\n    .bkc-about-stats {\r\n        grid-template-columns: 1fr;\r\n\r\n        gap: 10px;\r\n\r\n        width: 100%;\r\n\r\n        margin-top: 36px;\r\n    }\r\n\r\n    .bkc-about-stat {\r\n        min-height: 92px;\r\n\r\n        display: grid;\r\n\r\n        grid-template-columns: 110px 1fr;\r\n\r\n        align-items: center;\r\n\r\n        padding: 18px 20px;\r\n    }\r\n\r\n    .bkc-about-stat-number {\r\n        font-size: 27px;\r\n    }\r\n\r\n    .bkc-about-stat-label {\r\n        margin-top: 0;\r\n\r\n        font-size: 8px;\r\n\r\n        letter-spacing: 1.4px;\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       BOTTOM TEXT\r\n    ===================================================== *\/\r\n\r\n    .bkc-about-bottom {\r\n        gap: 9px;\r\n\r\n        margin-top: 45px;\r\n\r\n        padding: 0 5px;\r\n\r\n        font-size: 7px;\r\n\r\n        letter-spacing: 1.5px;\r\n\r\n        line-height: 1.5;\r\n    }\r\n\r\n    .bkc-about-bottom-line {\r\n        flex: 0 0 25px;\r\n\r\n        width: 25px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   VERY SMALL MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 380px) {\r\n\r\n    .bkc-about-container {\r\n        width: calc(100% - 26px);\r\n    }\r\n\r\n    .bkc-about-image {\r\n        height: 400px;\r\n    }\r\n\r\n    .bkc-about-heading {\r\n        font-size: 40px;\r\n    }\r\n\r\n    .bkc-about-image-shape {\r\n        width: 80px;\r\n        height: 80px;\r\n    }\r\n\r\n    .bkc-about-image-shape-bottom {\r\n        width: 105px;\r\n        height: 105px;\r\n    }\r\n\r\n    .bkc-about-round {\r\n        width: 72px;\r\n        height: 72px;\r\n    }\r\n\r\n    .bkc-about-round-number {\r\n        font-size: 18px;\r\n    }\r\n\r\n    .bkc-about-content {\r\n        padding-top: 40px;\r\n    }\r\n\r\n    .bkc-about-stat {\r\n        grid-template-columns: 95px 1fr;\r\n\r\n        min-height: 84px;\r\n\r\n        padding: 15px;\r\n    }\r\n\r\n    .bkc-about-stat-number {\r\n        font-size: 23px;\r\n    }\r\n\r\n    .bkc-about-stat-label {\r\n        font-size: 7px;\r\n    }\r\n\r\n    .bkc-about-bottom {\r\n        font-size: 6px;\r\n\r\n        letter-spacing: 1.2px;\r\n    }\r\n\r\n    .bkc-about-bottom-line {\r\n        flex-basis: 18px;\r\n\r\n        width: 18px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REDUCED MOTION\r\n========================================================= *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n    .bkc-about *,\r\n    .bkc-about {\r\n        animation: none !important;\r\n\r\n        transition: none !important;\r\n    }\r\n\r\n    .bkc-about-badge,\r\n    .bkc-about-heading,\r\n    .bkc-about-top-copy,\r\n    .bkc-about-image-wrap,\r\n    .bkc-about-content-label,\r\n    .bkc-about-content-title,\r\n    .bkc-about-text,\r\n    .bkc-about-signature,\r\n    .bkc-about-stats,\r\n    .bkc-about-bottom {\r\n        opacity: 1 !important;\r\n\r\n        transform: none !important;\r\n    }\r\n\r\n}\r\n<\/style>\r\n\r\n<!-- =========================================================\r\n     BROOKLYN COOKIES \u2014 ABOUT US\r\n========================================================= -->\r\n\r\n<section class=\"bkc-about\" id=\"bkcAbout\">\r\n\r\n<!-- BACKGROUND DECOR -->\r\n\r\n<div\r\n    class=\"bkc-about-bg-number\"\r\n    aria-hidden=\"true\">\r\n    02\r\n<\/div>\r\n\r\n<div\r\n    class=\"bkc-about-bg-circle\"\r\n    aria-hidden=\"true\">\r\n<\/div>\r\n\r\n\r\n<div class=\"bkc-about-container\">\r\n\r\n\r\n    <!-- =================================================\r\n         TOP INTRO\r\n    ================================================= -->\r\n\r\n    <div class=\"bkc-about-top\">\r\n\r\n        <div>\r\n\r\n            <!-- HERO STYLE BADGE -->\r\n\r\n            <div class=\"bkc-about-badge\">\r\n\r\n                <span class=\"bkc-about-badge-line\"><\/span>\r\n\r\n                <span class=\"bkc-about-badge-text\">\r\n                    About Us\r\n                <\/span>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- HEADING -->\r\n\r\n            <h2 class=\"bkc-about-heading\">\r\n\r\n                Cookies made with\r\n                <em>character.<\/em>\r\n\r\n            <\/h2>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- DESCRIPTION -->\r\n\r\n        <div class=\"bkc-about-top-copy\">\r\n\r\n            <div class=\"bkc-about-top-copy-line\"><\/div>\r\n\r\n            A small-batch cookie studio built around\r\n            simple ingredients, generous flavors and\r\n            the joy of sharing something freshly baked.\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <!-- =================================================\r\n         MAIN GRID\r\n    ================================================= -->\r\n\r\n    <div class=\"bkc-about-grid\">\r\n\r\n\r\n        <!-- =================================================\r\n             IMAGE\r\n        ================================================= -->\r\n\r\n        <div class=\"bkc-about-image-wrap\">\r\n\r\n            <div class=\"bkc-about-image\">\r\n\r\n                <img decoding=\"async\"\r\n                    src=\"https:\/\/cookieswp2.mystartupcrew.com\/wp-content\/uploads\/2026\/09\/delicious-chocolate-chip-cookies-arrangement.jpg\"\r\n                    alt=\"Freshly baked Brooklyn Cookies\"\r\n                >\r\n\r\n\r\n                <!-- BLACK TOP LEFT -->\r\n\r\n                <div class=\"bkc-about-image-shape\"><\/div>\r\n\r\n\r\n                <!-- BLACK BOTTOM RIGHT -->\r\n\r\n                <div class=\"bkc-about-image-shape-bottom\"><\/div>\r\n\r\n\r\n                <!-- FRAME -->\r\n\r\n                <div class=\"bkc-about-image-frame\"><\/div>\r\n\r\n\r\n                <!-- LABEL -->\r\n\r\n                <div class=\"bkc-about-image-label\">\r\n\r\n                    Small Batch\r\n\r\n                    <span>\u2022<\/span>\r\n\r\n                    Fresh Daily\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- ROUND BADGE -->\r\n\r\n            <div class=\"bkc-about-round\">\r\n\r\n                <div class=\"bkc-about-round-content\">\r\n\r\n                    <span class=\"bkc-about-round-number\">\r\n                        100%\r\n                    <\/span>\r\n\r\n                    <span class=\"bkc-about-round-text\">\r\n                        Baked With Love\r\n                    <\/span>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <!-- =================================================\r\n             CONTENT\r\n        ================================================= -->\r\n\r\n        <div class=\"bkc-about-content\">\r\n\r\n\r\n            <div class=\"bkc-about-content-label\">\r\n                Our Story\r\n            <\/div>\r\n\r\n\r\n            <h3 class=\"bkc-about-content-title\">\r\n\r\n                More than a cookie.\r\n                <br>\r\n\r\n                It's a little\r\n                <em>moment of joy.<\/em>\r\n\r\n            <\/h3>\r\n\r\n\r\n            <p class=\"bkc-about-text\">\r\n\r\n                Brooklyn Cookies started with a simple idea:\r\n                make cookies that feel homemade, but taste\r\n                unforgettable.\r\n\r\n            <\/p>\r\n\r\n\r\n            <p class=\"bkc-about-text\">\r\n\r\n                Every batch is baked in small quantities using\r\n                carefully selected ingredients, creating that\r\n                warm, fresh-from-the-oven experience in every\r\n                bite. From classic favorites to indulgent new\r\n                flavors, we believe the best cookies should\r\n                never feel ordinary.\r\n\r\n            <\/p>\r\n\r\n\r\n            <!-- SIGNATURE -->\r\n\r\n            <div class=\"bkc-about-signature\">\r\n\r\n                <span class=\"bkc-about-signature-line\"><\/span>\r\n\r\n                <span class=\"bkc-about-signature-text\">\r\n                    Baked from the heart\r\n                <\/span>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- =================================================\r\n                 STATS\r\n            ================================================= -->\r\n\r\n            \r\n\r\n<div class=\"bkc-about-stats\">\r\n\r\n    <div class=\"bkc-about-stat\">\r\n\r\n        <span class=\"bkc-about-stat-number\">\r\n            01\r\n        <\/span>\r\n\r\n        <span class=\"bkc-about-stat-label\">\r\n            Signature Flavor\r\n        <\/span>\r\n\r\n    <\/div>\r\n\r\n\r\n    <div class=\"bkc-about-stat\">\r\n\r\n        <span class=\"bkc-about-stat-number\">\r\n            100<span>%<\/span>\r\n        <\/span>\r\n\r\n        <span class=\"bkc-about-stat-label\">\r\n            Pure Indulgence\r\n        <\/span>\r\n\r\n    <\/div>\r\n\r\n\r\n    <div class=\"bkc-about-stat\">\r\n\r\n        <span class=\"bkc-about-stat-number\">\r\n            24<span>\/7<\/span>\r\n        <\/span>\r\n\r\n        <span class=\"bkc-about-stat-label\">\r\n            Cookie Cravings\r\n        <\/span>\r\n\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n            <!-- VERTICAL DECOR -->\r\n\r\n            <div class=\"bkc-about-vertical\">\r\n                Brooklyn Cookies \u2022 Since Day One\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <!-- =================================================\r\n         BOTTOM ORNAMENT\r\n    ================================================= -->\r\n\r\n    <div class=\"bkc-about-bottom\">\r\n\r\n        <span class=\"bkc-about-bottom-line\"><\/span>\r\n\r\n        <span>\r\n            Crafted locally \u2022 Shared generously\r\n        <\/span>\r\n\r\n        <span class=\"bkc-about-bottom-line\"><\/span>\r\n\r\n    <\/div>\r\n\r\n\r\n<\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\n\r\ndocument.addEventListener(\r\n    'DOMContentLoaded',\r\n    function () {\r\n\r\n        const about =\r\n            document.getElementById('bkcAbout');\r\n\r\n        if (!about) return;\r\n\r\n\r\n        \/* ================================================\r\n           SCROLL REVEAL\r\n        ================================================ *\/\r\n\r\n        function activateAbout() {\r\n\r\n            about.classList.add('active');\r\n\r\n        }\r\n\r\n\r\n        if ('IntersectionObserver' in window) {\r\n\r\n            const observer =\r\n                new IntersectionObserver(\r\n\r\n                    function (entries) {\r\n\r\n                        entries.forEach(\r\n                            function (entry) {\r\n\r\n                                if (\r\n                                    entry.isIntersecting\r\n                                ) {\r\n\r\n                                    activateAbout();\r\n\r\n                                    observer.unobserve(\r\n                                        about\r\n                                    );\r\n\r\n                                }\r\n\r\n                            }\r\n                        );\r\n\r\n                    },\r\n                    {\r\n                        threshold: 0.12,\r\n                        rootMargin: '0px 0px -50px 0px'\r\n                    }\r\n                );\r\n\r\n\r\n            observer.observe(about);\r\n\r\n        } else {\r\n\r\n            activateAbout();\r\n\r\n        }\r\n\r\n    }\r\n\r\n);\r\n\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6183b66 e-con-full e-flex e-con e-parent\" data-id=\"6183b66\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4093458 elementor-widget elementor-widget-html\" data-id=\"4093458\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* =========================================================\r\n   BROOKLYN COOKIES \u2014 HOW TO ORDER\r\n   BACKGROUND UPDATED ONLY\r\n   Background: #F4EEE5\r\n   Design \/ Cards \/ Hover \/ Animation UNCHANGED\r\n========================================================= *\/\r\n\r\n.bkc-how {\r\n    --how-bg: #F4EEE5;\r\n    --how-card: #ffffff;\r\n    --how-dark: #24150f;\r\n    --how-brown: #74452d;\r\n    --how-caramel: #b97945;\r\n    --how-cream: #f4eee5;\r\n    --how-muted: #796b61;\r\n    --how-border: rgba(36, 21, 15, 0.10);\r\n\r\n    position: relative;\r\n    width: 100%;\r\n    padding: 80px 0 80px;\r\n\r\n    \/* =====================================================\r\n       SECTION BACKGROUND\r\n       Only background changed to #F4EEE5\r\n    ===================================================== *\/\r\n\r\n    background: #F4EEE5;\r\n\r\n    overflow: hidden;\r\n    isolation: isolate;\r\n\r\n    font-family: 'DM Sans', sans-serif;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   RESET \u2014 SECTION ONLY\r\n========================================================= *\/\r\n\r\n.bkc-how *,\r\n.bkc-how *::before,\r\n.bkc-how *::after {\r\n    box-sizing: border-box;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DECORATIVE BACKGROUND\r\n========================================================= *\/\r\n\r\n.bkc-how::before {\r\n    content: \"HOW\";\r\n\r\n    position: absolute;\r\n\r\n    top: 25px;\r\n    left: -18px;\r\n\r\n    font-family: 'Playfair Display', serif;\r\n\r\n    font-size: clamp(150px, 20vw, 310px);\r\n\r\n    line-height: 1;\r\n\r\n    font-weight: 600;\r\n\r\n    color: rgba(36, 21, 15, 0.035);\r\n\r\n    pointer-events: none;\r\n    user-select: none;\r\n\r\n    z-index: -1;\r\n}\r\n\r\n\r\n.bkc-how::after {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    width: 460px;\r\n    height: 460px;\r\n\r\n    right: -250px;\r\n    bottom: -270px;\r\n\r\n    border-radius: 50%;\r\n\r\n    border: 1px solid rgba(185, 121, 69, 0.15);\r\n\r\n    box-shadow:\r\n        0 0 0 45px rgba(185, 121, 69, 0.035),\r\n        0 0 0 90px rgba(185, 121, 69, 0.022);\r\n\r\n    pointer-events: none;\r\n\r\n    z-index: -1;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CONTAINER\r\n========================================================= *\/\r\n\r\n.bkc-how-container {\r\n    width: min(1380px, calc(100% - 100px));\r\n\r\n    margin: 0 auto;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADER\r\n========================================================= *\/\r\n\r\n.bkc-how-header {\r\n    display: flex;\r\n\r\n    align-items: flex-end;\r\n\r\n    justify-content: space-between;\r\n\r\n    gap: 60px;\r\n\r\n    margin-bottom: 65px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BADGE\r\n========================================================= *\/\r\n\r\n.bkc-how-badge {\r\n    display: inline-flex;\r\n\r\n    align-items: center;\r\n\r\n    gap: 12px;\r\n\r\n    margin-bottom: 20px;\r\n\r\n    opacity: 0;\r\n\r\n    transform: translateY(20px);\r\n}\r\n\r\n\r\n.bkc-how.is-visible .bkc-how-badge {\r\n    animation:\r\n        bkcHowFadeUp\r\n        .7s\r\n        ease\r\n        .1s\r\n        forwards;\r\n}\r\n\r\n\r\n.bkc-how-badge-line {\r\n    width: 42px;\r\n    height: 1px;\r\n\r\n    background: var(--how-caramel);\r\n}\r\n\r\n\r\n.bkc-how-badge-text {\r\n    color: var(--how-brown);\r\n\r\n    font-size: 10px;\r\n\r\n    font-weight: 700;\r\n\r\n    letter-spacing: 2.8px;\r\n\r\n    text-transform: uppercase;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MAIN HEADING\r\n========================================================= *\/\r\n\r\n.bkc-how-title {\r\n    margin: 0;\r\n\r\n    max-width: 760px;\r\n\r\n    color: var(--how-dark);\r\n\r\n    font-family: 'Playfair Display', serif;\r\n\r\n    font-size: clamp(48px, 5.8vw, 78px);\r\n\r\n    line-height: 0.96;\r\n\r\n    letter-spacing: -3px;\r\n\r\n    font-weight: 600;\r\n\r\n    opacity: 0;\r\n\r\n    transform: translateY(35px);\r\n}\r\n\r\n\r\n.bkc-how.is-visible .bkc-how-title {\r\n    animation:\r\n        bkcHowTitleReveal\r\n        1s\r\n        cubic-bezier(.16,1,.3,1)\r\n        .2s\r\n        forwards;\r\n}\r\n\r\n\r\n.bkc-how-title em {\r\n    color: var(--how-caramel);\r\n\r\n    font-style: italic;\r\n\r\n    font-weight: 500;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADER DESCRIPTION\r\n========================================================= *\/\r\n\r\n.bkc-how-intro {\r\n    width: 285px;\r\n\r\n    padding-bottom: 6px;\r\n\r\n    color: var(--how-muted);\r\n\r\n    font-size: 12px;\r\n\r\n    line-height: 1.85;\r\n\r\n    opacity: 0;\r\n\r\n    transform: translateY(20px);\r\n}\r\n\r\n\r\n.bkc-how.is-visible .bkc-how-intro {\r\n    animation:\r\n        bkcHowFadeUp\r\n        .8s\r\n        ease\r\n        .4s\r\n        forwards;\r\n}\r\n\r\n\r\n.bkc-how-intro-line {\r\n    width: 34px;\r\n\r\n    height: 1px;\r\n\r\n    margin-bottom: 16px;\r\n\r\n    background: var(--how-caramel);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   STEPS WRAPPER\r\n========================================================= *\/\r\n\r\n.bkc-how-steps {\r\n    display: grid;\r\n\r\n    grid-template-columns:\r\n        repeat(3, 1fr);\r\n\r\n    gap: 22px;\r\n\r\n    align-items: stretch;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   STEP CARD\r\n========================================================= *\/\r\n\r\n.bkc-how-card {\r\n    position: relative;\r\n\r\n    min-height: 390px;\r\n\r\n    padding: 42px 38px 38px;\r\n\r\n    background: var(--how-card);\r\n\r\n    border: 1px solid var(--how-border);\r\n\r\n    box-shadow:\r\n        0 18px 45px rgba(36, 21, 15, 0.07);\r\n\r\n    overflow: hidden;\r\n\r\n    opacity: 0;\r\n\r\n    transform:\r\n        translateY(45px);\r\n\r\n    transition:\r\n        transform .55s cubic-bezier(.16,1,.3,1),\r\n        box-shadow .55s ease,\r\n        border-color .4s ease;\r\n}\r\n\r\n\r\n.bkc-how.is-visible .bkc-how-card:nth-child(1) {\r\n    animation:\r\n        bkcHowCardReveal\r\n        .85s\r\n        cubic-bezier(.16,1,.3,1)\r\n        .3s\r\n        forwards;\r\n}\r\n\r\n\r\n.bkc-how.is-visible .bkc-how-card:nth-child(2) {\r\n    animation:\r\n        bkcHowCardReveal\r\n        .85s\r\n        cubic-bezier(.16,1,.3,1)\r\n        .48s\r\n        forwards;\r\n}\r\n\r\n\r\n.bkc-how.is-visible .bkc-how-card:nth-child(3) {\r\n    animation:\r\n        bkcHowCardReveal\r\n        .85s\r\n        cubic-bezier(.16,1,.3,1)\r\n        .66s\r\n        forwards;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BOTTOM \u2192 TOP HOVER COLOR\r\n========================================================= *\/\r\n\r\n.bkc-how-card::before {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    left: 0;\r\n    right: 0;\r\n\r\n    bottom: 0;\r\n\r\n    height: 0%;\r\n\r\n    background: var(--how-dark);\r\n\r\n    transition:\r\n        height .6s cubic-bezier(.16,1,.3,1);\r\n\r\n    z-index: 0;\r\n}\r\n\r\n\r\n.bkc-how-card:hover::before,\r\n.bkc-how-card.bkc-how-active::before {\r\n    height: 100%;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CARD CONTENT ABOVE BACKGROUND\r\n========================================================= *\/\r\n\r\n.bkc-how-card > * {\r\n    position: relative;\r\n\r\n    z-index: 2;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   NUMBER CIRCLE\r\n========================================================= *\/\r\n\r\n.bkc-how-number {\r\n    width: 68px;\r\n    height: 68px;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n    margin-bottom: 38px;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: var(--how-cream);\r\n\r\n    color: var(--how-caramel);\r\n\r\n    border: 1px solid rgba(185, 121, 69, 0.18);\r\n\r\n    font-family: 'Playfair Display', serif;\r\n\r\n    font-size: 22px;\r\n\r\n    font-weight: 600;\r\n\r\n    transition:\r\n        background .45s ease,\r\n        color .45s ease,\r\n        border-color .45s ease,\r\n        transform .5s cubic-bezier(.16,1,.3,1);\r\n}\r\n\r\n\r\n.bkc-how-card:hover .bkc-how-number,\r\n.bkc-how-card.bkc-how-active .bkc-how-number {\r\n    background: rgba(255,255,255,.12);\r\n\r\n    color: #ffffff;\r\n\r\n    border-color: rgba(255,255,255,.25);\r\n\r\n    transform:\r\n        translateY(-4px)\r\n        rotate(-5deg);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   STEP LABEL\r\n========================================================= *\/\r\n\r\n.bkc-how-step-label {\r\n    display: block;\r\n\r\n    margin-bottom: 13px;\r\n\r\n    color: var(--how-caramel);\r\n\r\n    font-size: 9px;\r\n\r\n    font-weight: 700;\r\n\r\n    letter-spacing: 2.3px;\r\n\r\n    text-transform: uppercase;\r\n\r\n    transition:\r\n        color .4s ease;\r\n}\r\n\r\n\r\n.bkc-how-card:hover .bkc-how-step-label,\r\n.bkc-how-card.bkc-how-active .bkc-how-step-label {\r\n    color: #dca57c;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CARD TITLE\r\n========================================================= *\/\r\n\r\n.bkc-how-card-title {\r\n    margin: 0 0 17px;\r\n\r\n    color: var(--how-dark);\r\n\r\n    font-family: 'Playfair Display', serif;\r\n\r\n    font-size: clamp(27px, 2.4vw, 35px);\r\n\r\n    line-height: 1.05;\r\n\r\n    letter-spacing: -1.3px;\r\n\r\n    font-weight: 600;\r\n\r\n    transition:\r\n        color .45s ease;\r\n}\r\n\r\n\r\n.bkc-how-card:hover .bkc-how-card-title,\r\n.bkc-how-card.bkc-how-active .bkc-how-card-title {\r\n    color: #ffffff;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CARD DESCRIPTION\r\n========================================================= *\/\r\n\r\n.bkc-how-card-text {\r\n    max-width: 330px;\r\n\r\n    margin: 0;\r\n\r\n    color: var(--how-muted);\r\n\r\n    font-size: 12px;\r\n\r\n    line-height: 1.85;\r\n\r\n    transition:\r\n        color .45s ease;\r\n}\r\n\r\n\r\n.bkc-how-card:hover .bkc-how-card-text,\r\n.bkc-how-card.bkc-how-active .bkc-how-card-text {\r\n    color: rgba(255,255,255,.68);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CARD BOTTOM\r\n========================================================= *\/\r\n\r\n.bkc-how-card-bottom {\r\n    position: absolute !important;\r\n\r\n    left: 38px;\r\n    right: 38px;\r\n\r\n    bottom: 35px;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: space-between;\r\n\r\n    z-index: 3 !important;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CARD MINI LINE\r\n========================================================= *\/\r\n\r\n.bkc-how-card-line {\r\n    width: 45px;\r\n\r\n    height: 1px;\r\n\r\n    background: rgba(36,21,15,.16);\r\n\r\n    transition:\r\n        width .45s ease,\r\n        background .45s ease;\r\n}\r\n\r\n\r\n.bkc-how-card:hover .bkc-how-card-line,\r\n.bkc-how-card.bkc-how-active .bkc-how-card-line {\r\n    width: 65px;\r\n\r\n    background: rgba(255,255,255,.5);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ARROW\r\n========================================================= *\/\r\n\r\n.bkc-how-arrow {\r\n    width: 32px;\r\n    height: 32px;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n    border: 1px solid rgba(36,21,15,.12);\r\n\r\n    border-radius: 50%;\r\n\r\n    color: var(--how-brown);\r\n\r\n    transition:\r\n        color .4s ease,\r\n        border-color .4s ease,\r\n        transform .5s cubic-bezier(.16,1,.3,1);\r\n}\r\n\r\n\r\n.bkc-how-arrow svg {\r\n    width: 13px;\r\n    height: 13px;\r\n\r\n    display: block;\r\n}\r\n\r\n\r\n.bkc-how-card:hover .bkc-how-arrow,\r\n.bkc-how-card.bkc-how-active .bkc-how-arrow {\r\n    color: #ffffff;\r\n\r\n    border-color: rgba(255,255,255,.3);\r\n\r\n    transform: translateX(4px);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REMINDER BOX\r\n========================================================= *\/\r\n\r\n.bkc-how-reminder {\r\n    position: relative;\r\n\r\n    display: grid;\r\n\r\n    grid-template-columns:\r\n        auto 1fr auto;\r\n\r\n    align-items: center;\r\n\r\n    gap: 25px;\r\n\r\n    margin-top: 24px;\r\n\r\n    padding: 27px 32px;\r\n\r\n    background: #ffffff;\r\n\r\n    border: 1px solid var(--how-border);\r\n\r\n    box-shadow:\r\n        0 15px 40px rgba(36,21,15,.055);\r\n\r\n    overflow: hidden;\r\n\r\n    opacity: 0;\r\n\r\n    transform: translateY(35px);\r\n}\r\n\r\n\r\n.bkc-how.is-visible .bkc-how-reminder {\r\n    animation:\r\n        bkcHowCardReveal\r\n        .9s\r\n        cubic-bezier(.16,1,.3,1)\r\n        .85s\r\n        forwards;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REMINDER ICON CIRCLE\r\n========================================================= *\/\r\n\r\n.bkc-how-reminder-icon {\r\n    width: 62px;\r\n    height: 62px;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n    flex-shrink: 0;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: var(--how-cream);\r\n\r\n    color: var(--how-caramel);\r\n\r\n    border: 1px solid rgba(185,121,69,.16);\r\n\r\n    transition:\r\n        transform .45s cubic-bezier(.16,1,.3,1),\r\n        background .35s ease;\r\n}\r\n\r\n\r\n.bkc-how-reminder:hover .bkc-how-reminder-icon {\r\n    transform:\r\n        rotate(-7deg)\r\n        scale(1.06);\r\n\r\n    background: #eadfd2;\r\n}\r\n\r\n\r\n.bkc-how-reminder-icon svg {\r\n    width: 27px;\r\n    height: 27px;\r\n\r\n    display: block;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REMINDER CONTENT\r\n========================================================= *\/\r\n\r\n.bkc-how-reminder-label {\r\n    display: block;\r\n\r\n    margin-bottom: 5px;\r\n\r\n    color: var(--how-caramel);\r\n\r\n    font-size: 9px;\r\n\r\n    font-weight: 700;\r\n\r\n    letter-spacing: 2px;\r\n\r\n    text-transform: uppercase;\r\n}\r\n\r\n\r\n.bkc-how-reminder-title {\r\n    margin: 0 0 5px;\r\n\r\n    color: var(--how-dark);\r\n\r\n    font-family: 'Playfair Display', serif;\r\n\r\n    font-size: 23px;\r\n\r\n    line-height: 1.15;\r\n\r\n    font-weight: 600;\r\n}\r\n\r\n\r\n.bkc-how-reminder-text {\r\n    margin: 0;\r\n\r\n    color: var(--how-muted);\r\n\r\n    font-size: 11px;\r\n\r\n    line-height: 1.7;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REMINDER SIDE TEXT\r\n========================================================= *\/\r\n\r\n.bkc-how-reminder-side {\r\n    padding-left: 28px;\r\n\r\n    border-left: 1px solid var(--how-border);\r\n\r\n    color: var(--how-brown);\r\n\r\n    font-family: 'Playfair Display', serif;\r\n\r\n    font-size: 15px;\r\n\r\n    font-style: italic;\r\n\r\n    white-space: nowrap;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BOTTOM NOTE\r\n========================================================= *\/\r\n\r\n.bkc-how-note {\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n    gap: 13px;\r\n\r\n    margin-top: 60px;\r\n\r\n    color: rgba(36,21,15,.45);\r\n\r\n    font-size: 8px;\r\n\r\n    font-weight: 700;\r\n\r\n    letter-spacing: 2px;\r\n\r\n    text-transform: uppercase;\r\n\r\n    opacity: 0;\r\n}\r\n\r\n\r\n.bkc-how.is-visible .bkc-how-note {\r\n    animation:\r\n        bkcHowFadeUp\r\n        .8s\r\n        ease\r\n        1.1s\r\n        forwards;\r\n}\r\n\r\n\r\n.bkc-how-note-line {\r\n    width: 38px;\r\n\r\n    height: 1px;\r\n\r\n    background: rgba(185,121,69,.45);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ANIMATIONS\r\n========================================================= *\/\r\n\r\n@keyframes bkcHowFadeUp {\r\n\r\n    from {\r\n        opacity: 0;\r\n        transform: translateY(25px);\r\n    }\r\n\r\n    to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n\r\n}\r\n\r\n\r\n@keyframes bkcHowTitleReveal {\r\n\r\n    from {\r\n        opacity: 0;\r\n        transform: translateY(40px);\r\n    }\r\n\r\n    to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n\r\n}\r\n\r\n\r\n@keyframes bkcHowCardReveal {\r\n\r\n    from {\r\n        opacity: 0;\r\n        transform: translateY(45px);\r\n    }\r\n\r\n    to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LARGE DESKTOP\r\n========================================================= *\/\r\n\r\n@media (min-width: 1500px) {\r\n\r\n    .bkc-how {\r\n        padding-top: 140px;\r\n        padding-bottom: 145px;\r\n    }\r\n\r\n    .bkc-how-container {\r\n        width: min(1480px, calc(100% - 140px));\r\n    }\r\n\r\n    .bkc-how-card {\r\n        min-height: 420px;\r\n        padding: 46px 42px 40px;\r\n    }\r\n\r\n    .bkc-how-card-bottom {\r\n        left: 42px;\r\n        right: 42px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LAPTOP\r\n========================================================= *\/\r\n\r\n@media (max-width: 1150px) {\r\n\r\n    .bkc-how {\r\n        padding: 95px 0 105px;\r\n    }\r\n\r\n    .bkc-how-container {\r\n        width: min(100% - 70px, 1080px);\r\n    }\r\n\r\n    .bkc-how-header {\r\n        margin-bottom: 52px;\r\n    }\r\n\r\n    .bkc-how-card {\r\n        min-height: 370px;\r\n        padding: 35px 30px 35px;\r\n    }\r\n\r\n    .bkc-how-number {\r\n        width: 62px;\r\n        height: 62px;\r\n        margin-bottom: 30px;\r\n    }\r\n\r\n    .bkc-how-card-bottom {\r\n        left: 30px;\r\n        right: 30px;\r\n    }\r\n\r\n    .bkc-how-reminder {\r\n        padding: 24px 26px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media (max-width: 850px) {\r\n\r\n    .bkc-how {\r\n        padding: 85px 0 95px;\r\n    }\r\n\r\n    .bkc-how-container {\r\n        width: calc(100% - 44px);\r\n    }\r\n\r\n    .bkc-how-header {\r\n        display: block;\r\n        margin-bottom: 45px;\r\n    }\r\n\r\n    .bkc-how-title {\r\n        max-width: 680px;\r\n        font-size:\r\n            clamp(45px, 8.5vw, 66px);\r\n    }\r\n\r\n    .bkc-how-intro {\r\n        width: 100%;\r\n        max-width: 520px;\r\n        margin-top: 24px;\r\n    }\r\n\r\n    .bkc-how-steps {\r\n        grid-template-columns: 1fr;\r\n        gap: 18px;\r\n    }\r\n\r\n    .bkc-how-card {\r\n        min-height: 310px;\r\n        padding: 34px 34px 35px;\r\n    }\r\n\r\n    .bkc-how-number {\r\n        margin-bottom: 27px;\r\n    }\r\n\r\n    .bkc-how-card-text {\r\n        max-width: 600px;\r\n    }\r\n\r\n    .bkc-how-card-bottom {\r\n        left: 34px;\r\n        right: 34px;\r\n        bottom: 30px;\r\n    }\r\n\r\n    .bkc-how-reminder {\r\n        grid-template-columns:\r\n            auto 1fr;\r\n\r\n        gap: 20px;\r\n    }\r\n\r\n    .bkc-how-reminder-side {\r\n        display: none;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 560px) {\r\n\r\n    .bkc-how {\r\n        padding: 70px 0 75px;\r\n    }\r\n\r\n    .bkc-how-container {\r\n        width: calc(100% - 30px);\r\n    }\r\n\r\n    .bkc-how::before {\r\n        top: 20px;\r\n        left: -10px;\r\n        font-size: 130px;\r\n    }\r\n\r\n    .bkc-how::after {\r\n        width: 300px;\r\n        height: 300px;\r\n\r\n        right: -190px;\r\n        bottom: -180px;\r\n    }\r\n\r\n    .bkc-how-header {\r\n        margin-bottom: 38px;\r\n    }\r\n\r\n    .bkc-how-badge {\r\n        gap: 9px;\r\n        margin-bottom: 18px;\r\n    }\r\n\r\n    .bkc-how-badge-line {\r\n        width: 30px;\r\n    }\r\n\r\n    .bkc-how-badge-text {\r\n        font-size: 8px;\r\n        letter-spacing: 2px;\r\n    }\r\n\r\n    .bkc-how-title {\r\n        font-size:\r\n            clamp(40px, 12.5vw, 56px);\r\n\r\n        line-height: .97;\r\n        letter-spacing: -2.2px;\r\n    }\r\n\r\n    .bkc-how-intro {\r\n        font-size: 11px;\r\n        line-height: 1.8;\r\n    }\r\n\r\n    .bkc-how-steps {\r\n        gap: 14px;\r\n    }\r\n\r\n    .bkc-how-card {\r\n        min-height: 320px;\r\n\r\n        padding:\r\n            27px\r\n            24px\r\n            32px;\r\n    }\r\n\r\n    .bkc-how-number {\r\n        width: 58px;\r\n        height: 58px;\r\n\r\n        margin-bottom: 27px;\r\n\r\n        font-size: 19px;\r\n    }\r\n\r\n    .bkc-how-step-label {\r\n        font-size: 8px;\r\n        letter-spacing: 1.8px;\r\n    }\r\n\r\n    .bkc-how-card-title {\r\n        font-size:\r\n            clamp(26px, 8vw, 34px);\r\n\r\n        letter-spacing: -1px;\r\n    }\r\n\r\n    .bkc-how-card-text {\r\n        font-size: 11px;\r\n        line-height: 1.8;\r\n    }\r\n\r\n    .bkc-how-card-bottom {\r\n        left: 24px;\r\n        right: 24px;\r\n        bottom: 25px;\r\n    }\r\n\r\n    .bkc-how-arrow {\r\n        width: 29px;\r\n        height: 29px;\r\n    }\r\n\r\n    .bkc-how-reminder {\r\n        grid-template-columns: auto 1fr;\r\n\r\n        gap: 16px;\r\n\r\n        margin-top: 14px;\r\n\r\n        padding:\r\n            21px\r\n            19px;\r\n    }\r\n\r\n    .bkc-how-reminder-icon {\r\n        width: 51px;\r\n        height: 51px;\r\n    }\r\n\r\n    .bkc-how-reminder-icon svg {\r\n        width: 23px;\r\n        height: 23px;\r\n    }\r\n\r\n    .bkc-how-reminder-label {\r\n        font-size: 7px;\r\n        letter-spacing: 1.5px;\r\n    }\r\n\r\n    .bkc-how-reminder-title {\r\n        font-size: 20px;\r\n    }\r\n\r\n    .bkc-how-reminder-text {\r\n        font-size: 10px;\r\n        line-height: 1.7;\r\n    }\r\n\r\n    .bkc-how-note {\r\n        margin-top: 42px;\r\n\r\n        font-size: 6px;\r\n        letter-spacing: 1.2px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   VERY SMALL MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 380px) {\r\n\r\n    .bkc-how-container {\r\n        width: calc(100% - 24px);\r\n    }\r\n\r\n    .bkc-how-card {\r\n        min-height: 305px;\r\n\r\n        padding:\r\n            25px\r\n            21px\r\n            30px;\r\n    }\r\n\r\n    .bkc-how-number {\r\n        width: 54px;\r\n        height: 54px;\r\n        font-size: 18px;\r\n    }\r\n\r\n    .bkc-how-card-bottom {\r\n        left: 21px;\r\n        right: 21px;\r\n    }\r\n\r\n    .bkc-how-reminder {\r\n        gap: 12px;\r\n        padding: 18px 15px;\r\n    }\r\n\r\n    .bkc-how-reminder-icon {\r\n        width: 46px;\r\n        height: 46px;\r\n    }\r\n\r\n    .bkc-how-reminder-title {\r\n        font-size: 18px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REDUCED MOTION\r\n========================================================= *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n    .bkc-how *,\r\n    .bkc-how {\r\n        animation: none !important;\r\n        transition: none !important;\r\n    }\r\n\r\n    .bkc-how-badge,\r\n    .bkc-how-title,\r\n    .bkc-how-intro,\r\n    .bkc-how-card,\r\n    .bkc-how-reminder,\r\n    .bkc-how-note {\r\n        opacity: 1 !important;\r\n        transform: none !important;\r\n    }\r\n\r\n}\r\n<\/style>\r\n\r\n\r\n<!-- =========================================================\r\n     BROOKLYN COOKIES \u2014 HOW TO ORDER\r\n========================================================= -->\r\n\r\n<section class=\"bkc-how\" id=\"bkcHowOrder\">\r\n\r\n    <div class=\"bkc-how-container\">\r\n\r\n        <!-- HEADER -->\r\n\r\n        <div class=\"bkc-how-header\">\r\n\r\n            <div>\r\n\r\n                <div class=\"bkc-how-badge\">\r\n\r\n                    <span class=\"bkc-how-badge-line\"><\/span>\r\n\r\n                    <span class=\"bkc-how-badge-text\">\r\n                        How to Work\r\n                    <\/span>\r\n\r\n                <\/div>\r\n\r\n                <h2 class=\"bkc-how-title\">\r\n\r\n                    From craving to\r\n                    <em>cookie.<\/em>\r\n\r\n                <\/h2>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"bkc-how-intro\">\r\n\r\n                <div class=\"bkc-how-intro-line\"><\/div>\r\n\r\n                Getting your favorite Brooklyn Cookies\r\n                is simple. Choose your treats, place\r\n                your order, then pick them up fresh\r\n                at the market.\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- THREE STEPS -->\r\n\r\n        <div class=\"bkc-how-steps\">\r\n\r\n\r\n            <!-- STEP 01 -->\r\n\r\n            <article class=\"bkc-how-card\">\r\n\r\n                <div class=\"bkc-how-number\">\r\n                    01\r\n                <\/div>\r\n\r\n                <span class=\"bkc-how-step-label\">\r\n                    Step One\r\n                <\/span>\r\n\r\n                <h3 class=\"bkc-how-card-title\">\r\n                    Choose your cookies.\r\n                <\/h3>\r\n\r\n                <p class=\"bkc-how-card-text\">\r\n\r\n                    Explore our freshly baked flavors\r\n                    and choose the cookies you'd like\r\n                    waiting for you on market day.\r\n\r\n                <\/p>\r\n\r\n                <div class=\"bkc-how-card-bottom\">\r\n\r\n                    <span class=\"bkc-how-card-line\"><\/span>\r\n\r\n                    <span class=\"bkc-how-arrow\">\r\n\r\n                        <svg\r\n                            viewBox=\"0 0 24 24\"\r\n                            fill=\"none\"\r\n                            xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n                            aria-hidden=\"true\"\r\n                        >\r\n\r\n                            <path\r\n                                d=\"M5 12H19\"\r\n                                stroke=\"currentColor\"\r\n                                stroke-width=\"1.7\"\r\n                                stroke-linecap=\"round\"\r\n                            \/>\r\n\r\n                            <path\r\n                                d=\"M13 6L19 12L13 18\"\r\n                                stroke=\"currentColor\"\r\n                                stroke-width=\"1.7\"\r\n                                stroke-linecap=\"round\"\r\n                                stroke-linejoin=\"round\"\r\n                            \/>\r\n\r\n                        <\/svg>\r\n\r\n                    <\/span>\r\n\r\n                <\/div>\r\n\r\n            <\/article>\r\n\r\n\r\n            <!-- STEP 02 -->\r\n\r\n            <article class=\"bkc-how-card bkc-how-active\">\r\n\r\n                <div class=\"bkc-how-number\">\r\n                    02\r\n                <\/div>\r\n\r\n                <span class=\"bkc-how-step-label\">\r\n                    Step Two\r\n                <\/span>\r\n\r\n                <h3 class=\"bkc-how-card-title\">\r\n                    Place your pre-order.\r\n                <\/h3>\r\n\r\n                <p class=\"bkc-how-card-text\">\r\n\r\n                    Pick your quantity, select your\r\n                    market pickup, and place your\r\n                    pre-order before the weekly cutoff.\r\n\r\n                <\/p>\r\n\r\n                <div class=\"bkc-how-card-bottom\">\r\n\r\n                    <span class=\"bkc-how-card-line\"><\/span>\r\n\r\n                    <span class=\"bkc-how-arrow\">\r\n\r\n                        <svg\r\n                            viewBox=\"0 0 24 24\"\r\n                            fill=\"none\"\r\n                            xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n                            aria-hidden=\"true\"\r\n                        >\r\n\r\n                            <path\r\n                                d=\"M5 12H19\"\r\n                                stroke=\"currentColor\"\r\n                                stroke-width=\"1.7\"\r\n                                stroke-linecap=\"round\"\r\n                            \/>\r\n\r\n                            <path\r\n                                d=\"M13 6L19 12L13 18\"\r\n                                stroke=\"currentColor\"\r\n                                stroke-width=\"1.7\"\r\n                                stroke-linecap=\"round\"\r\n                                stroke-linejoin=\"round\"\r\n                            \/>\r\n\r\n                        <\/svg>\r\n\r\n                    <\/span>\r\n\r\n                <\/div>\r\n\r\n            <\/article>\r\n\r\n\r\n            <!-- STEP 03 -->\r\n\r\n            <article class=\"bkc-how-card\">\r\n\r\n                <div class=\"bkc-how-number\">\r\n                    03\r\n                <\/div>\r\n\r\n                <span class=\"bkc-how-step-label\">\r\n                    Step Three\r\n                <\/span>\r\n\r\n                <h3 class=\"bkc-how-card-title\">\r\n                    Pick up & enjoy.\r\n                <\/h3>\r\n\r\n                <p class=\"bkc-how-card-text\">\r\n\r\n                    Visit us at your selected market,\r\n                    collect your cookie box, and enjoy\r\n                    them fresh with friends or family.\r\n\r\n                <\/p>\r\n\r\n                <div class=\"bkc-how-card-bottom\">\r\n\r\n                    <span class=\"bkc-how-card-line\"><\/span>\r\n\r\n                    <span class=\"bkc-how-arrow\">\r\n\r\n                        <svg\r\n                            viewBox=\"0 0 24 24\"\r\n                            fill=\"none\"\r\n                            xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n                            aria-hidden=\"true\"\r\n                        >\r\n\r\n                            <path\r\n                                d=\"M5 12H19\"\r\n                                stroke=\"currentColor\"\r\n                                stroke-width=\"1.7\"\r\n                                stroke-linecap=\"round\"\r\n                            \/>\r\n\r\n                            <path\r\n                                d=\"M13 6L19 12L13 18\"\r\n                                stroke=\"currentColor\"\r\n                                stroke-width=\"1.7\"\r\n                                stroke-linecap=\"round\"\r\n                                stroke-linejoin=\"round\"\r\n                            \/>\r\n\r\n                        <\/svg>\r\n\r\n                    <\/span>\r\n\r\n                <\/div>\r\n\r\n            <\/article>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- PRE-ORDER REMINDER -->\r\n\r\n        <div class=\"bkc-how-reminder\">\r\n\r\n            <div class=\"bkc-how-reminder-icon\">\r\n\r\n                <svg\r\n                    viewBox=\"0 0 32 32\"\r\n                    fill=\"none\"\r\n                    xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n                    aria-hidden=\"true\"\r\n                >\r\n\r\n                    <rect\r\n                        x=\"5\"\r\n                        y=\"7\"\r\n                        width=\"22\"\r\n                        height=\"20\"\r\n                        rx=\"3\"\r\n                        stroke=\"currentColor\"\r\n                        stroke-width=\"1.7\"\r\n                    \/>\r\n\r\n                    <path\r\n                        d=\"M5 12H27\"\r\n                        stroke=\"currentColor\"\r\n                        stroke-width=\"1.7\"\r\n                    \/>\r\n\r\n                    <path\r\n                        d=\"M10 4V9\"\r\n                        stroke=\"currentColor\"\r\n                        stroke-width=\"1.7\"\r\n                        stroke-linecap=\"round\"\r\n                    \/>\r\n\r\n                    <path\r\n                        d=\"M22 4V9\"\r\n                        stroke=\"currentColor\"\r\n                        stroke-width=\"1.7\"\r\n                        stroke-linecap=\"round\"\r\n                    \/>\r\n\r\n                    <path\r\n                        d=\"M10.5 19L14 22.5L21.5 15\"\r\n                        stroke=\"currentColor\"\r\n                        stroke-width=\"1.8\"\r\n                        stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\"\r\n                    \/>\r\n\r\n                <\/svg>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div>\r\n\r\n                <span class=\"bkc-how-reminder-label\">\r\n                    Pre-Order Reminder\r\n                <\/span>\r\n\r\n                <h3 class=\"bkc-how-reminder-title\">\r\n                    Plan ahead for market day.\r\n                <\/h3>\r\n\r\n                <p class=\"bkc-how-reminder-text\">\r\n\r\n                    Check the current market schedule\r\n                    and pre-order details before placing\r\n                    your cookie order.\r\n\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"bkc-how-reminder-side\">\r\n                Freshly planned. Freshly baked.\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- BOTTOM ORNAMENT -->\r\n\r\n        <div class=\"bkc-how-note\">\r\n\r\n            <span class=\"bkc-how-note-line\"><\/span>\r\n\r\n            Simple ordering \u2022 Fresh pickup\r\n\r\n            <span class=\"bkc-how-note-line\"><\/span>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<script>\r\n\r\ndocument.addEventListener(\r\n    'DOMContentLoaded',\r\n    function () {\r\n\r\n        const section =\r\n            document.getElementById('bkcHowOrder');\r\n\r\n        if (!section) return;\r\n\r\n\r\n        \/* =====================================================\r\n           SCROLL REVEAL\r\n        ===================================================== *\/\r\n\r\n        if ('IntersectionObserver' in window) {\r\n\r\n            const observer =\r\n                new IntersectionObserver(\r\n                    function (entries) {\r\n\r\n                        entries.forEach(\r\n                            function (entry) {\r\n\r\n                                if (\r\n                                    entry.isIntersecting\r\n                                ) {\r\n\r\n                                    section.classList.add(\r\n                                        'is-visible'\r\n                                    );\r\n\r\n                                    observer.unobserve(\r\n                                        section\r\n                                    );\r\n\r\n                                }\r\n\r\n                            }\r\n                        );\r\n\r\n                    },\r\n                    {\r\n                        threshold: 0.12\r\n                    }\r\n                );\r\n\r\n\r\n            observer.observe(section);\r\n\r\n        } else {\r\n\r\n            section.classList.add(\r\n                'is-visible'\r\n            );\r\n\r\n        }\r\n\r\n\r\n        \/* =====================================================\r\n           CARD HOVER \/ ACTIVE\r\n        ===================================================== *\/\r\n\r\n        const cards =\r\n            section.querySelectorAll(\r\n                '.bkc-how-card'\r\n            );\r\n\r\n\r\n        cards.forEach(\r\n            function (card) {\r\n\r\n                card.addEventListener(\r\n                    'mouseenter',\r\n                    function () {\r\n\r\n                        cards.forEach(\r\n                            function (item) {\r\n\r\n                                item.classList.remove(\r\n                                    'bkc-how-active'\r\n                                );\r\n\r\n                            }\r\n                        );\r\n\r\n                        card.classList.add(\r\n                            'bkc-how-active'\r\n                        );\r\n\r\n                    }\r\n                );\r\n\r\n\r\n                card.addEventListener(\r\n                    'mouseleave',\r\n                    function () {\r\n\r\n                        cards.forEach(\r\n                            function (item) {\r\n\r\n                                item.classList.remove(\r\n                                    'bkc-how-active'\r\n                                );\r\n\r\n                            }\r\n                        );\r\n\r\n\r\n                        \/* Center card remains active *\/\r\n\r\n                        if (cards[1]) {\r\n\r\n                            cards[1].classList.add(\r\n                                'bkc-how-active'\r\n                            );\r\n\r\n                        }\r\n\r\n                    }\r\n                );\r\n\r\n            }\r\n        );\r\n\r\n    }\r\n);\r\n\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8dfe7a1 e-con-full e-flex e-con e-parent\" data-id=\"8dfe7a1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c3949e0 elementor-widget elementor-widget-html\" data-id=\"c3949e0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\n     PREMIUM COOKIE SHOP \u2014 MENU \/ SHOP SECTION\r\n     Elementor Pro HTML Widget\r\n\r\n     DESIGN: Heading left | Description right (like hero)\r\n     \u2713 Matches hero section styling\r\n     \u2713 Same buttons with caramel hover\r\n     \u2713 Centered tabs with icons\r\n     \u2713 Dark pickup selector\r\n========================================================= -->\r\n\r\n<style>\r\n\/* =========================================================\r\n   FONTS\r\n========================================================= *\/\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,600&display=swap');\r\n\r\n\r\n\/* =========================================================\r\n   ROOT VARIABLES \u2014 MATCHES HERO\r\n========================================================= *\/\r\n.cookie-shop {\r\n    --bkc-dark: #24150f;\r\n    --bkc-dark-2: #352118;\r\n    --bkc-cream: #f4eee5;\r\n    --bkc-white: #fffdf9;\r\n    --bkc-caramel: #b97945;\r\n    --bkc-brown: #74452d;\r\n    --bkc-muted: #796b61;\r\n\r\n    position: relative;\r\n    width: 100%;\r\n    padding: 90px 0 100px;\r\n    background: var(--bkc-white);\r\n    color: var(--bkc-dark);\r\n    font-family: 'DM Sans', sans-serif;\r\n    overflow: hidden;\r\n    box-sizing: border-box;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   GLOBAL BOX SIZING\r\n========================================================= *\/\r\n.cookie-shop *,\r\n.cookie-shop *::before,\r\n.cookie-shop *::after {\r\n    box-sizing: border-box;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SECTION HEADER \u2014 FLEX: LEFT TITLE + RIGHT DESC\r\n========================================================= *\/\r\n.cookie-shop-header {\r\n    width: 100%;\r\n    max-width: 1480px;\r\n    margin: 0 auto 58px;\r\n    padding: 0 65px;\r\n    display: flex;\r\n    align-items: flex-end;\r\n    justify-content: space-between;\r\n    gap: 40px;\r\n}\r\n\r\n\r\n\/* LEFT SIDE \u2014 Badge + Title *\/\r\n.cookie-shop-header-left {\r\n    flex: 0 0 auto;\r\n    max-width: 700px;\r\n}\r\n\r\n\r\n\/* RIGHT SIDE \u2014 Description *\/\r\n.cookie-shop-header-right {\r\n    flex: 1;\r\n    max-width: 480px;\r\n    padding-bottom: 7px;\r\n}\r\n\r\n\r\n\/* BADGE \u2014 matches hero eyebrow *\/\r\n.cookie-shop-badge {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 13px;\r\n    margin-bottom: 22px;\r\n    opacity: 0;\r\n    transform: translateY(22px);\r\n}\r\n\r\n.cookie-shop.active .cookie-shop-badge {\r\n    animation: cookieShopUp .8s cubic-bezier(.16,1,.3,1) .05s forwards;\r\n}\r\n\r\n.cookie-shop-badge-line {\r\n    width: 42px;\r\n    height: 1px;\r\n    background: var(--bkc-caramel);\r\n}\r\n\r\n.cookie-shop-badge-text {\r\n    color: var(--bkc-brown);\r\n    font-family: 'DM Sans', sans-serif;\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n    letter-spacing: 2.8px;\r\n    text-transform: uppercase;\r\n}\r\n\r\n\/* TITLE \u2014 left aligned, Playfair like hero *\/\r\n.cookie-shop-title {\r\n    font-family: 'Playfair Display', serif;\r\n    font-size: clamp(52px, 6vw, 88px);\r\n    font-weight: 600;\r\n    line-height: 0.94;\r\n    letter-spacing: -3.5px;\r\n    color: var(--bkc-dark);\r\n    margin: 0;\r\n    opacity: 0;\r\n    transform: translateY(40px);\r\n    text-align: left;\r\n}\r\n\r\n.cookie-shop.active .cookie-shop-title {\r\n    animation: cookieShopTitle 1s cubic-bezier(.16,1,.3,1) .15s forwards;\r\n}\r\n\r\n.cookie-shop-title span {\r\n    color: var(--bkc-caramel);\r\n    font-style: italic;\r\n    font-weight: 500;\r\n}\r\n\r\n\/* DESCRIPTION \u2014 right aligned *\/\r\n.cookie-shop-desc {\r\n    margin: 0;\r\n    font-family: 'DM Sans', sans-serif;\r\n    font-size: 15px;\r\n    font-weight: 400;\r\n    line-height: 1.8;\r\n    color: var(--bkc-muted);\r\n    opacity: 0;\r\n    transform: translateY(20px);\r\n    text-align: left;\r\n}\r\n\r\n.cookie-shop.active .cookie-shop-desc {\r\n    animation: cookieShopUp .8s cubic-bezier(.16,1,.3,1) .28s forwards;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MAIN CONTAINER\r\n========================================================= *\/\r\n.cookie-shop-container {\r\n    width: 100%;\r\n    max-width: 1480px;\r\n    margin: 0 auto;\r\n    padding: 0 65px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABS NAVIGATION \u2014 CENTERED\r\n========================================================= *\/\r\n.cookie-tabs-nav {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    justify-content: center;\r\n    gap: 10px;\r\n    margin-bottom: 45px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TAB BUTTON \u2014 MATCHES HERO SECONDARY BUTTON\r\n========================================================= *\/\r\n.cookie-tab-btn {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 10px;\r\n    padding: 13px 24px;\r\n    border: 1px solid rgba(36,21,15,.18);\r\n    border-radius: 3px;\r\n    background: transparent;\r\n    color: var(--bkc-muted);\r\n    font-family: 'DM Sans', sans-serif;\r\n    font-size: 11px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.5px;\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n    outline: none;\r\n}\r\n\r\n.cookie-tab-btn:hover {\r\n    background: var(--bkc-dark);\r\n    color: #ffffff;\r\n    transform: translateY(-3px);\r\n}\r\n\r\n.cookie-tab-btn.active {\r\n    background: var(--bkc-dark);\r\n    color: #ffffff;\r\n    border-color: var(--bkc-dark);\r\n    box-shadow: 0 8px 20px rgba(36,21,15,0.2);\r\n}\r\n\r\n.cookie-tab-btn.active:hover {\r\n    background: var(--bkc-caramel);\r\n    border-color: var(--bkc-caramel);\r\n    transform: translateY(-3px);\r\n}\r\n\r\n.cookie-tab-btn .tab-icon {\r\n    font-size: 18px;\r\n    line-height: 1;\r\n    transition: transform 0.3s ease;\r\n}\r\n\r\n.cookie-tab-btn:hover .tab-icon {\r\n    transform: scale(1.15);\r\n}\r\n\r\n.cookie-tab-btn.active .tab-icon {\r\n    transform: scale(1.1);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TAB CONTENT\r\n========================================================= *\/\r\n.cookie-tabs-content {\r\n    position: relative;\r\n    width: 100%;\r\n    min-height: 420px;\r\n}\r\n\r\n.cookie-tab-panel {\r\n    display: none;\r\n    animation: cookieTabFadeIn 0.45s ease forwards;\r\n}\r\n\r\n.cookie-tab-panel.active {\r\n    display: block;\r\n}\r\n\r\n@keyframes cookieTabFadeIn {\r\n    from { opacity: 0; transform: translateY(15px); }\r\n    to { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PANEL GRID\r\n========================================================= *\/\r\n.cookie-panel-grid {\r\n    display: grid;\r\n    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\r\n    gap: 58px;\r\n    align-items: center;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   IMAGE WRAPPER\r\n========================================================= *\/\r\n.cookie-panel-image {\r\n    position: relative;\r\n    width: 100%;\r\n    overflow: hidden;\r\n    border-radius: 3px;\r\n    background: var(--bkc-cream);\r\n    box-shadow: 0 22px 55px rgba(36,21,15,0.10);\r\n}\r\n\r\n.cookie-panel-image img {\r\n    display: block;\r\n    width: 100%;\r\n    height: 100%;\r\n    min-height: 390px;\r\n    max-height: 490px;\r\n    object-fit: cover;\r\n    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);\r\n}\r\n\r\n.cookie-panel-image:hover img {\r\n    transform: scale(1.035);\r\n}\r\n\r\n.cookie-panel-image::after {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 0;\r\n    background: linear-gradient(180deg, rgba(0,0,0,0) 48%, rgba(0,0,0,0.15) 100%);\r\n    pointer-events: none;\r\n}\r\n\r\n\r\n\/* Image badge *\/\r\n.cookie-image-badge {\r\n    position: absolute;\r\n    top: 18px;\r\n    right: 18px;\r\n    z-index: 3;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 8px 15px;\r\n    border-radius: 3px;\r\n    background: var(--bkc-caramel);\r\n    color: #ffffff;\r\n    font-family: 'DM Sans', sans-serif;\r\n    font-size: 9px;\r\n    font-weight: 700;\r\n    letter-spacing: 1.2px;\r\n    text-transform: uppercase;\r\n    box-shadow: 0 7px 18px rgba(0,0,0,0.12);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PANEL INFO\r\n========================================================= *\/\r\n.cookie-panel-info {\r\n    width: 100%;\r\n    padding: 8px 0;\r\n}\r\n\r\n\r\n\/* Small label *\/\r\n.cookie-panel-label {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    margin-bottom: 12px;\r\n    font-family: 'DM Sans', sans-serif;\r\n    font-size: 9px;\r\n    font-weight: 700;\r\n    letter-spacing: 2.2px;\r\n    text-transform: uppercase;\r\n    color: var(--bkc-brown);\r\n}\r\n\r\n.cookie-panel-label::before {\r\n    content: '';\r\n    width: 28px;\r\n    height: 1px;\r\n    background: var(--bkc-caramel);\r\n}\r\n\r\n\r\n\/* Product title *\/\r\n.cookie-panel-name {\r\n    font-family: 'Playfair Display', serif;\r\n    font-size: clamp(35px, 4vw, 56px);\r\n    font-weight: 600;\r\n    line-height: 1.02;\r\n    letter-spacing: -2px;\r\n    color: var(--bkc-dark);\r\n    margin: 0 0 16px;\r\n}\r\n\r\n.cookie-panel-name span {\r\n    color: var(--bkc-caramel);\r\n    font-style: italic;\r\n}\r\n\r\n\r\n\/* Description *\/\r\n.cookie-panel-desc {\r\n    max-width: 530px;\r\n    margin: 0 0 23px;\r\n    font-family: 'DM Sans', sans-serif;\r\n    font-size: 15px;\r\n    font-weight: 400;\r\n    line-height: 1.85;\r\n    color: var(--bkc-muted);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PRICING\r\n========================================================= *\/\r\n.cookie-panel-pricing {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    align-items: center;\r\n    gap: 20px 35px;\r\n    margin-bottom: 24px;\r\n    padding: 19px 0;\r\n    border-top: 1px solid rgba(36,21,15,.10);\r\n    border-bottom: 1px solid rgba(36,21,15,.10);\r\n}\r\n\r\n.cookie-price-item {\r\n    display: flex;\r\n    align-items: baseline;\r\n    gap: 10px;\r\n}\r\n\r\n.cookie-price-label {\r\n    font-family: 'DM Sans', sans-serif;\r\n    font-size: 11px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.5px;\r\n    text-transform: uppercase;\r\n    color: var(--bkc-muted);\r\n}\r\n\r\n.cookie-price-amount {\r\n    font-family: 'DM Sans', sans-serif;\r\n    font-size: 20px;\r\n    font-weight: 700;\r\n    color: var(--bkc-brown);\r\n}\r\n\r\n.cookie-price-amount small {\r\n    font-size: 12px;\r\n    font-weight: 400;\r\n    color: var(--bkc-muted);\r\n    margin-left: 4px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ALLERGENS \u2014 WITH SVG ICONS\r\n========================================================= *\/\r\n.cookie-panel-allergens {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 8px;\r\n    margin-bottom: 28px;\r\n}\r\n\r\n.cookie-allergen-tag {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n    padding: 7px 14px;\r\n    border-radius: 50px;\r\n    border: 1px solid rgba(36,21,15,.12);\r\n    background: var(--bkc-cream);\r\n    color: var(--bkc-muted);\r\n    font-family: 'DM Sans', sans-serif;\r\n    font-size: 10px;\r\n    font-weight: 600;\r\n    letter-spacing: 0.3px;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.cookie-allergen-tag svg {\r\n    width: 14px;\r\n    height: 14px;\r\n    flex-shrink: 0;\r\n}\r\n\r\n\/* Warning *\/\r\n.cookie-allergen-tag.warning {\r\n    border-color: #ead3d0;\r\n    background: #fff8f7;\r\n    color: #a76b66;\r\n}\r\n\r\n.cookie-allergen-tag.warning svg {\r\n    color: #c77a73;\r\n}\r\n\r\n\/* Safe *\/\r\n.cookie-allergen-tag.safe {\r\n    border-color: #d2e2d4;\r\n    background: #f6fbf6;\r\n    color: #5e8a65;\r\n}\r\n\r\n.cookie-allergen-tag.safe svg {\r\n    color: #6a9b72;\r\n}\r\n\r\n\/* Dairy *\/\r\n.cookie-allergen-tag.dairy {\r\n    border-color: #e8dbb9;\r\n    background: #fffcf3;\r\n    color: #9a7b32;\r\n}\r\n\r\n.cookie-allergen-tag.dairy svg {\r\n    color: #c4a14a;\r\n}\r\n\r\n\/* Nut *\/\r\n.cookie-allergen-tag.nut {\r\n    border-color: #dfcfe3;\r\n    background: #fbf7fc;\r\n    color: #805c87;\r\n}\r\n\r\n.cookie-allergen-tag.nut svg {\r\n    color: #9b6fa3;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ORDER BUTTON \u2014 MATCHES HERO PRIMARY BUTTON\r\n========================================================= *\/\r\n.cookie-order-btn {\r\n    position: relative;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 14px;\r\n    min-height: 54px;\r\n    padding: 0 27px;\r\n    border-radius: 3px;\r\n    background: var(--bkc-dark);\r\n    color: #ffffff !important;\r\n    text-decoration: none !important;\r\n    font-family: 'DM Sans', sans-serif;\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n    letter-spacing: 1.5px;\r\n    text-transform: uppercase;\r\n    overflow: hidden;\r\n    cursor: pointer;\r\n    transition: transform .3s ease, box-shadow .3s ease;\r\n}\r\n\r\n.cookie-order-btn::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 0;\r\n    background: var(--bkc-caramel);\r\n    transform: translateX(-101%);\r\n    transition: transform .45s cubic-bezier(.16,1,.3,1);\r\n}\r\n\r\n.cookie-order-btn:hover {\r\n    transform: translateY(-3px);\r\n    box-shadow: 0 14px 30px rgba(36,21,15,.2);\r\n}\r\n\r\n.cookie-order-btn:hover::before {\r\n    transform: translateX(0);\r\n}\r\n\r\n.cookie-order-btn span,\r\n.cookie-order-btn svg {\r\n    position: relative;\r\n    z-index: 2;\r\n}\r\n\r\n.cookie-order-btn svg {\r\n    width: 17px;\r\n    height: 17px;\r\n    transition: transform .3s ease;\r\n}\r\n\r\n.cookie-order-btn:hover svg {\r\n    transform: translateX(4px);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PICKUP SECTION \u2014 DARK BACKGROUND WITH LEFT\/RIGHT LAYOUT\r\n========================================================= *\/\r\n.cookie-pickup-section {\r\n    width: 100%;\r\n    margin-top: 48px;\r\n    padding: 32px 36px;\r\n    border-radius: 3px;\r\n    background: var(--bkc-dark);\r\n    border: 1px solid rgba(255,255,255,0.06);\r\n    box-shadow: 0 20px 50px rgba(0,0,0,0.15);\r\n    opacity: 0;\r\n    transform: translateY(25px);\r\n}\r\n\r\n.cookie-shop.active .cookie-pickup-section {\r\n    animation: cookieShopUp .9s cubic-bezier(.16,1,.3,1) 0.6s forwards;\r\n}\r\n\r\n\/* Pickup inner flex \u2014 left header, right options *\/\r\n.cookie-pickup-inner {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 30px;\r\n}\r\n\r\n\/* Pickup header \u2014 left side *\/\r\n.cookie-pickup-header {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    gap: 14px;\r\n    flex-shrink: 0;\r\n}\r\n\r\n.cookie-pickup-header svg {\r\n    width: 26px;\r\n    height: 26px;\r\n    flex-shrink: 0;\r\n    color: var(--bkc-caramel);\r\n    margin-top: 2px;\r\n}\r\n\r\n.cookie-pickup-header h4 {\r\n    margin: 0;\r\n    font-family: 'Playfair Display', serif;\r\n    font-size: 22px;\r\n    font-weight: 600;\r\n    line-height: 1.2;\r\n    color: #ffffff;\r\n}\r\n\r\n.cookie-pickup-header span {\r\n    display: block;\r\n    margin-top: 3px;\r\n    font-family: 'DM Sans', sans-serif;\r\n    font-size: 12px;\r\n    font-weight: 400;\r\n    color: rgba(255,255,255,0.45);\r\n}\r\n\r\n\/* Pickup options \u2014 right side *\/\r\n.cookie-pickup-options {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 10px;\r\n    justify-content: flex-end;\r\n    flex: 1;\r\n}\r\n\r\n.cookie-pickup-option {\r\n    padding: 12px 20px;\r\n    border-radius: 3px;\r\n    border: 1px solid rgba(255,255,255,0.10);\r\n    background: rgba(255,255,255,0.04);\r\n    color: rgba(255,255,255,0.6);\r\n    font-family: 'DM Sans', sans-serif;\r\n    font-size: 12px;\r\n    font-weight: 600;\r\n    line-height: 1.4;\r\n    text-align: left;\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n    outline: none;\r\n    min-width: 140px;\r\n}\r\n\r\n.cookie-pickup-option:hover {\r\n    border-color: rgba(185,121,69,0.4);\r\n    color: #ffffff;\r\n    transform: translateY(-2px);\r\n    background: rgba(255,255,255,0.06);\r\n}\r\n\r\n.cookie-pickup-option.active {\r\n    border-color: var(--bkc-caramel);\r\n    background: rgba(185,121,69,0.15);\r\n    color: #ffffff;\r\n}\r\n\r\n.cookie-pickup-option .pickup-date {\r\n    display: block;\r\n    margin-top: 4px;\r\n    font-size: 10px;\r\n    font-weight: 500;\r\n    color: rgba(255,255,255,0.35);\r\n}\r\n\r\n.cookie-pickup-option.active .pickup-date {\r\n    color: rgba(255,255,255,0.55);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ANIMATIONS\r\n========================================================= *\/\r\n@keyframes cookieShopUp {\r\n    from { opacity: 0; transform: translateY(25px); }\r\n    to { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n@keyframes cookieShopTitle {\r\n    from { opacity: 0; transform: translateY(42px); }\r\n    to { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   RESPONSIVE\r\n========================================================= *\/\r\n@media (max-width: 1100px) {\r\n    .cookie-shop-header {\r\n        flex-direction: column;\r\n        align-items: flex-start;\r\n        gap: 20px;\r\n    }\r\n    .cookie-shop-header-right {\r\n        max-width: 100%;\r\n        padding-bottom: 0;\r\n    }\r\n    .cookie-pickup-inner {\r\n        flex-direction: column;\r\n        align-items: flex-start;\r\n        gap: 20px;\r\n    }\r\n    .cookie-pickup-options {\r\n        justify-content: flex-start;\r\n        width: 100%;\r\n    }\r\n    .cookie-pickup-option {\r\n        min-width: auto;\r\n        flex: 1 1 auto;\r\n    }\r\n}\r\n\r\n@media (max-width: 1024px) {\r\n    .cookie-shop { padding: 70px 0 80px; }\r\n    .cookie-shop-header { padding: 0 35px; }\r\n    .cookie-shop-container { padding: 0 35px; }\r\n    .cookie-shop-title { font-size: clamp(48px, 6.2vw, 72px); }\r\n    .cookie-panel-grid { gap: 38px; }\r\n    .cookie-panel-image img { min-height: 330px; max-height: 410px; }\r\n    .cookie-panel-name { font-size: clamp(33px, 4vw, 48px); }\r\n    .cookie-tab-btn { padding: 11px 18px; font-size: 11px; }\r\n    .cookie-tab-btn .tab-icon { font-size: 16px; }\r\n}\r\n\r\n@media (max-width: 850px) {\r\n    .cookie-panel-grid { grid-template-columns: 1fr; gap: 32px; }\r\n    .cookie-panel-image img { min-height: 300px; max-height: 370px; }\r\n    .cookie-panel-info { text-align: left; }\r\n    .cookie-panel-desc { margin-left: 0; }\r\n    .cookie-panel-pricing { justify-content: flex-start; }\r\n    .cookie-panel-allergens { justify-content: flex-start; }\r\n    .cookie-order-btn { max-width: 320px; }\r\n    .cookie-shop-title { font-size: clamp(48px, 9vw, 70px); }\r\n    .cookie-tabs-nav { justify-content: center; }\r\n    .cookie-pickup-inner {\r\n        flex-direction: column;\r\n        align-items: flex-start;\r\n        gap: 18px;\r\n    }\r\n    .cookie-pickup-options {\r\n        justify-content: flex-start;\r\n        width: 100%;\r\n    }\r\n    .cookie-pickup-option {\r\n        min-width: auto;\r\n        flex: 1 1 auto;\r\n    }\r\n}\r\n\r\n@media (max-width: 600px) {\r\n    .cookie-shop { padding: 55px 0 65px; }\r\n    .cookie-shop-header { padding: 0 18px; margin-bottom: 40px; flex-direction: column; gap: 12px; }\r\n    .cookie-shop-header-right { max-width: 100%; }\r\n    .cookie-shop-container { padding: 0 18px; }\r\n    \r\n    .cookie-shop-badge { gap: 10px; margin-bottom: 18px; }\r\n    .cookie-shop-badge-line { width: 32px; }\r\n    .cookie-shop-badge-text { font-size: 8px; letter-spacing: 2px; }\r\n    .cookie-shop-title { font-size: clamp(43px, 13vw, 60px); line-height: .96; letter-spacing: -2.5px; }\r\n    .cookie-shop-desc { font-size: 13px; line-height: 1.75; }\r\n    \r\n    \/* Tabs \u2014 scrollable on mobile *\/\r\n    .cookie-tabs-nav {\r\n        flex-wrap: nowrap;\r\n        overflow-x: auto;\r\n        gap: 8px;\r\n        padding-bottom: 10px;\r\n        -webkit-overflow-scrolling: touch;\r\n        scrollbar-width: none;\r\n        justify-content: flex-start;\r\n    }\r\n    .cookie-tabs-nav::-webkit-scrollbar { display: none; }\r\n    .cookie-tab-btn {\r\n        flex-shrink: 0;\r\n        padding: 10px 16px;\r\n        font-size: 10px;\r\n        gap: 6px;\r\n    }\r\n    .cookie-tab-btn .tab-icon { font-size: 15px; }\r\n    \r\n    .cookie-panel-image img { min-height: 225px; max-height: 285px; }\r\n    .cookie-image-badge { top: 11px; right: 11px; padding: 6px 11px; font-size: 7px; letter-spacing: 0.9px; }\r\n    .cookie-panel-label { font-size: 8px; letter-spacing: 1.8px; gap: 8px; }\r\n    .cookie-panel-label::before { width: 22px; }\r\n    .cookie-panel-name { font-size: clamp(32px, 9vw, 45px); line-height: 1.04; letter-spacing: -1.5px; }\r\n    .cookie-panel-desc { font-size: 13px; line-height: 1.75; }\r\n    \r\n    .cookie-panel-pricing { flex-direction: column; align-items: flex-start; gap: 9px; padding: 17px 0; }\r\n    .cookie-price-item { justify-content: flex-start; }\r\n    .cookie-price-amount { font-size: 17px; }\r\n    .cookie-price-label { font-size: 9px; }\r\n    .cookie-price-amount small { font-size: 10px; }\r\n    \r\n    .cookie-panel-allergens { gap: 6px; margin-bottom: 20px; }\r\n    .cookie-allergen-tag { padding: 5px 10px; font-size: 8px; }\r\n    .cookie-allergen-tag svg { width: 12px; height: 12px; }\r\n    \r\n    .cookie-order-btn { max-width: 100%; width: 100%; min-height: 48px; padding: 13px 24px; }\r\n    \r\n    \/* Pickup \u2014 dark *\/\r\n    .cookie-pickup-section { margin-top: 32px; padding: 22px 20px; border-radius: 3px; }\r\n    .cookie-pickup-inner { flex-direction: column; align-items: flex-start; gap: 16px; }\r\n    .cookie-pickup-header { gap: 10px; }\r\n    .cookie-pickup-header svg { width: 22px; height: 22px; }\r\n    .cookie-pickup-header h4 { font-size: 18px; }\r\n    .cookie-pickup-header span { font-size: 10px; }\r\n    .cookie-pickup-options { flex-direction: column; width: 100%; gap: 8px; }\r\n    .cookie-pickup-option { width: 100%; padding: 12px 16px; font-size: 11px; text-align: center; }\r\n}\r\n\r\n@media (max-width: 380px) {\r\n    .cookie-shop-title { font-size: 40px; }\r\n    .cookie-panel-name { font-size: 30px; }\r\n    .cookie-tab-btn { padding: 8px 14px; font-size: 9px; }\r\n    .cookie-tab-btn .tab-icon { font-size: 13px; }\r\n    .cookie-pickup-section { padding: 18px 16px; }\r\n    .cookie-pickup-header h4 { font-size: 16px; }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n    .cookie-shop *,\r\n    .cookie-shop { animation: none !important; transition: none !important; transform: none !important; }\r\n    .cookie-shop-badge,\r\n    .cookie-shop-title,\r\n    .cookie-shop-desc,\r\n    .cookie-pickup-section { opacity: 1 !important; transform: none !important; }\r\n}\r\n<\/style>\r\n\r\n\r\n<!-- =========================================================\r\n     SHOP \/ MENU HTML\r\n========================================================= -->\r\n<section class=\"cookie-shop\" id=\"cookieShop\">\r\n\r\n\r\n    <!-- =====================================================\r\n         SECTION HEADER \u2014 LEFT TITLE + RIGHT DESC\r\n    ====================================================== -->\r\n    <div class=\"cookie-shop-header\">\r\n\r\n        <div class=\"cookie-shop-header-left\">\r\n\r\n            <div class=\"cookie-shop-badge\">\r\n                <span class=\"cookie-shop-badge-line\"><\/span>\r\n                <span class=\"cookie-shop-badge-text\">Our Menu<\/span>\r\n            <\/div>\r\n\r\n            <h2 class=\"cookie-shop-title\">\r\n                Freshly Baked <span>Cookie<\/span> Collection\r\n            <\/h2>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"cookie-shop-header-right\">\r\n            <p class=\"cookie-shop-desc\">\r\n                Each cookie is handcrafted with premium ingredients and baked fresh daily.\r\n                Choose your favorite flavors below.\r\n            <\/p>\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- =====================================================\r\n         MAIN CONTAINER\r\n    ====================================================== -->\r\n    <div class=\"cookie-shop-container\">\r\n\r\n\r\n        <!-- =================================================\r\n             TABS NAVIGATION \u2014 CENTERED\r\n        ================================================== -->\r\n        <div class=\"cookie-tabs-nav\" role=\"tablist\">\r\n\r\n            <button class=\"cookie-tab-btn active\" data-tab=\"tab1\" role=\"tab\" aria-selected=\"true\" type=\"button\">\r\n                <span class=\"tab-icon\">\ud83c\udf6a<\/span>\r\n                Classic Chip\r\n            <\/button>\r\n\r\n            <button class=\"cookie-tab-btn\" data-tab=\"tab2\" role=\"tab\" aria-selected=\"false\" type=\"button\">\r\n                <span class=\"tab-icon\">\ud83c\udf6b<\/span>\r\n                Double Chocolate\r\n            <\/button>\r\n\r\n            <button class=\"cookie-tab-btn\" data-tab=\"tab3\" role=\"tab\" aria-selected=\"false\" type=\"button\">\r\n                <span class=\"tab-icon\">\ud83e\udd5c<\/span>\r\n                Peanut Butter\r\n            <\/button>\r\n\r\n            <button class=\"cookie-tab-btn\" data-tab=\"tab4\" role=\"tab\" aria-selected=\"false\" type=\"button\">\r\n                <span class=\"tab-icon\">\ud83c\udf3e<\/span>\r\n                Oatmeal Raisin\r\n            <\/button>\r\n\r\n            <button class=\"cookie-tab-btn\" data-tab=\"tab5\" role=\"tab\" aria-selected=\"false\" type=\"button\">\r\n                <span class=\"tab-icon\">\ud83c\udf4b<\/span>\r\n                Lemon Sugar\r\n            <\/button>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- =================================================\r\n             TABS CONTENT\r\n        ================================================== -->\r\n        <div class=\"cookie-tabs-content\">\r\n\r\n\r\n            <!-- =================================================\r\n                 TAB 1 \u2014 CLASSIC CHIP\r\n            ================================================== -->\r\n            <div class=\"cookie-tab-panel active\" id=\"tab1\" role=\"tabpanel\">\r\n                <div class=\"cookie-panel-grid\">\r\n\r\n                    <div class=\"cookie-panel-image\">\r\n                        <img decoding=\"async\" src=\"https:\/\/cookieswp2.mystartupcrew.com\/wp-content\/uploads\/2026\/09\/chocolate-chip-cookies-black-plate-dark-old-wooden-table-1.jpg\" alt=\"Classic Chocolate Chip Cookies\">\r\n                        <span class=\"cookie-image-badge\">Best Seller<\/span>\r\n                    <\/div>\r\n\r\n                    <div class=\"cookie-panel-info\">\r\n                        <div class=\"cookie-panel-label\">Classic Favorite<\/div>\r\n                        <h3 class=\"cookie-panel-name\">Chocolate <span>Chip<\/span><\/h3>\r\n                        <p class=\"cookie-panel-desc\">\r\n                            Our signature cookie with golden-brown edges, a soft chewy center,\r\n                            and generous chunks of semi-sweet chocolate. A timeless classic\r\n                            that never disappoints.\r\n                        <\/p>\r\n\r\n                        <div class=\"cookie-panel-pricing\">\r\n                            <div class=\"cookie-price-item\">\r\n                                <span class=\"cookie-price-label\">Single<\/span>\r\n                                <span class=\"cookie-price-amount\">$3.50<\/span>\r\n                            <\/div>\r\n                            <div class=\"cookie-price-item\">\r\n                                <span class=\"cookie-price-label\">Half Dozen<\/span>\r\n                                <span class=\"cookie-price-amount\">$18.00 <small>($3.00 each)<\/small><\/span>\r\n                            <\/div>\r\n                            <div class=\"cookie-price-item\">\r\n                                <span class=\"cookie-price-label\">Dozen<\/span>\r\n                                <span class=\"cookie-price-amount\">$32.00 <small>($2.67 each)<\/small><\/span>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"cookie-panel-allergens\">\r\n                            <span class=\"cookie-allergen-tag warning\">\r\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg>\r\n                                Contains Wheat\r\n                            <\/span>\r\n                            <span class=\"cookie-allergen-tag warning\">\r\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg>\r\n                                Contains Eggs\r\n                            <\/span>\r\n                            <span class=\"cookie-allergen-tag dairy\">\r\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 20L18 20\"\/><path d=\"M10 20L10 16\"\/><path d=\"M14 20L14 16\"\/><path d=\"M8 16L16 16\"\/><path d=\"M12 8L12 12\"\/><path d=\"M9 4L15 4\"\/><path d=\"M7 8L17 8\"\/><path d=\"M8 10L16 10\"\/><\/svg>\r\n                                Contains Dairy\r\n                            <\/span>\r\n                            <span class=\"cookie-allergen-tag safe\">\r\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg>\r\n                                Vegetarian\r\n                            <\/span>\r\n                        <\/div>\r\n\r\n                        <a href=\"#\" class=\"cookie-order-btn\">\r\n                            <span>Add to Order<\/span>\r\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n                                <path d=\"M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n                                <path d=\"M13 6L19 12L13 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n                            <\/svg>\r\n                        <\/a>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n            <\/div>\r\n\r\n\r\n            <!-- =================================================\r\n                 TAB 2 \u2014 DOUBLE CHOCOLATE\r\n            ================================================== -->\r\n            <div class=\"cookie-tab-panel\" id=\"tab2\" role=\"tabpanel\">\r\n                <div class=\"cookie-panel-grid\">\r\n\r\n                    <div class=\"cookie-panel-image\">\r\n                        <img decoding=\"async\" src=\"https:\/\/cookieswp2.mystartupcrew.com\/wp-content\/uploads\/2026\/09\/mini-cakes-truffles-with-chocolate-drops-cocoa-powder.jpg\" alt=\"Double Chocolate Cookies\">\r\n                        <span class=\"cookie-image-badge\">Rich & Fudgy<\/span>\r\n                    <\/div>\r\n\r\n                    <div class=\"cookie-panel-info\">\r\n                        <div class=\"cookie-panel-label\">Chocolate Lover's<\/div>\r\n                        <h3 class=\"cookie-panel-name\">Double <span>Chocolate<\/span><\/h3>\r\n                        <p class=\"cookie-panel-desc\">\r\n                            Intensely chocolatey with a fudgy brownie-like texture.\r\n                            Loaded with dark chocolate chunks and a hint of espresso                            for that deep, rich flavor.\r\n                        <\/p>\r\n\r\n                        <div class=\"cookie-panel-pricing\">\r\n                            <div class=\"cookie-price-item\">\r\n                                <span class=\"cookie-price-label\">Single<\/span>\r\n                                <span class=\"cookie-price-amount\">$4.00<\/span>\r\n                            <\/div>\r\n                            <div class=\"cookie-price-item\">\r\n                                <span class=\"cookie-price-label\">Half Dozen<\/span>\r\n                                <span class=\"cookie-price-amount\">$21.00 <small>($3.50 each)<\/small><\/span>\r\n                            <\/div>\r\n                            <div class=\"cookie-price-item\">\r\n                                <span class=\"cookie-price-label\">Dozen<\/span>\r\n                                <span class=\"cookie-price-amount\">$38.00 <small>($3.17 each)<\/small><\/span>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"cookie-panel-allergens\">\r\n                            <span class=\"cookie-allergen-tag warning\">\r\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg>\r\n                                Contains Wheat\r\n                            <\/span>\r\n                            <span class=\"cookie-allergen-tag warning\">\r\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg>\r\n                                Contains Eggs\r\n                            <\/span>\r\n                            <span class=\"cookie-allergen-tag dairy\">\r\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 20L18 20\"\/><path d=\"M10 20L10 16\"\/><path d=\"M14 20L14 16\"\/><path d=\"M8 16L16 16\"\/><path d=\"M12 8L12 12\"\/><path d=\"M9 4L15 4\"\/><path d=\"M7 8L17 8\"\/><path d=\"M8 10L16 10\"\/><\/svg>\r\n                                Contains Dairy\r\n                            <\/span>\r\n                            <span class=\"cookie-allergen-tag safe\">\r\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg>\r\n                                Vegetarian\r\n                            <\/span>\r\n                        <\/div>\r\n\r\n                        <a href=\"#\" class=\"cookie-order-btn\">\r\n                            <span>Add to Order<\/span>\r\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n                                <path d=\"M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n                                <path d=\"M13 6L19 12L13 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n                            <\/svg>\r\n                        <\/a>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n            <\/div>\r\n\r\n\r\n            <!-- =================================================\r\n                 TAB 3 \u2014 PEANUT BUTTER\r\n            ================================================== -->\r\n            <div class=\"cookie-tab-panel\" id=\"tab3\" role=\"tabpanel\">\r\n                <div class=\"cookie-panel-grid\">\r\n\r\n                    <div class=\"cookie-panel-image\">\r\n                        <img decoding=\"async\" src=\"https:\/\/cookieswp2.mystartupcrew.com\/wp-content\/uploads\/2026\/09\/fresh-baked-cookies-with-nuts.jpg\" alt=\"Peanut Butter Cookies\">\r\n                        <span class=\"cookie-image-badge\">Nutty & Sweet<\/span>\r\n                    <\/div>\r\n\r\n                    <div class=\"cookie-panel-info\">\r\n                        <div class=\"cookie-panel-label\">Classic Comfort<\/div>\r\n                        <h3 class=\"cookie-panel-name\">Peanut <span>Butter<\/span><\/h3>\r\n                        <p class=\"cookie-panel-desc\">\r\n                            Creamy peanut butter cookie with a soft, melt-in-your-mouth\r\n                            texture. Finished with a cross-hatch pattern and a sprinkle\r\n                            of sea salt for the perfect sweet-salty balance.\r\n                        <\/p>\r\n\r\n                        <div class=\"cookie-panel-pricing\">\r\n                            <div class=\"cookie-price-item\">\r\n                                <span class=\"cookie-price-label\">Single<\/span>\r\n                                <span class=\"cookie-price-amount\">$3.75<\/span>\r\n                            <\/div>\r\n                            <div class=\"cookie-price-item\">\r\n                                <span class=\"cookie-price-label\">Half Dozen<\/span>\r\n                                <span class=\"cookie-price-amount\">$19.50 <small>($3.25 each)<\/small><\/span>\r\n                            <\/div>\r\n                            <div class=\"cookie-price-item\">\r\n                                <span class=\"cookie-price-label\">Dozen<\/span>\r\n                                <span class=\"cookie-price-amount\">$35.00 <small>($2.92 each)<\/small><\/span>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"cookie-panel-allergens\">\r\n                            <span class=\"cookie-allergen-tag warning\">\r\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg>\r\n                                Contains Wheat\r\n                            <\/span>\r\n                            <span class=\"cookie-allergen-tag warning\">\r\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg>\r\n                                Contains Eggs\r\n                            <\/span>\r\n                            <span class=\"cookie-allergen-tag dairy\">\r\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 20L18 20\"\/><path d=\"M10 20L10 16\"\/><path d=\"M14 20L14 16\"\/><path d=\"M8 16L16 16\"\/><path d=\"M12 8L12 12\"\/><path d=\"M9 4L15 4\"\/><path d=\"M7 8L17 8\"\/><path d=\"M8 10L16 10\"\/><\/svg>\r\n                                Contains Dairy\r\n                            <\/span>\r\n                            <span class=\"cookie-allergen-tag nut\">\r\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M9 12L12 15L15 9\"\/><\/svg>\r\n                                Contains Peanuts\r\n                            <\/span>\r\n                            <span class=\"cookie-allergen-tag safe\">\r\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg>\r\n                                Vegetarian\r\n                            <\/span>\r\n                        <\/div>\r\n\r\n                        <a href=\"#\" class=\"cookie-order-btn\">\r\n                            <span>Add to Order<\/span>\r\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n                                <path d=\"M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n                                <path d=\"M13 6L19 12L13 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n                            <\/svg>\r\n                        <\/a>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n            <\/div>\r\n\r\n\r\n            <!-- =================================================\r\n                 TAB 4 \u2014 OATMEAL RAISIN\r\n            ================================================== -->\r\n            <div class=\"cookie-tab-panel\" id=\"tab4\" role=\"tabpanel\">\r\n                <div class=\"cookie-panel-grid\">\r\n\r\n                    <div class=\"cookie-panel-image\">\r\n                        <img decoding=\"async\" src=\"https:\/\/cookieswp2.mystartupcrew.com\/wp-content\/uploads\/2026\/09\/image-2.jpg\" alt=\"Oatmeal Raisin Cookies\">\r\n                        <span class=\"cookie-image-badge\">Wholesome<\/span>\r\n                    <\/div>\r\n\r\n                    <div class=\"cookie-panel-info\">\r\n                        <div class=\"cookie-panel-label\">Classic Comfort<\/div>\r\n                        <h3 class=\"cookie-panel-name\">Oatmeal <span>Raisin<\/span><\/h3>\r\n                        <p class=\"cookie-panel-desc\">\r\n                            Hearty rolled oats, plump golden raisins, and a hint of cinnamon\r\n                            make this the ultimate comfort cookie. Chewy, wholesome, and\r\n                            perfectly spiced.\r\n                        <\/p>\r\n\r\n                        <div class=\"cookie-panel-pricing\">\r\n                            <div class=\"cookie-price-item\">\r\n                                <span class=\"cookie-price-label\">Single<\/span>\r\n                                <span class=\"cookie-price-amount\">$3.50<\/span>\r\n                            <\/div>\r\n                            <div class=\"cookie-price-item\">\r\n                                <span class=\"cookie-price-label\">Half Dozen<\/span>\r\n                                <span class=\"cookie-price-amount\">$18.00 <small>($3.00 each)<\/small><\/span>\r\n                            <\/div>\r\n                            <div class=\"cookie-price-item\">\r\n                                <span class=\"cookie-price-label\">Dozen<\/span>\r\n                                <span class=\"cookie-price-amount\">$32.00 <small>($2.67 each)<\/small><\/span>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"cookie-panel-allergens\">\r\n                            <span class=\"cookie-allergen-tag warning\">\r\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg>\r\n                                Contains Wheat\r\n                            <\/span>\r\n                            <span class=\"cookie-allergen-tag warning\">\r\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg>\r\n                                Contains Eggs\r\n                            <\/span>\r\n                            <span class=\"cookie-allergen-tag dairy\">\r\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 20L18 20\"\/><path d=\"M10 20L10 16\"\/><path d=\"M14 20L14 16\"\/><path d=\"M8 16L16 16\"\/><path d=\"M12 8L12 12\"\/><path d=\"M9 4L15 4\"\/><path d=\"M7 8L17 8\"\/><path d=\"M8 10L16 10\"\/><\/svg>\r\n                                Contains Dairy\r\n                            <\/span>\r\n                            <span class=\"cookie-allergen-tag safe\">\r\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg>\r\n                                Vegetarian\r\n                            <\/span>\r\n                            <span class=\"cookie-allergen-tag safe\">\r\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M8 12L11 15L16 9\"\/><\/svg>\r\n                                Oats\r\n                            <\/span>\r\n                        <\/div>\r\n\r\n                        <a href=\"#\" class=\"cookie-order-btn\">\r\n                            <span>Add to Order<\/span>\r\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n                                <path d=\"M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n                                <path d=\"M13 6L19 12L13 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n                            <\/svg>\r\n                        <\/a>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n            <\/div>\r\n\r\n\r\n            <!-- =================================================\r\n                 TAB 5 \u2014 LEMON SUGAR\r\n            ================================================== -->\r\n            <div class=\"cookie-tab-panel\" id=\"tab5\" role=\"tabpanel\">\r\n                <div class=\"cookie-panel-grid\">\r\n\r\n                    <div class=\"cookie-panel-image\">\r\n                        <img decoding=\"async\" src=\"https:\/\/cookieswp2.mystartupcrew.com\/wp-content\/uploads\/2026\/09\/close-up-photo-stack-homemade-cookies-with-orange-slice-space-surface.jpg\" alt=\"Lemon Sugar Cookies\">\r\n                        <span class=\"cookie-image-badge\">Bright & Zesty<\/span>\r\n                    <\/div>\r\n\r\n                    <div class=\"cookie-panel-info\">\r\n                        <div class=\"cookie-panel-label\">Refreshing Twist<\/div>\r\n                        <h3 class=\"cookie-panel-name\">Lemon <span>Sugar<\/span><\/h3>\r\n                        <p class=\"cookie-panel-desc\">\r\n                            Soft, buttery sugar cookies with bright lemon zest and a tangy\r\n                            lemon glaze. A refreshing treat that's perfect for any season.\r\n                        <\/p>\r\n\r\n                        <div class=\"cookie-panel-pricing\">\r\n                            <div class=\"cookie-price-item\">\r\n                                <span class=\"cookie-price-label\">Single<\/span>\r\n                                <span class=\"cookie-price-amount\">$3.75<\/span>\r\n                            <\/div>\r\n                            <div class=\"cookie-price-item\">\r\n                                <span class=\"cookie-price-label\">Half Dozen<\/span>\r\n                                <span class=\"cookie-price-amount\">$19.50 <small>($3.25 each)<\/small><\/span>\r\n                            <\/div>\r\n                            <div class=\"cookie-price-item\">\r\n                                <span class=\"cookie-price-label\">Dozen<\/span>\r\n                                <span class=\"cookie-price-amount\">$35.00 <small>($2.92 each)<\/small><\/span>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"cookie-panel-allergens\">\r\n                            <span class=\"cookie-allergen-tag warning\">\r\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg>\r\n                                Contains Wheat\r\n                            <\/span>\r\n                            <span class=\"cookie-allergen-tag warning\">\r\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg>\r\n                                Contains Eggs\r\n                            <\/span>\r\n                            <span class=\"cookie-allergen-tag dairy\">\r\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 20L18 20\"\/><path d=\"M10 20L10 16\"\/><path d=\"M14 20L14 16\"\/><path d=\"M8 16L16 16\"\/><path d=\"M12 8L12 12\"\/><path d=\"M9 4L15 4\"\/><path d=\"M7 8L17 8\"\/><path d=\"M8 10L16 10\"\/><\/svg>\r\n                                Contains Dairy\r\n                            <\/span>\r\n                            <span class=\"cookie-allergen-tag safe\">\r\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg>\r\n                                Vegetarian\r\n                            <\/span>\r\n                        <\/div>\r\n\r\n                        <a href=\"#\" class=\"cookie-order-btn\">\r\n                            <span>Add to Order<\/span>\r\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n                                <path d=\"M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n                                <path d=\"M13 6L19 12L13 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n                            <\/svg>\r\n                        <\/a>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n            <\/div>\r\n\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- =====================================================\r\n             PICKUP LOCATION \u2014 LEFT HEADER + RIGHT OPTIONS\r\n        ====================================================== -->\r\n        <div class=\"cookie-pickup-section\">\r\n\r\n            <div class=\"cookie-pickup-inner\">\r\n\r\n                <!-- LEFT: Header -->\r\n                <div class=\"cookie-pickup-header\">\r\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n                        <path d=\"M12 21C12 21 20 16 20 10C20 5.58 16.42 2 12 2C7.58 2 4 5.58 4 10C4 16 12 21 12 21Z\" stroke=\"currentColor\" stroke-width=\"1.8\"\/>\r\n                        <circle cx=\"12\" cy=\"10\" r=\"3\" stroke=\"currentColor\" stroke-width=\"1.8\"\/>\r\n                    <\/svg>\r\n                    <div>\r\n                        <h4>Select Pickup Location<\/h4>\r\n                        <span>Choose your preferred market date for pickup<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- RIGHT: Options -->\r\n                <div class=\"cookie-pickup-options\">\r\n                    <button class=\"cookie-pickup-option active\" data-pickup=\"sat\" type=\"button\">\r\n                        Saturday Market\r\n                        <span class=\"pickup-date\">9:00 AM \u2013 2:00 PM<\/span>\r\n                    <\/button>\r\n                    <button class=\"cookie-pickup-option\" data-pickup=\"sun\" type=\"button\">\r\n                        Sunday Market\r\n                        <span class=\"pickup-date\">10:00 AM \u2013 3:00 PM<\/span>\r\n                    <\/button>\r\n                    <button class=\"cookie-pickup-option\" data-pickup=\"wed\" type=\"button\">\r\n                        Wednesday Market\r\n                        <span class=\"pickup-date\">8:00 AM \u2013 1:00 PM<\/span>\r\n                    <\/button>\r\n                    <button class=\"cookie-pickup-option\" data-pickup=\"fri\" type=\"button\">\r\n                        Friday Market\r\n                        <span class=\"pickup-date\">10:00 AM \u2013 2:00 PM<\/span>\r\n                    <\/button>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- =========================================================\r\n     JAVASCRIPT \u2014 TABS + PICKUP\r\n========================================================= -->\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n\r\n    const shop = document.getElementById('cookieShop');\r\n    if (!shop) return;\r\n\r\n\r\n    \/* =====================================================\r\n       ACTIVATE ON SCROLL\r\n    ====================================================== *\/\r\n    const activateShop = function () {\r\n        shop.classList.add('active');\r\n    };\r\n\r\n    if ('IntersectionObserver' in window) {\r\n        const observer = new IntersectionObserver(\r\n            function (entries) {\r\n                entries.forEach(function (entry) {\r\n                    if (entry.isIntersecting) {\r\n                        activateShop();\r\n                        observer.unobserve(shop);\r\n                    }\r\n                });\r\n            },\r\n            { threshold: 0.12 }\r\n        );\r\n        observer.observe(shop);\r\n    } else {\r\n        activateShop();\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       TABS\r\n    ====================================================== *\/\r\n    const tabs = shop.querySelectorAll('.cookie-tab-btn');\r\n    const panels = shop.querySelectorAll('.cookie-tab-panel');\r\n\r\n    tabs.forEach(function (tab) {\r\n        tab.addEventListener('click', function () {\r\n            const targetId = this.getAttribute('data-tab');\r\n\r\n            tabs.forEach(function (item) {\r\n                item.classList.remove('active');\r\n                item.setAttribute('aria-selected', 'false');\r\n            });\r\n\r\n            panels.forEach(function (panel) {\r\n                panel.classList.remove('active');\r\n            });\r\n\r\n            this.classList.add('active');\r\n            this.setAttribute('aria-selected', 'true');\r\n\r\n            const targetPanel = shop.querySelector('#' + targetId);\r\n            if (targetPanel) {\r\n                targetPanel.classList.add('active');\r\n            }\r\n        });\r\n    });\r\n\r\n\r\n    \/* =====================================================\r\n       PICKUP LOCATION\r\n    ====================================================== *\/\r\n    const pickupOptions = shop.querySelectorAll('.cookie-pickup-option');\r\n\r\n    pickupOptions.forEach(function (option) {\r\n        option.addEventListener('click', function () {\r\n            pickupOptions.forEach(function (item) {\r\n                item.classList.remove('active');\r\n            });\r\n            this.classList.add('active');\r\n        });\r\n    });\r\n\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4311cd7 e-con-full e-flex e-con e-parent\" data-id=\"4311cd7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3ea63bd elementor-widget elementor-widget-html\" data-id=\"3ea63bd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* =========================================================\r\n   BROOKLYN COOKIES\r\n   PREMIUM FAQ \u2014 WARM EDITORIAL DESIGN\r\n   Elementor HTML Widget\r\n   BACKGROUND UPDATED TO #F4EEE5 (Matches How To Order)\r\n========================================================= *\/\r\n\r\n.bkc-faq-v2 {\r\n    --bg: #F4EEE5;\r\n    --bg-deep: #F4EEE5;\r\n    --paper: #fffaf4;\r\n    --paper-hover: #fffdf9;\r\n    --dark: #24150f;\r\n    --brown: #68402c;\r\n    --brown-dark: #4d2d1e;\r\n    --caramel: #b87945;\r\n    --caramel-light: #d5a477;\r\n    --muted: #75645a;\r\n    --line: rgba(72, 44, 29, .14);\r\n\r\n    position: relative;\r\n    width: 100%;\r\n\r\n    padding: 80px 0 80px;\r\n\r\n    \/* =====================================================\r\n       BACKGROUND: #F4EEE5 (Matches How To Order)\r\n    ===================================================== *\/\r\n    background: #F4EEE5;\r\n\r\n    overflow: hidden;\r\n    isolation: isolate;\r\n\r\n    font-family: \"DM Sans\", sans-serif;\r\n}\r\n\r\n.bkc-faq-v2 *,\r\n.bkc-faq-v2 *::before,\r\n.bkc-faq-v2 *::after {\r\n    box-sizing: border-box;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BACKGROUND DECORATION\r\n========================================================= *\/\r\n\r\n.bkc-faq-v2::before {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    width: 520px;\r\n    height: 520px;\r\n\r\n    left: -360px;\r\n    top: 110px;\r\n\r\n    border-radius: 50%;\r\n\r\n    border: 1px solid rgba(184,121,69,.10);\r\n\r\n    box-shadow:\r\n        0 0 0 45px rgba(184,121,69,.025),\r\n        0 0 0 90px rgba(184,121,69,.018);\r\n\r\n    pointer-events: none;\r\n    z-index: -1;\r\n}\r\n\r\n.bkc-faq-v2::after {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    width: 620px;\r\n    height: 620px;\r\n\r\n    right: -400px;\r\n    bottom: -380px;\r\n\r\n    border: 1px solid rgba(184,121,69,.22);\r\n\r\n    border-radius: 50%;\r\n\r\n    box-shadow:\r\n        0 0 0 55px rgba(184,121,69,.035),\r\n        0 0 0 110px rgba(184,121,69,.025),\r\n        0 0 0 165px rgba(184,121,69,.018);\r\n\r\n    pointer-events: none;\r\n    z-index: -1;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CONTAINER\r\n========================================================= *\/\r\n\r\n.bkc-faq-v2-container {\r\n    width: min(1320px, calc(100% - 80px));\r\n    margin: 0 auto;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADER\r\n========================================================= *\/\r\n\r\n.bkc-faq-v2-header {\r\n    display: flex;\r\n    align-items: flex-end;\r\n    justify-content: space-between;\r\n\r\n    gap: 55px;\r\n\r\n    margin-bottom: 58px;\r\n\r\n    opacity: 0;\r\n    transform: translateY(30px);\r\n}\r\n\r\n.bkc-faq-v2.is-visible .bkc-faq-v2-header {\r\n    animation:\r\n        bkcFaqReveal\r\n        .9s\r\n        cubic-bezier(.16,1,.3,1)\r\n        forwards;\r\n}\r\n\r\n.bkc-faq-v2-eyebrow {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n\r\n    margin-bottom: 18px;\r\n}\r\n\r\n.bkc-faq-v2-eyebrow-line {\r\n    width: 45px;\r\n    height: 1px;\r\n\r\n    background: var(--caramel);\r\n}\r\n\r\n.bkc-faq-v2-eyebrow span:last-child {\r\n    font-size: 10px;\r\n    font-weight: 800;\r\n    letter-spacing: 3px;\r\n    text-transform: uppercase;\r\n\r\n    color: var(--brown);\r\n}\r\n\r\n.bkc-faq-v2-title {\r\n    margin: 0;\r\n\r\n    max-width: 760px;\r\n\r\n    color: var(--dark);\r\n\r\n    font-family: \"Playfair Display\", serif;\r\n\r\n    font-size: clamp(48px, 6vw, 82px);\r\n    line-height: .94;\r\n\r\n    letter-spacing: -3.5px;\r\n    font-weight: 600;\r\n}\r\n\r\n.bkc-faq-v2-title em {\r\n    color: var(--caramel);\r\n\r\n    font-weight: 500;\r\n}\r\n\r\n.bkc-faq-v2-description {\r\n    max-width: 350px;\r\n\r\n    margin: 0 0 5px;\r\n\r\n    color: var(--muted);\r\n\r\n    font-size: 13px;\r\n    line-height: 1.9;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MAIN GRID\r\n========================================================= *\/\r\n\r\n.bkc-faq-v2-grid {\r\n    display: grid;\r\n\r\n    grid-template-columns: 355px minmax(0, 1fr);\r\n\r\n    gap: 45px;\r\n\r\n    align-items: stretch;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LEFT FEATURE CARD\r\n========================================================= *\/\r\n\r\n.bkc-faq-v2-feature {\r\n    position: relative;\r\n\r\n    height: 100%;\r\n    min-height: 100%;\r\n\r\n    padding: 38px 35px 32px;\r\n\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: space-between;\r\n\r\n    background:\r\n        linear-gradient(\r\n            145deg,\r\n            #321d13 0%,\r\n            #24150f 58%,\r\n            #1c100b 100%\r\n        );\r\n\r\n    overflow: hidden;\r\n\r\n    border: 1px solid rgba(255,255,255,.07);\r\n\r\n    box-shadow:\r\n        0 28px 70px rgba(36,21,15,.16);\r\n\r\n    opacity: 0;\r\n    transform: translateX(-35px);\r\n}\r\n\r\n.bkc-faq-v2.is-visible .bkc-faq-v2-feature {\r\n    animation:\r\n        bkcFaqFeatureReveal\r\n        1s\r\n        cubic-bezier(.16,1,.3,1)\r\n        .15s\r\n        forwards;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FEATURE DECORATION\r\n========================================================= *\/\r\n\r\n.bkc-faq-v2-feature::before {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    width: 330px;\r\n    height: 330px;\r\n\r\n    right: -180px;\r\n    top: -165px;\r\n\r\n    border-radius: 50%;\r\n\r\n    border: 1px solid rgba(255,255,255,.12);\r\n\r\n    box-shadow:\r\n        0 0 0 35px rgba(255,255,255,.025),\r\n        0 0 0 70px rgba(255,255,255,.018),\r\n        0 0 0 105px rgba(255,255,255,.012);\r\n}\r\n\r\n.bkc-faq-v2-feature::after {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    width: 100px;\r\n    height: 100px;\r\n\r\n    left: -55px;\r\n    bottom: -55px;\r\n\r\n    border-radius: 50%;\r\n\r\n    border: 1px solid rgba(213,164,119,.22);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FEATURE TOP\r\n========================================================= *\/\r\n\r\n.bkc-faq-v2-feature-top {\r\n    position: relative;\r\n    z-index: 2;\r\n}\r\n\r\n.bkc-faq-v2-feature-label {\r\n    display: inline-flex;\r\n\r\n    padding: 8px 13px;\r\n\r\n    border: 1px solid rgba(255,255,255,.16);\r\n\r\n    color: #eaded3;\r\n\r\n    font-size: 8px;\r\n    font-weight: 800;\r\n\r\n    letter-spacing: 2px;\r\n\r\n    text-transform: uppercase;\r\n\r\n    background: rgba(255,255,255,.025);\r\n}\r\n\r\n.bkc-faq-v2-feature-heading {\r\n    margin: 58px 0 20px;\r\n\r\n    color: #fff;\r\n\r\n    font-family: \"Playfair Display\", serif;\r\n\r\n    font-size: 42px;\r\n    line-height: 1.08;\r\n\r\n    letter-spacing: -.8px;\r\n\r\n    font-weight: 500;\r\n}\r\n\r\n.bkc-faq-v2-feature-heading em {\r\n    color: var(--caramel-light);\r\n\r\n    font-style: italic;\r\n}\r\n\r\n.bkc-faq-v2-feature-copy {\r\n    max-width: 285px;\r\n\r\n    color: rgba(255,255,255,.67);\r\n\r\n    font-size: 13px;\r\n    line-height: 1.95;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   EXTRA LEFT CONTENT\r\n========================================================= *\/\r\n\r\n.bkc-faq-v2-feature-points {\r\n    position: relative;\r\n    z-index: 2;\r\n\r\n    display: flex;\r\n    flex-direction: column;\r\n\r\n    gap: 13px;\r\n\r\n    margin-top: 30px;\r\n}\r\n\r\n.bkc-faq-v2-feature-point {\r\n    display: flex;\r\n    align-items: flex-start;\r\n\r\n    gap: 11px;\r\n\r\n    color: rgba(255,255,255,.58);\r\n\r\n    font-size: 11px;\r\n    line-height: 1.7;\r\n}\r\n\r\n.bkc-faq-v2-feature-point-mark {\r\n    width: 5px;\r\n    height: 5px;\r\n\r\n    flex-shrink: 0;\r\n\r\n    margin-top: 7px;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: var(--caramel-light);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FEATURE BOTTOM\r\n========================================================= *\/\r\n\r\n.bkc-faq-v2-feature-bottom {\r\n    position: relative;\r\n    z-index: 2;\r\n\r\n    margin-top: 45px;\r\n}\r\n\r\n.bkc-faq-v2-feature-rule {\r\n    width: 100%;\r\n    height: 1px;\r\n\r\n    margin-bottom: 22px;\r\n\r\n    background: rgba(255,255,255,.13);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SIMPLE FEATURE FOOTER\r\n========================================================= *\/\r\n\r\n.bkc-faq-v2-feature-note {\r\n    color: rgba(255,255,255,.47);\r\n\r\n    font-size: 10px;\r\n    line-height: 1.8;\r\n\r\n    letter-spacing: .3px;\r\n}\r\n\r\n.bkc-faq-v2-feature-note strong {\r\n    display: block;\r\n\r\n    margin-bottom: 4px;\r\n\r\n    color: #fff;\r\n\r\n    font-family: \"Playfair Display\", serif;\r\n\r\n    font-size: 16px;\r\n    font-weight: 500;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FAQ LIST\r\n========================================================= *\/\r\n\r\n.bkc-faq-v2-list {\r\n    display: flex;\r\n    flex-direction: column;\r\n\r\n    gap: 12px;\r\n\r\n    height: 100%;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FAQ CARD\r\n========================================================= *\/\r\n\r\n.bkc-faq-v2-item {\r\n    position: relative;\r\n\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            rgba(255,253,249,.94),\r\n            rgba(255,248,239,.92)\r\n        );\r\n\r\n    border: 1px solid var(--line);\r\n\r\n    box-shadow:\r\n        0 10px 30px rgba(36,21,15,.035);\r\n\r\n    overflow: hidden;\r\n\r\n    opacity: 0;\r\n    transform: translateY(28px);\r\n\r\n    transition:\r\n        transform .45s cubic-bezier(.16,1,.3,1),\r\n        box-shadow .45s ease,\r\n        border-color .4s ease,\r\n        background .4s ease;\r\n}\r\n\r\n.bkc-faq-v2.is-visible .bkc-faq-v2-item:nth-child(1) {\r\n    animation: bkcFaqItem .7s ease .25s forwards;\r\n}\r\n\r\n.bkc-faq-v2.is-visible .bkc-faq-v2-item:nth-child(2) {\r\n    animation: bkcFaqItem .7s ease .33s forwards;\r\n}\r\n\r\n.bkc-faq-v2.is-visible .bkc-faq-v2-item:nth-child(3) {\r\n    animation: bkcFaqItem .7s ease .41s forwards;\r\n}\r\n\r\n.bkc-faq-v2.is-visible .bkc-faq-v2-item:nth-child(4) {\r\n    animation: bkcFaqItem .7s ease .49s forwards;\r\n}\r\n\r\n.bkc-faq-v2.is-visible .bkc-faq-v2-item:nth-child(5) {\r\n    animation: bkcFaqItem .7s ease .57s forwards;\r\n}\r\n\r\n.bkc-faq-v2.is-visible .bkc-faq-v2-item:nth-child(6) {\r\n    animation: bkcFaqItem .7s ease .65s forwards;\r\n}\r\n\r\n.bkc-faq-v2-item:hover {\r\n    transform: translateY(-3px);\r\n\r\n    border-color: rgba(184,121,69,.30);\r\n\r\n    background: var(--paper-hover);\r\n\r\n    box-shadow:\r\n        0 18px 42px rgba(36,21,15,.075);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ACTIVE SIDE BAR\r\n========================================================= *\/\r\n\r\n.bkc-faq-v2-item::before {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    left: 0;\r\n    top: 0;\r\n    bottom: 0;\r\n\r\n    width: 4px;\r\n\r\n    background: var(--caramel);\r\n\r\n    transform: scaleY(0);\r\n    transform-origin: bottom;\r\n\r\n    transition:\r\n        transform .45s cubic-bezier(.16,1,.3,1);\r\n}\r\n\r\n.bkc-faq-v2-item.active::before {\r\n    transform: scaleY(1);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   QUESTION\r\n========================================================= *\/\r\n\r\n.bkc-faq-v2-question {\r\n    width: 100%;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n\r\n    gap: 25px;\r\n\r\n    padding: 26px 28px;\r\n\r\n    border: 0;\r\n    outline: 0;\r\n\r\n    background: transparent;\r\n\r\n    color: var(--dark);\r\n\r\n    text-align: left;\r\n\r\n    cursor: pointer;\r\n\r\n    font-family: \"DM Sans\", sans-serif;\r\n\r\n    -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.bkc-faq-v2-question:focus,\r\n.bkc-faq-v2-question:hover,\r\n.bkc-faq-v2-question:active {\r\n    outline: none !important;\r\n    box-shadow: none !important;\r\n    background: transparent !important;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   QUESTION LEFT\r\n========================================================= *\/\r\n\r\n.bkc-faq-v2-question-left {\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    gap: 20px;\r\n\r\n    min-width: 0;\r\n}\r\n\r\n.bkc-faq-v2-number {\r\n    min-width: 32px;\r\n\r\n    color: var(--caramel);\r\n\r\n    font-family: \"Playfair Display\", serif;\r\n\r\n    font-size: 13px;\r\n    font-weight: 600;\r\n\r\n    transition:\r\n        color .35s ease,\r\n        transform .35s ease;\r\n}\r\n\r\n.bkc-faq-v2-item:hover .bkc-faq-v2-number,\r\n.bkc-faq-v2-item.active .bkc-faq-v2-number {\r\n    color: var(--brown);\r\n    transform: translateX(3px);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   QUESTION TEXT\r\n========================================================= *\/\r\n\r\n.bkc-faq-v2-question-text {\r\n    color: var(--dark);\r\n\r\n    font-family: \"Playfair Display\", serif;\r\n\r\n    font-size: clamp(18px, 1.45vw, 22px);\r\n    line-height: 1.32;\r\n\r\n    font-weight: 600;\r\n\r\n    transition:\r\n        color .35s ease;\r\n}\r\n\r\n.bkc-faq-v2-item:hover .bkc-faq-v2-question-text,\r\n.bkc-faq-v2-item.active .bkc-faq-v2-question-text {\r\n    color: var(--brown);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TOGGLE\r\n========================================================= *\/\r\n\r\n.bkc-faq-v2-toggle {\r\n    position: relative;\r\n\r\n    width: 42px;\r\n    height: 42px;\r\n\r\n    flex-shrink: 0;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    border: 1px solid rgba(104,64,44,.20);\r\n\r\n    border-radius: 50%;\r\n\r\n    color: var(--brown);\r\n\r\n    transition:\r\n        background .4s ease,\r\n        border-color .4s ease,\r\n        color .4s ease,\r\n        transform .45s cubic-bezier(.16,1,.3,1);\r\n}\r\n\r\n.bkc-faq-v2-toggle::before,\r\n.bkc-faq-v2-toggle::after {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    width: 12px;\r\n    height: 1.5px;\r\n\r\n    background: currentColor;\r\n\r\n    transition:\r\n        transform .4s cubic-bezier(.16,1,.3,1);\r\n}\r\n\r\n.bkc-faq-v2-toggle::after {\r\n    transform: rotate(90deg);\r\n}\r\n\r\n.bkc-faq-v2-item:hover .bkc-faq-v2-toggle {\r\n    background: var(--brown);\r\n    border-color: var(--brown);\r\n    color: #fff;\r\n\r\n    transform: rotate(90deg);\r\n}\r\n\r\n.bkc-faq-v2-item.active .bkc-faq-v2-toggle {\r\n    background: var(--caramel);\r\n    border-color: var(--caramel);\r\n    color: #fff;\r\n\r\n    transform: rotate(180deg);\r\n}\r\n\r\n.bkc-faq-v2-item.active .bkc-faq-v2-toggle::after {\r\n    transform: rotate(0deg);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ANSWER\r\n========================================================= *\/\r\n\r\n.bkc-faq-v2-answer {\r\n    display: grid;\r\n\r\n    grid-template-rows: 0fr;\r\n\r\n    transition:\r\n        grid-template-rows .5s cubic-bezier(.16,1,.3,1);\r\n}\r\n\r\n.bkc-faq-v2-answer-inner {\r\n    min-height: 0;\r\n\r\n    overflow: hidden;\r\n\r\n    padding:\r\n        0\r\n        88px\r\n        0\r\n        75px;\r\n\r\n    color: var(--muted);\r\n\r\n    font-size: 13px;\r\n    line-height: 1.95;\r\n\r\n    transition:\r\n        padding .5s cubic-bezier(.16,1,.3,1);\r\n}\r\n\r\n.bkc-faq-v2-item.active .bkc-faq-v2-answer {\r\n    grid-template-rows: 1fr;\r\n}\r\n\r\n.bkc-faq-v2-item.active .bkc-faq-v2-answer-inner {\r\n    padding-bottom: 30px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ANSWER TIP\r\n========================================================= *\/\r\n\r\n.bkc-faq-v2-tip {\r\n    display: flex;\r\n    align-items: flex-start;\r\n\r\n    gap: 12px;\r\n\r\n    margin-top: 18px;\r\n\r\n    padding: 15px 17px;\r\n\r\n    background: #f4e9dc;\r\n\r\n    border-left: 2px solid var(--caramel);\r\n}\r\n\r\n.bkc-faq-v2-tip-icon {\r\n    flex-shrink: 0;\r\n\r\n    color: var(--caramel);\r\n\r\n    margin-top: 2px;\r\n}\r\n\r\n.bkc-faq-v2-tip-icon svg {\r\n    width: 17px;\r\n    height: 17px;\r\n}\r\n\r\n.bkc-faq-v2-tip-content strong {\r\n    display: block;\r\n\r\n    margin-bottom: 2px;\r\n\r\n    color: var(--dark);\r\n\r\n    font-family: \"Playfair Display\", serif;\r\n\r\n    font-size: 13px;\r\n    font-weight: 600;\r\n}\r\n\r\n.bkc-faq-v2-tip-content span {\r\n    display: block;\r\n\r\n    color: var(--muted);\r\n\r\n    font-size: 11px;\r\n    line-height: 1.7;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SMALL LABEL\r\n========================================================= *\/\r\n\r\n.bkc-faq-v2-label {\r\n    display: inline-flex;\r\n\r\n    margin-top: 15px;\r\n\r\n    padding: 6px 10px;\r\n\r\n    background: #f2e5d7;\r\n\r\n    color: var(--brown);\r\n\r\n    border: 1px solid rgba(184,121,69,.15);\r\n\r\n    font-size: 8px;\r\n    font-weight: 800;\r\n\r\n    letter-spacing: 1.4px;\r\n\r\n    text-transform: uppercase;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BOTTOM NOTE\r\n========================================================= *\/\r\n\r\n.bkc-faq-v2-bottom {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    gap: 14px;\r\n\r\n    margin-top: 48px;\r\n\r\n    color: rgba(36,21,15,.48);\r\n\r\n    font-size: 8px;\r\n    font-weight: 800;\r\n\r\n    letter-spacing: 2.5px;\r\n\r\n    text-transform: uppercase;\r\n\r\n    opacity: 0;\r\n}\r\n\r\n.bkc-faq-v2.is-visible .bkc-faq-v2-bottom {\r\n    animation:\r\n        bkcFaqReveal\r\n        .8s\r\n        ease\r\n        1s\r\n        forwards;\r\n}\r\n\r\n.bkc-faq-v2-bottom-line {\r\n    width: 42px;\r\n    height: 1px;\r\n\r\n    background: rgba(184,121,69,.45);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ANIMATIONS\r\n========================================================= *\/\r\n\r\n@keyframes bkcFaqReveal {\r\n\r\n    from {\r\n        opacity: 0;\r\n        transform: translateY(30px);\r\n    }\r\n\r\n    to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n}\r\n\r\n@keyframes bkcFaqFeatureReveal {\r\n\r\n    from {\r\n        opacity: 0;\r\n        transform: translateX(-35px);\r\n    }\r\n\r\n    to {\r\n        opacity: 1;\r\n        transform: translateX(0);\r\n    }\r\n}\r\n\r\n@keyframes bkcFaqItem {\r\n\r\n    from {\r\n        opacity: 0;\r\n        transform: translateY(28px);\r\n    }\r\n\r\n    to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media (max-width: 1000px) {\r\n\r\n    .bkc-faq-v2 {\r\n        padding: 90px 0 100px;\r\n    }\r\n\r\n    .bkc-faq-v2-container {\r\n        width: min(100% - 50px, 900px);\r\n    }\r\n\r\n    .bkc-faq-v2-header {\r\n        display: block;\r\n        margin-bottom: 48px;\r\n    }\r\n\r\n    .bkc-faq-v2-description {\r\n        margin-top: 22px;\r\n        max-width: 620px;\r\n    }\r\n\r\n    .bkc-faq-v2-grid {\r\n        grid-template-columns: 280px minmax(0, 1fr);\r\n        gap: 28px;\r\n    }\r\n\r\n    .bkc-faq-v2-feature {\r\n        padding: 30px 27px;\r\n    }\r\n\r\n    .bkc-faq-v2-feature-heading {\r\n        font-size: 34px;\r\n        margin-top: 45px;\r\n    }\r\n\r\n    .bkc-faq-v2-feature-copy {\r\n        font-size: 12px;\r\n    }\r\n\r\n    .bkc-faq-v2-feature-point {\r\n        font-size: 10px;\r\n    }\r\n\r\n    .bkc-faq-v2-question {\r\n        padding: 23px 22px;\r\n    }\r\n\r\n    .bkc-faq-v2-answer-inner {\r\n        padding-left: 70px;\r\n        padding-right: 30px;\r\n    }\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 760px) {\r\n\r\n    .bkc-faq-v2 {\r\n        padding: 72px 0 80px;\r\n    }\r\n\r\n    .bkc-faq-v2-container {\r\n        width: calc(100% - 30px);\r\n    }\r\n\r\n    .bkc-faq-v2::before {\r\n        width: 300px;\r\n        height: 300px;\r\n\r\n        top: 50px;\r\n        left: -240px;\r\n    }\r\n\r\n    .bkc-faq-v2-header {\r\n        margin-bottom: 38px;\r\n    }\r\n\r\n    .bkc-faq-v2-eyebrow {\r\n        margin-bottom: 15px;\r\n    }\r\n\r\n    .bkc-faq-v2-eyebrow-line {\r\n        width: 30px;\r\n    }\r\n\r\n    .bkc-faq-v2-eyebrow span:last-child {\r\n        font-size: 8px;\r\n        letter-spacing: 2px;\r\n    }\r\n\r\n    .bkc-faq-v2-title {\r\n        font-size: clamp(43px, 12vw, 62px);\r\n        line-height: .96;\r\n        letter-spacing: -2.5px;\r\n    }\r\n\r\n    .bkc-faq-v2-description {\r\n        margin-top: 20px;\r\n\r\n        font-size: 12px;\r\n        line-height: 1.8;\r\n    }\r\n\r\n    .bkc-faq-v2-grid {\r\n        display: block;\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       LEFT CARD\r\n    ===================================================== *\/\r\n\r\n    .bkc-faq-v2-feature {\r\n        height: auto;\r\n        min-height: 0;\r\n\r\n        margin-bottom: 28px;\r\n\r\n        padding: 30px 27px;\r\n    }\r\n\r\n    .bkc-faq-v2-feature-heading {\r\n        margin-top: 38px;\r\n        margin-bottom: 15px;\r\n\r\n        font-size: 34px;\r\n        line-height: 1.08;\r\n    }\r\n\r\n    .bkc-faq-v2-feature-copy {\r\n        max-width: 520px;\r\n\r\n        font-size: 12px;\r\n        line-height: 1.85;\r\n    }\r\n\r\n    .bkc-faq-v2-feature-points {\r\n        margin-top: 25px;\r\n        gap: 10px;\r\n    }\r\n\r\n    .bkc-faq-v2-feature-point {\r\n        font-size: 10px;\r\n    }\r\n\r\n    .bkc-faq-v2-feature-bottom {\r\n        margin-top: 35px;\r\n    }\r\n\r\n    .bkc-faq-v2-feature-note strong {\r\n        font-size: 15px;\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       FAQ\r\n    ===================================================== *\/\r\n\r\n    .bkc-faq-v2-list {\r\n        gap: 10px;\r\n    }\r\n\r\n    .bkc-faq-v2-question {\r\n        padding: 20px 16px;\r\n        gap: 12px;\r\n    }\r\n\r\n    .bkc-faq-v2-question-left {\r\n        gap: 10px;\r\n    }\r\n\r\n    .bkc-faq-v2-number {\r\n        min-width: 24px;\r\n        font-size: 10px;\r\n    }\r\n\r\n    .bkc-faq-v2-question-text {\r\n        font-size: 16px;\r\n        line-height: 1.35;\r\n    }\r\n\r\n    .bkc-faq-v2-toggle {\r\n        width: 33px;\r\n        height: 33px;\r\n    }\r\n\r\n    .bkc-faq-v2-toggle::before,\r\n    .bkc-faq-v2-toggle::after {\r\n        width: 9px;\r\n    }\r\n\r\n    .bkc-faq-v2-answer-inner {\r\n        padding:\r\n            0\r\n            17px\r\n            0\r\n            17px;\r\n\r\n        font-size: 11px;\r\n        line-height: 1.8;\r\n    }\r\n\r\n    .bkc-faq-v2-item.active .bkc-faq-v2-answer-inner {\r\n        padding-bottom: 22px;\r\n    }\r\n\r\n    .bkc-faq-v2-tip {\r\n        padding: 12px;\r\n    }\r\n\r\n    .bkc-faq-v2-tip-content strong {\r\n        font-size: 12px;\r\n    }\r\n\r\n    .bkc-faq-v2-tip-content span {\r\n        font-size: 9.5px;\r\n    }\r\n\r\n    .bkc-faq-v2-label {\r\n        font-size: 7px;\r\n    }\r\n\r\n    .bkc-faq-v2-bottom {\r\n        margin-top: 35px;\r\n\r\n        font-size: 6px;\r\n        letter-spacing: 1.3px;\r\n    }\r\n\r\n    .bkc-faq-v2-bottom-line {\r\n        width: 25px;\r\n    }\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   VERY SMALL\r\n========================================================= *\/\r\n\r\n@media (max-width: 380px) {\r\n\r\n    .bkc-faq-v2-container {\r\n        width: calc(100% - 22px);\r\n    }\r\n\r\n    .bkc-faq-v2-title {\r\n        font-size: 40px;\r\n    }\r\n\r\n    .bkc-faq-v2-feature {\r\n        padding: 27px 22px;\r\n    }\r\n\r\n    .bkc-faq-v2-feature-heading {\r\n        font-size: 31px;\r\n    }\r\n\r\n    .bkc-faq-v2-question {\r\n        padding: 18px 13px;\r\n    }\r\n\r\n    .bkc-faq-v2-question-text {\r\n        font-size: 14px;\r\n    }\r\n\r\n    .bkc-faq-v2-toggle {\r\n        width: 29px;\r\n        height: 29px;\r\n    }\r\n\r\n    .bkc-faq-v2-answer-inner {\r\n        padding-left: 13px;\r\n        padding-right: 13px;\r\n    }\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REDUCED MOTION\r\n========================================================= *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n    .bkc-faq-v2 *,\r\n    .bkc-faq-v2 {\r\n        animation: none !important;\r\n        transition: none !important;\r\n    }\r\n\r\n    .bkc-faq-v2-header,\r\n    .bkc-faq-v2-feature,\r\n    .bkc-faq-v2-item,\r\n    .bkc-faq-v2-bottom {\r\n        opacity: 1 !important;\r\n        transform: none !important;\r\n    }\r\n}\r\n<\/style>\r\n\r\n\r\n<section class=\"bkc-faq-v2\" id=\"bkcFaqV2\">\r\n\r\n    <div class=\"bkc-faq-v2-container\">\r\n\r\n\r\n        <!-- =================================================\r\n             HEADER\r\n        ================================================== -->\r\n\r\n        <div class=\"bkc-faq-v2-header\">\r\n\r\n            <div>\r\n\r\n                <div class=\"bkc-faq-v2-eyebrow\">\r\n\r\n                    <span class=\"bkc-faq-v2-eyebrow-line\"><\/span>\r\n\r\n                    <span>FAQ & Care Guide<\/span>\r\n\r\n                <\/div>\r\n\r\n                <h2 class=\"bkc-faq-v2-title\">\r\n                    Good cookies deserve\r\n                    <em>good care.<\/em>\r\n                <\/h2>\r\n\r\n            <\/div>\r\n\r\n            <p class=\"bkc-faq-v2-description\">\r\n                From keeping your cookies fresh to bringing\r\n                back that warm, gooey texture, here's everything\r\n                you need to know after your order.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- =================================================\r\n             MAIN GRID\r\n        ================================================== -->\r\n\r\n        <div class=\"bkc-faq-v2-grid\">\r\n\r\n\r\n            <!-- =================================================\r\n                 LEFT FEATURE\r\n            ================================================== -->\r\n\r\n            <aside class=\"bkc-faq-v2-feature\">\r\n\r\n                <div class=\"bkc-faq-v2-feature-top\">\r\n\r\n                    <span class=\"bkc-faq-v2-feature-label\">\r\n                        Cookie Care\r\n                    <\/span>\r\n\r\n                    <h3 class=\"bkc-faq-v2-feature-heading\">\r\n                        Keep them\r\n                        <em>soft.<\/em><br>\r\n                        Keep them<br>\r\n                        delicious.\r\n                    <\/h3>\r\n\r\n                    <p class=\"bkc-faq-v2-feature-copy\">\r\n                        A little care goes a long way.\r\n                        Store your cookies properly and\r\n                        warm them gently whenever you\r\n                        want that fresh-from-the-oven feel.\r\n                    <\/p>\r\n\r\n\r\n                    <!-- EXTRA CONTENT TO FILL LEFT SPACE -->\r\n\r\n                    <div class=\"bkc-faq-v2-feature-points\">\r\n\r\n                        <div class=\"bkc-faq-v2-feature-point\">\r\n\r\n                            <span class=\"bkc-faq-v2-feature-point-mark\"><\/span>\r\n\r\n                            <span>\r\n                                Keep cookies sealed when not\r\n                                being enjoyed to help preserve\r\n                                their soft texture.\r\n                            <\/span>\r\n\r\n                        <\/div>\r\n\r\n                        <div class=\"bkc-faq-v2-feature-point\">\r\n\r\n                            <span class=\"bkc-faq-v2-feature-point-mark\"><\/span>\r\n\r\n                            <span>\r\n                                Store them somewhere cool and\r\n                                dry, away from heat and moisture.\r\n                            <\/span>\r\n\r\n                        <\/div>\r\n\r\n                        <div class=\"bkc-faq-v2-feature-point\">\r\n\r\n                            <span class=\"bkc-faq-v2-feature-point-mark\"><\/span>\r\n\r\n                            <span>\r\n                                Warm gently whenever you want\r\n                                that fresh-baked cookie feeling.\r\n                            <\/span>\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <!-- FEATURE BOTTOM -->\r\n\r\n                <div class=\"bkc-faq-v2-feature-bottom\">\r\n\r\n                    <div class=\"bkc-faq-v2-feature-rule\"><\/div>\r\n\r\n                    <div class=\"bkc-faq-v2-feature-note\">\r\n\r\n                        <strong>\r\n                            Made to be enjoyed.\r\n                        <\/strong>\r\n\r\n                        Keep them sealed, keep them cozy,\r\n                        and enjoy every bite at its best.\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/aside>\r\n\r\n\r\n            <!-- =================================================\r\n                 FAQ LIST\r\n            ================================================== -->\r\n\r\n            <div class=\"bkc-faq-v2-list\">\r\n\r\n\r\n                <!-- FAQ 01 -->\r\n\r\n                <article class=\"bkc-faq-v2-item active\">\r\n\r\n                    <button\r\n                        class=\"bkc-faq-v2-question\"\r\n                        type=\"button\"\r\n                        aria-expanded=\"true\"\r\n                    >\r\n\r\n                        <span class=\"bkc-faq-v2-question-left\">\r\n\r\n                            <span class=\"bkc-faq-v2-number\">\r\n                                01\r\n                            <\/span>\r\n\r\n                            <span class=\"bkc-faq-v2-question-text\">\r\n                                How should I store my cookies?\r\n                            <\/span>\r\n\r\n                        <\/span>\r\n\r\n                        <span class=\"bkc-faq-v2-toggle\"><\/span>\r\n\r\n                    <\/button>\r\n\r\n\r\n                    <div class=\"bkc-faq-v2-answer\">\r\n\r\n                        <div class=\"bkc-faq-v2-answer-inner\">\r\n\r\n                            For the best texture and flavor,\r\n                            keep your cookies in an airtight\r\n                            container at room temperature.\r\n                            Store them somewhere cool and dry,\r\n                            away from direct sunlight, moisture,\r\n                            and heat.\r\n\r\n                            <div class=\"bkc-faq-v2-tip\">\r\n\r\n                                <div class=\"bkc-faq-v2-tip-icon\">\r\n\r\n                                    <svg\r\n                                        viewBox=\"0 0 24 24\"\r\n                                        fill=\"none\"\r\n                                        xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n                                    >\r\n\r\n                                        <path\r\n                                            d=\"M7 3H17V21H7V3Z\"\r\n                                            stroke=\"currentColor\"\r\n                                            stroke-width=\"1.5\"\r\n                                        \/>\r\n\r\n                                        <path\r\n                                            d=\"M7 7H17\"\r\n                                            stroke=\"currentColor\"\r\n                                            stroke-width=\"1.5\"\r\n                                        \/>\r\n\r\n                                    <\/svg>\r\n\r\n                                <\/div>\r\n\r\n                                <div class=\"bkc-faq-v2-tip-content\">\r\n\r\n                                    <strong>\r\n                                        Best storage method\r\n                                    <\/strong>\r\n\r\n                                    <span>\r\n                                        Airtight container + cool,\r\n                                        dry place = softer cookies\r\n                                        and better flavor.\r\n                                    <\/span>\r\n\r\n                                <\/div>\r\n\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                <\/article>\r\n\r\n\r\n                <!-- FAQ 02 -->\r\n\r\n                <article class=\"bkc-faq-v2-item\">\r\n\r\n                    <button\r\n                        class=\"bkc-faq-v2-question\"\r\n                        type=\"button\"\r\n                        aria-expanded=\"false\"\r\n                    >\r\n\r\n                        <span class=\"bkc-faq-v2-question-left\">\r\n\r\n                            <span class=\"bkc-faq-v2-number\">\r\n                                02\r\n                            <\/span>\r\n\r\n                            <span class=\"bkc-faq-v2-question-text\">\r\n                                How long do the cookies stay fresh?\r\n                            <\/span>\r\n\r\n                        <\/span>\r\n\r\n                        <span class=\"bkc-faq-v2-toggle\"><\/span>\r\n\r\n                    <\/button>\r\n\r\n\r\n                    <div class=\"bkc-faq-v2-answer\">\r\n\r\n                        <div class=\"bkc-faq-v2-answer-inner\">\r\n\r\n                            Our cookies are best enjoyed fresh.\r\n                            Keep them sealed when not being eaten\r\n                            and enjoy them within a few days of pickup\r\n                            for the best flavor and texture.\r\n\r\n                            <div class=\"bkc-faq-v2-label\">\r\n                                Best enjoyed fresh\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                <\/article>\r\n\r\n\r\n                <!-- FAQ 03 -->\r\n\r\n                <article class=\"bkc-faq-v2-item\">\r\n\r\n                    <button\r\n                        class=\"bkc-faq-v2-question\"\r\n                        type=\"button\"\r\n                        aria-expanded=\"false\"\r\n                    >\r\n\r\n                        <span class=\"bkc-faq-v2-question-left\">\r\n\r\n                            <span class=\"bkc-faq-v2-number\">\r\n                                03\r\n                            <\/span>\r\n\r\n                            <span class=\"bkc-faq-v2-question-text\">\r\n                                Can I freeze my cookies?\r\n                            <\/span>\r\n\r\n                        <\/span>\r\n\r\n                        <span class=\"bkc-faq-v2-toggle\"><\/span>\r\n\r\n                    <\/button>\r\n\r\n\r\n                    <div class=\"bkc-faq-v2-answer\">\r\n\r\n                        <div class=\"bkc-faq-v2-answer-inner\">\r\n\r\n                            Yes. Allow the cookies to cool completely,\r\n                            then place them in an airtight freezer-safe\r\n                            container or bag. If stacking cookies,\r\n                            separate the layers with parchment paper\r\n                            to help prevent them from sticking together.\r\n\r\n                            When you're ready to enjoy them, allow\r\n                            them to thaw before reheating.\r\n\r\n                            <div class=\"bkc-faq-v2-label\">\r\n                                Freeze airtight\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                <\/article>\r\n\r\n\r\n                <!-- FAQ 04 -->\r\n\r\n                <article class=\"bkc-faq-v2-item\">\r\n\r\n                    <button\r\n                        class=\"bkc-faq-v2-question\"\r\n                        type=\"button\"\r\n                        aria-expanded=\"false\"\r\n                    >\r\n\r\n                        <span class=\"bkc-faq-v2-question-left\">\r\n\r\n                            <span class=\"bkc-faq-v2-number\">\r\n                                04\r\n                            <\/span>\r\n\r\n                            <span class=\"bkc-faq-v2-question-text\">\r\n                                How do I reheat them for a gooey texture?\r\n                            <\/span>\r\n\r\n                        <\/span>\r\n\r\n                        <span class=\"bkc-faq-v2-toggle\"><\/span>\r\n\r\n                    <\/button>\r\n\r\n\r\n                    <div class=\"bkc-faq-v2-answer\">\r\n\r\n                        <div class=\"bkc-faq-v2-answer-inner\">\r\n\r\n                            Gently warm your cookie before serving\r\n                            to bring back a soft, warm and gooey texture.\r\n                            Use short heating intervals and avoid\r\n                            overheating, as too much heat can dry\r\n                            the cookie out.\r\n\r\n                            If frozen, allow the cookie to thaw first\r\n                            for more even warming.\r\n\r\n                            <div class=\"bkc-faq-v2-tip\">\r\n\r\n                                <div class=\"bkc-faq-v2-tip-icon\">\r\n\r\n                                    <svg\r\n                                        viewBox=\"0 0 24 24\"\r\n                                        fill=\"none\"\r\n                                    >\r\n\r\n                                        <path\r\n                                            d=\"M12 3V21\"\r\n                                            stroke=\"currentColor\"\r\n                                            stroke-width=\"1.5\"\r\n                                            stroke-linecap=\"round\"\r\n                                        \/>\r\n\r\n                                        <path\r\n                                            d=\"M7 8L17 16\"\r\n                                            stroke=\"currentColor\"\r\n                                            stroke-width=\"1.5\"\r\n                                            stroke-linecap=\"round\"\r\n                                        \/>\r\n\r\n                                        <path\r\n                                            d=\"M17 8L7 16\"\r\n                                            stroke=\"currentColor\"\r\n                                            stroke-width=\"1.5\"\r\n                                            stroke-linecap=\"round\"\r\n                                        \/>\r\n\r\n                                    <\/svg>\r\n\r\n                                <\/div>\r\n\r\n                                <div class=\"bkc-faq-v2-tip-content\">\r\n\r\n                                    <strong>\r\n                                        Warm gently\r\n                                    <\/strong>\r\n\r\n                                    <span>\r\n                                        Short reheating is better than\r\n                                        overheating. Enjoy while warm.\r\n                                    <\/span>\r\n\r\n                                <\/div>\r\n\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                <\/article>\r\n\r\n\r\n                <!-- FAQ 05 -->\r\n\r\n                <article class=\"bkc-faq-v2-item\">\r\n\r\n                    <button\r\n                        class=\"bkc-faq-v2-question\"\r\n                        type=\"button\"\r\n                        aria-expanded=\"false\"\r\n                    >\r\n\r\n                        <span class=\"bkc-faq-v2-question-left\">\r\n\r\n                            <span class=\"bkc-faq-v2-number\">\r\n                                05\r\n                            <\/span>\r\n\r\n                            <span class=\"bkc-faq-v2-question-text\">\r\n                                Can I change or cancel my pre-order?\r\n                            <\/span>\r\n\r\n                        <\/span>\r\n\r\n                        <span class=\"bkc-faq-v2-toggle\"><\/span>\r\n\r\n                    <\/button>\r\n\r\n\r\n                    <div class=\"bkc-faq-v2-answer\">\r\n\r\n                        <div class=\"bkc-faq-v2-answer-inner\">\r\n\r\n                            Pre-orders can be changed or cancelled\r\n                            before the cancellation cutoff.\r\n\r\n                            If you need to make a change, please\r\n                            contact us at least 48 hours before your\r\n                            selected market day. This gives us enough\r\n                            time to adjust your order before preparation.\r\n\r\n                            <div class=\"bkc-faq-v2-label\">\r\n                                48-hour cancellation window\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                <\/article>\r\n\r\n\r\n                <!-- FAQ 06 -->\r\n\r\n                <article class=\"bkc-faq-v2-item\">\r\n\r\n                    <button\r\n                        class=\"bkc-faq-v2-question\"\r\n                        type=\"button\"\r\n                        aria-expanded=\"false\"\r\n                    >\r\n\r\n                        <span class=\"bkc-faq-v2-question-left\">\r\n\r\n                            <span class=\"bkc-faq-v2-number\">\r\n                                06\r\n                            <\/span>\r\n\r\n                            <span class=\"bkc-faq-v2-question-text\">\r\n                                What happens if I cancel less than 48 hours before market day?\r\n                            <\/span>\r\n\r\n                        <\/span>\r\n\r\n                        <span class=\"bkc-faq-v2-toggle\"><\/span>\r\n\r\n                    <\/button>\r\n\r\n\r\n                    <div class=\"bkc-faq-v2-answer\">\r\n\r\n                        <div class=\"bkc-faq-v2-answer-inner\">\r\n\r\n                            Because pre-orders are prepared in advance,\r\n                            cancellations made less than 48 hours before\r\n                            the selected market day are not eligible for\r\n                            a refund.\r\n\r\n                            If something unexpected comes up, please\r\n                            contact us as soon as possible. We'll always\r\n                            do our best to help where we can.\r\n\r\n                            <div class=\"bkc-faq-v2-label\">\r\n                                No refunds under 48 hours\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                <\/article>\r\n\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- =================================================\r\n             BOTTOM\r\n        ================================================== -->\r\n\r\n        <div class=\"bkc-faq-v2-bottom\">\r\n\r\n            <span class=\"bkc-faq-v2-bottom-line\"><\/span>\r\n\r\n            Fresh cookies \u00b7 Simple answers \u00b7 Happy customers\r\n\r\n            <span class=\"bkc-faq-v2-bottom-line\"><\/span>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<script>\r\n(function () {\r\n\r\n    function initBrooklynFAQ() {\r\n\r\n        const section =\r\n            document.getElementById(\"bkcFaqV2\");\r\n\r\n        if (\r\n            !section ||\r\n            section.dataset.initialized === \"true\"\r\n        ) {\r\n            return;\r\n        }\r\n\r\n        section.dataset.initialized = \"true\";\r\n\r\n\r\n        \/* =====================================================\r\n           SCROLL REVEAL\r\n        ===================================================== *\/\r\n\r\n        if (\"IntersectionObserver\" in window) {\r\n\r\n            const observer =\r\n                new IntersectionObserver(\r\n                    function (entries) {\r\n\r\n                        entries.forEach(function (entry) {\r\n\r\n                            if (entry.isIntersecting) {\r\n\r\n                                section.classList.add(\r\n                                    \"is-visible\"\r\n                                );\r\n\r\n                                observer.unobserve(section);\r\n\r\n                            }\r\n\r\n                        });\r\n\r\n                    },\r\n                    {\r\n                        threshold: 0.10\r\n                    }\r\n                );\r\n\r\n            observer.observe(section);\r\n\r\n        } else {\r\n\r\n            section.classList.add(\"is-visible\");\r\n\r\n        }\r\n\r\n\r\n        \/* =====================================================\r\n           FAQ ACCORDION\r\n        ===================================================== *\/\r\n\r\n        const items =\r\n            section.querySelectorAll(\r\n                \".bkc-faq-v2-item\"\r\n            );\r\n\r\n\r\n        items.forEach(function (item) {\r\n\r\n            const button =\r\n                item.querySelector(\r\n                    \".bkc-faq-v2-question\"\r\n                );\r\n\r\n            if (!button) return;\r\n\r\n\r\n            button.addEventListener(\r\n                \"click\",\r\n                function () {\r\n\r\n                    const currentlyActive =\r\n                        item.classList.contains(\"active\");\r\n\r\n\r\n                    \/* Close every item *\/\r\n\r\n                    items.forEach(function (other) {\r\n\r\n                        other.classList.remove(\"active\");\r\n\r\n                        const otherButton =\r\n                            other.querySelector(\r\n                                \".bkc-faq-v2-question\"\r\n                            );\r\n\r\n                        if (otherButton) {\r\n\r\n                            otherButton.setAttribute(\r\n                                \"aria-expanded\",\r\n                                \"false\"\r\n                            );\r\n\r\n                        }\r\n\r\n                    });\r\n\r\n\r\n                    \/* Open clicked item *\/\r\n\r\n                    if (!currentlyActive) {\r\n\r\n                        item.classList.add(\"active\");\r\n\r\n                        button.setAttribute(\r\n                            \"aria-expanded\",\r\n                            \"true\"\r\n                        );\r\n\r\n                    }\r\n\r\n                }\r\n            );\r\n\r\n        });\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================================\r\n       NORMAL PAGE LOAD\r\n    ========================================================= *\/\r\n\r\n    if (document.readyState === \"loading\") {\r\n\r\n        document.addEventListener(\r\n            \"DOMContentLoaded\",\r\n            initBrooklynFAQ\r\n        );\r\n\r\n    } else {\r\n\r\n        initBrooklynFAQ();\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================================\r\n       ELEMENTOR SUPPORT\r\n    ========================================================= *\/\r\n\r\n    document.addEventListener(\r\n        \"elementor\/frontend\/init\",\r\n        function () {\r\n\r\n            setTimeout(\r\n                initBrooklynFAQ,\r\n                100\r\n            );\r\n\r\n        }\r\n    );\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c98cc13 e-con-full e-flex e-con e-parent\" data-id=\"c98cc13\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d8e3be5 elementor-widget elementor-widget-html\" data-id=\"d8e3be5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* =========================================================\r\n   BROOKLYN COOKIES\r\n   GET IN TOUCH \u2014 WHITE THEME WITH DARK FORM\r\n   Elementor HTML Widget\r\n   BACKGROUND: WHITE (#FFFFFF)\r\n   FORM BACKGROUND: #21130D\r\n========================================================= *\/\r\n\r\n.bkc-contact {\r\n    --bg: #ffffff;\r\n    --paper: #ffffff;\r\n    --paper-hover: #fcf9f6;\r\n    --dark: #24150f;\r\n    --brown: #68402c;\r\n    --brown-dark: #4d2d1e;\r\n    --caramel: #b87945;\r\n    --caramel-light: #d5a477;\r\n    --muted: #75645a;\r\n    --line: rgba(72, 44, 29, .10);\r\n\r\n    position: relative;\r\n    width: 100%;\r\n    padding: 80px 0 70px;\r\n\r\n    background: #ffffff;\r\n\r\n    overflow: hidden;\r\n    isolation: isolate;\r\n\r\n    font-family: \"DM Sans\", sans-serif;\r\n}\r\n\r\n.bkc-contact *,\r\n.bkc-contact *::before,\r\n.bkc-contact *::after {\r\n    box-sizing: border-box;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BACKGROUND DECORATION \u2014 SOFT & SUBTLE\r\n========================================================= *\/\r\n\r\n.bkc-contact::before {\r\n    content: \"HELLO\";\r\n\r\n    position: absolute;\r\n    top: 20px;\r\n    right: -15px;\r\n\r\n    font-family: \"Playfair Display\", serif;\r\n    font-size: clamp(120px, 16vw, 235px);\r\n    font-weight: 600;\r\n    line-height: .8;\r\n\r\n    letter-spacing: -9px;\r\n\r\n    color: rgba(36,21,15,.025);\r\n\r\n    pointer-events: none;\r\n    z-index: -1;\r\n}\r\n\r\n.bkc-contact::after {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    width: 560px;\r\n    height: 560px;\r\n\r\n    left: -390px;\r\n    bottom: -360px;\r\n\r\n    border: 1px solid rgba(184,121,69,.08);\r\n    border-radius: 50%;\r\n\r\n    box-shadow:\r\n        0 0 0 55px rgba(184,121,69,.025),\r\n        0 0 0 110px rgba(184,121,69,.015),\r\n        0 0 0 165px rgba(184,121,69,.010);\r\n\r\n    pointer-events: none;\r\n    z-index: -1;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CONTAINER\r\n========================================================= *\/\r\n\r\n.bkc-contact-container {\r\n    width: min(1320px, calc(100% - 80px));\r\n    margin: 0 auto;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADER\r\n========================================================= *\/\r\n\r\n.bkc-contact-header {\r\n    display: flex;\r\n    align-items: flex-end;\r\n    justify-content: space-between;\r\n\r\n    gap: 50px;\r\n\r\n    margin-bottom: 58px;\r\n\r\n    opacity: 0;\r\n    transform: translateY(30px);\r\n}\r\n\r\n.bkc-contact.is-visible .bkc-contact-header {\r\n    animation:\r\n        bkcContactReveal\r\n        .9s\r\n        cubic-bezier(.16,1,.3,1)\r\n        forwards;\r\n}\r\n\r\n.bkc-contact-eyebrow {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n\r\n    margin-bottom: 18px;\r\n}\r\n\r\n.bkc-contact-eyebrow-line {\r\n    width: 45px;\r\n    height: 1px;\r\n\r\n    background: var(--caramel);\r\n}\r\n\r\n.bkc-contact-eyebrow span:last-child {\r\n    font-size: 10px;\r\n    font-weight: 800;\r\n\r\n    letter-spacing: 3px;\r\n    text-transform: uppercase;\r\n\r\n    color: var(--brown);\r\n}\r\n\r\n.bkc-contact-title {\r\n    margin: 0;\r\n\r\n    max-width: 820px;\r\n\r\n    color: var(--dark);\r\n\r\n    font-family: \"Playfair Display\", serif;\r\n\r\n    font-size: clamp(48px, 6vw, 82px);\r\n    line-height: .94;\r\n\r\n    letter-spacing: -3.5px;\r\n\r\n    font-weight: 600;\r\n}\r\n\r\n.bkc-contact-title em {\r\n    color: var(--caramel);\r\n    font-weight: 500;\r\n}\r\n\r\n.bkc-contact-intro {\r\n    max-width: 350px;\r\n\r\n    margin: 0 0 5px;\r\n\r\n    color: var(--muted);\r\n\r\n    font-size: 13px;\r\n    line-height: 1.9;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MAIN CONTACT GRID\r\n========================================================= *\/\r\n\r\n.bkc-contact-grid {\r\n    display: grid;\r\n\r\n    grid-template-columns: 390px minmax(0, 1fr);\r\n\r\n    gap: 45px;\r\n\r\n    align-items: stretch;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LEFT CONTACT PANEL \u2014 LIGHT THEME\r\n========================================================= *\/\r\n\r\n.bkc-contact-info {\r\n    position: relative;\r\n\r\n    padding: 42px 38px 36px;\r\n\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: space-between;\r\n\r\n    min-height: 560px;\r\n\r\n    background: #f8f5f1;\r\n\r\n    border: 1px solid #B87945;\r\n\r\n    box-shadow: 0 18px 45px rgba(36,21,15,.06);\r\n\r\n    overflow: hidden;\r\n\r\n    opacity: 0;\r\n    transform: translateX(-35px);\r\n}\r\n\r\n.bkc-contact.is-visible .bkc-contact-info {\r\n    animation:\r\n        bkcContactInfoReveal\r\n        1s\r\n        cubic-bezier(.16,1,.3,1)\r\n        .12s\r\n        forwards;\r\n}\r\n\r\n\r\n\/* Decorative circles \u2014 light version *\/\r\n\r\n.bkc-contact-info::before {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    width: 350px;\r\n    height: 350px;\r\n\r\n    right: -205px;\r\n    top: -175px;\r\n\r\n    border-radius: 50%;\r\n\r\n    border: 1px solid rgba(184,121,69,.08);\r\n\r\n    box-shadow:\r\n        0 0 0 35px rgba(184,121,69,.025),\r\n        0 0 0 70px rgba(184,121,69,.015),\r\n        0 0 0 105px rgba(184,121,69,.010);\r\n\r\n    pointer-events: none;\r\n}\r\n\r\n.bkc-contact-info::after {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    width: 110px;\r\n    height: 110px;\r\n\r\n    left: -60px;\r\n    bottom: -60px;\r\n\r\n    border-radius: 50%;\r\n\r\n    border: 1px solid rgba(184,121,69,.10);\r\n\r\n    pointer-events: none;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   INFO CONTENT \u2014 LIGHT THEME\r\n========================================================= *\/\r\n\r\n.bkc-contact-info-top {\r\n    position: relative;\r\n    z-index: 2;\r\n}\r\n\r\n.bkc-contact-label {\r\n    display: inline-flex;\r\n\r\n    padding: 8px 13px;\r\n\r\n    border: 1px solid rgba(184,121,69,.25);\r\n\r\n    color: var(--brown);\r\n\r\n    background: rgba(184,121,69,.06);\r\n\r\n    font-size: 8px;\r\n    font-weight: 800;\r\n\r\n    letter-spacing: 2px;\r\n\r\n    text-transform: uppercase;\r\n}\r\n\r\n.bkc-contact-info-heading {\r\n    margin: 55px 0 18px;\r\n\r\n    color: var(--dark);\r\n\r\n    font-family: \"Playfair Display\", serif;\r\n\r\n    font-size: 43px;\r\n    line-height: 1.06;\r\n\r\n    letter-spacing: -.8px;\r\n\r\n    font-weight: 500;\r\n}\r\n\r\n.bkc-contact-info-heading em {\r\n    color: var(--caramel);\r\n    font-style: italic;\r\n}\r\n\r\n.bkc-contact-info-copy {\r\n    max-width: 285px;\r\n\r\n    margin: 0;\r\n\r\n    color: var(--muted);\r\n\r\n    font-size: 13px;\r\n    line-height: 1.9;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CONTACT DETAILS \u2014 LIGHT THEME\r\n========================================================= *\/\r\n\r\n.bkc-contact-details {\r\n    position: relative;\r\n    z-index: 2;\r\n\r\n    margin-top: 42px;\r\n}\r\n\r\n.bkc-contact-detail {\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    gap: 15px;\r\n\r\n    padding: 16px 0;\r\n\r\n    border-top: 1px solid rgba(36,21,15,.08);\r\n\r\n    transition:\r\n        padding-left .4s cubic-bezier(.16,1,.3,1),\r\n        border-color .35s ease;\r\n\r\n    text-decoration: none !important;\r\n}\r\n\r\n.bkc-contact-detail:last-child {\r\n    border-bottom: 1px solid rgba(36,21,15,.08);\r\n}\r\n\r\n.bkc-contact-detail:hover {\r\n    padding-left: 7px;\r\n\r\n    border-color: rgba(184,121,69,.30);\r\n}\r\n\r\n.bkc-contact-detail-icon {\r\n    width: 34px;\r\n    height: 34px;\r\n\r\n    flex-shrink: 0;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    color: var(--caramel);\r\n\r\n    border: 1px solid rgba(184,121,69,.20);\r\n    border-radius: 50%;\r\n\r\n    transition:\r\n        background .35s ease,\r\n        color .35s ease,\r\n        transform .4s cubic-bezier(.16,1,.3,1);\r\n}\r\n\r\n.bkc-contact-detail:hover .bkc-contact-detail-icon {\r\n    background: var(--caramel);\r\n    color: #fff;\r\n\r\n    transform: rotate(-8deg) scale(1.06);\r\n}\r\n\r\n.bkc-contact-detail-icon svg {\r\n    width: 15px;\r\n    height: 15px;\r\n}\r\n\r\n.bkc-contact-detail-text {\r\n    min-width: 0;\r\n}\r\n\r\n.bkc-contact-detail-label {\r\n    display: block;\r\n\r\n    margin-bottom: 3px;\r\n\r\n    color: rgba(36,21,15,.38);\r\n\r\n    font-size: 8px;\r\n    font-weight: 800;\r\n\r\n    letter-spacing: 1.5px;\r\n\r\n    text-transform: uppercase;\r\n}\r\n\r\n.bkc-contact-detail-value {\r\n    display: block;\r\n\r\n    color: var(--dark);\r\n\r\n    font-size: 12px;\r\n    line-height: 1.5;\r\n\r\n    word-break: break-word;\r\n\r\n    transition: color .3s ease;\r\n}\r\n\r\n.bkc-contact-detail:hover .bkc-contact-detail-value {\r\n    color: var(--caramel);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LEFT BOTTOM NOTE \u2014 LIGHT THEME\r\n========================================================= *\/\r\n\r\n.bkc-contact-info-bottom {\r\n    position: relative;\r\n    z-index: 2;\r\n\r\n    margin-top: 35px;\r\n}\r\n\r\n.bkc-contact-rule {\r\n    width: 100%;\r\n    height: 1px;\r\n\r\n    margin-bottom: 20px;\r\n\r\n    background: rgba(36,21,15,.08);\r\n}\r\n\r\n.bkc-contact-note {\r\n    color: var(--muted);\r\n\r\n    font-size: 9px;\r\n    line-height: 1.8;\r\n\r\n    letter-spacing: .3px;\r\n}\r\n\r\n.bkc-contact-note strong {\r\n    display: block;\r\n\r\n    margin-bottom: 3px;\r\n\r\n    color: var(--dark);\r\n\r\n    font-family: \"Playfair Display\", serif;\r\n\r\n    font-size: 15px;\r\n    font-weight: 500;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   RIGHT FORM CARD \u2014 DARK THEME (#21130D)\r\n========================================================= *\/\r\n\r\n.bkc-contact-form-card {\r\n    position: relative;\r\n\r\n    padding: 42px 45px 40px;\r\n\r\n    background: #21130D;\r\n\r\n    border: 1px solid rgba(255,255,255,.08);\r\n\r\n    box-shadow: 0 18px 50px rgba(36,21,15,.15);\r\n\r\n    opacity: 0;\r\n    transform: translateX(35px);\r\n\r\n    transition:\r\n        box-shadow .45s ease,\r\n        border-color .4s ease;\r\n}\r\n\r\n.bkc-contact.is-visible .bkc-contact-form-card {\r\n    animation:\r\n        bkcContactFormReveal\r\n        1s\r\n        cubic-bezier(.16,1,.3,1)\r\n        .22s\r\n        forwards;\r\n}\r\n\r\n.bkc-contact-form-card:hover {\r\n    border-color: rgba(184,121,69,.30);\r\n\r\n    box-shadow: 0 25px 60px rgba(36,21,15,.2);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FORM HEADER \u2014 DARK THEME\r\n========================================================= *\/\r\n\r\n.bkc-contact-form-heading {\r\n    margin: 0 0 8px;\r\n\r\n    color: #ffffff;\r\n\r\n    font-family: \"Playfair Display\", serif;\r\n\r\n    font-size: 34px;\r\n    line-height: 1.1;\r\n\r\n    font-weight: 600;\r\n}\r\n\r\n.bkc-contact-form-heading em {\r\n    color: var(--caramel-light);\r\n    font-weight: 500;\r\n}\r\n\r\n.bkc-contact-form-subtitle {\r\n    margin: 0 0 35px;\r\n\r\n    color: rgba(255,255,255,.55);\r\n\r\n    font-size: 12px;\r\n    line-height: 1.8;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FORM GRID \u2014 DARK THEME\r\n========================================================= *\/\r\n\r\n.bkc-contact-form {\r\n    display: grid;\r\n\r\n    grid-template-columns: repeat(2, minmax(0, 1fr));\r\n\r\n    gap: 20px;\r\n}\r\n\r\n.bkc-contact-field {\r\n    position: relative;\r\n}\r\n\r\n.bkc-contact-field.full {\r\n    grid-column: 1 \/ -1;\r\n}\r\n\r\n.bkc-contact-field label {\r\n    display: block;\r\n\r\n    margin-bottom: 8px;\r\n\r\n    color: rgba(255,255,255,.7);\r\n\r\n    font-size: 9px;\r\n    font-weight: 800;\r\n\r\n    letter-spacing: 1.5px;\r\n\r\n    text-transform: uppercase;\r\n}\r\n\r\n.bkc-contact-field input,\r\n.bkc-contact-field textarea,\r\n.bkc-contact-field select {\r\n    width: 100%;\r\n\r\n    border: 1px solid rgba(255,255,255,.12);\r\n\r\n    outline: none;\r\n\r\n    background: rgba(255,255,255,.06);\r\n\r\n    color: #ffffff;\r\n\r\n    font-family: \"DM Sans\", sans-serif;\r\n\r\n    font-size: 12px;\r\n\r\n    border-radius: 0;\r\n\r\n    transition:\r\n        border-color .35s ease,\r\n        background .35s ease,\r\n        box-shadow .35s ease,\r\n        transform .35s ease;\r\n}\r\n\r\n.bkc-contact-field input,\r\n.bkc-contact-field select {\r\n    height: 52px;\r\n\r\n    padding: 0 16px;\r\n}\r\n\r\n.bkc-contact-field textarea {\r\n    min-height: 145px;\r\n\r\n    resize: vertical;\r\n\r\n    padding: 15px 16px;\r\n\r\n    line-height: 1.7;\r\n}\r\n\r\n.bkc-contact-field input::placeholder,\r\n.bkc-contact-field textarea::placeholder {\r\n    color: rgba(255,255,255,.3);\r\n}\r\n\r\n.bkc-contact-field input:hover,\r\n.bkc-contact-field textarea:hover,\r\n.bkc-contact-field select:hover {\r\n    border-color: rgba(184,121,69,.40);\r\n    background: rgba(255,255,255,.10);\r\n}\r\n\r\n.bkc-contact-field input:focus,\r\n.bkc-contact-field textarea:focus,\r\n.bkc-contact-field select:focus {\r\n    border-color: var(--caramel);\r\n\r\n    background: rgba(255,255,255,.08);\r\n\r\n    box-shadow: 0 0 0 3px rgba(184,121,69,.15);\r\n\r\n    transform: translateY(-1px);\r\n}\r\n\r\n\/* Select dropdown arrow fix for dark theme *\/\r\n.bkc-contact-field select {\r\n    appearance: none;\r\n    background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23b87945' stroke-width='1.5' fill='none' stroke-linecap='round'\/%3E%3C\/svg%3E\");\r\n    background-repeat: no-repeat;\r\n    background-position: right 16px center;\r\n    cursor: pointer;\r\n}\r\n\r\n.bkc-contact-field select option {\r\n    background: #21130D;\r\n    color: #ffffff;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SUBMIT AREA \u2014 DARK THEME\r\n========================================================= *\/\r\n\r\n.bkc-contact-submit-area {\r\n    grid-column: 1 \/ -1;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n\r\n    gap: 25px;\r\n\r\n    margin-top: 4px;\r\n}\r\n\r\n.bkc-contact-submit-note {\r\n    max-width: 300px;\r\n\r\n    color: rgba(255,255,255,.4);\r\n\r\n    font-size: 9px;\r\n    line-height: 1.7;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PREMIUM BUTTON \u2014 DARK THEME\r\n========================================================= *\/\r\n\r\n.bkc-contact-button {\r\n    position: relative;\r\n\r\n    min-width: 190px;\r\n    height: 54px;\r\n\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    gap: 12px;\r\n\r\n    padding: 0 23px;\r\n\r\n    overflow: hidden;\r\n\r\n    border: 1px solid var(--caramel);\r\n\r\n    background: var(--caramel);\r\n\r\n    color: #fff;\r\n\r\n    font-family: \"DM Sans\", sans-serif;\r\n\r\n    font-size: 10px;\r\n    font-weight: 800;\r\n\r\n    letter-spacing: 1.8px;\r\n\r\n    text-transform: uppercase;\r\n\r\n    text-decoration: none;\r\n\r\n    cursor: pointer;\r\n\r\n    transition:\r\n        color .4s ease,\r\n        transform .4s cubic-bezier(.16,1,.3,1),\r\n        box-shadow .4s ease;\r\n}\r\n\r\n.bkc-contact-button::before {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    inset: 0;\r\n\r\n    background: #ffffff;\r\n\r\n    transform: translateX(-102%);\r\n\r\n    transition:\r\n        transform .5s cubic-bezier(.16,1,.3,1);\r\n\r\n    z-index: 0;\r\n}\r\n\r\n.bkc-contact-button span,\r\n.bkc-contact-button svg {\r\n    position: relative;\r\n    z-index: 2;\r\n}\r\n\r\n.bkc-contact-button:hover {\r\n    color: #21130D;\r\n\r\n    transform: translateY(-3px);\r\n\r\n    box-shadow: 0 14px 28px rgba(0,0,0,.3);\r\n}\r\n\r\n.bkc-contact-button:hover::before {\r\n    transform: translateX(0);\r\n}\r\n\r\n.bkc-contact-button svg {\r\n    width: 16px;\r\n    height: 16px;\r\n\r\n    transition:\r\n        transform .4s cubic-bezier(.16,1,.3,1);\r\n}\r\n\r\n.bkc-contact-button:hover svg {\r\n    transform: translateX(5px);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   STATUS MESSAGE \u2014 DARK THEME\r\n========================================================= *\/\r\n\r\n.bkc-contact-status {\r\n    display: none;\r\n\r\n    grid-column: 1 \/ -1;\r\n\r\n    padding: 13px 16px;\r\n\r\n    border-left: 2px solid var(--caramel);\r\n\r\n    background: rgba(184,121,69,.15);\r\n\r\n    color: #d5a477;\r\n\r\n    font-size: 10px;\r\n    line-height: 1.6;\r\n}\r\n\r\n.bkc-contact-status.show {\r\n    display: block;\r\n\r\n    animation:\r\n        bkcContactStatus .5s ease forwards;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BOTTOM TEXT\r\n========================================================= *\/\r\n\r\n.bkc-contact-bottom {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    gap: 14px;\r\n\r\n    margin-top: 48px;\r\n\r\n    color: rgba(36,21,15,.35);\r\n\r\n    font-size: 8px;\r\n    font-weight: 800;\r\n\r\n    letter-spacing: 2.5px;\r\n\r\n    text-transform: uppercase;\r\n\r\n    opacity: 0;\r\n}\r\n\r\n.bkc-contact.is-visible .bkc-contact-bottom {\r\n    animation:\r\n        bkcContactReveal\r\n        .8s\r\n        ease\r\n        .8s\r\n        forwards;\r\n}\r\n\r\n.bkc-contact-bottom-line {\r\n    width: 42px;\r\n    height: 1px;\r\n\r\n    background: rgba(184,121,69,.30);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ANIMATIONS\r\n========================================================= *\/\r\n\r\n@keyframes bkcContactReveal {\r\n\r\n    from {\r\n        opacity: 0;\r\n        transform: translateY(30px);\r\n    }\r\n\r\n    to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n}\r\n\r\n@keyframes bkcContactInfoReveal {\r\n\r\n    from {\r\n        opacity: 0;\r\n        transform: translateX(-35px);\r\n    }\r\n\r\n    to {\r\n        opacity: 1;\r\n        transform: translateX(0);\r\n    }\r\n}\r\n\r\n@keyframes bkcContactFormReveal {\r\n\r\n    from {\r\n        opacity: 0;\r\n        transform: translateX(35px);\r\n    }\r\n\r\n    to {\r\n        opacity: 1;\r\n        transform: translateX(0);\r\n    }\r\n}\r\n\r\n@keyframes bkcContactStatus {\r\n\r\n    from {\r\n        opacity: 0;\r\n        transform: translateY(8px);\r\n    }\r\n\r\n    to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media (max-width: 1000px) {\r\n\r\n    .bkc-contact {\r\n        padding: 90px 0 100px;\r\n    }\r\n\r\n    .bkc-contact-container {\r\n        width: min(100% - 50px, 900px);\r\n    }\r\n\r\n    .bkc-contact-header {\r\n        display: block;\r\n\r\n        margin-bottom: 48px;\r\n    }\r\n\r\n    .bkc-contact-intro {\r\n        margin-top: 22px;\r\n\r\n        max-width: 620px;\r\n    }\r\n\r\n    .bkc-contact-grid {\r\n        grid-template-columns: 290px minmax(0, 1fr);\r\n\r\n        gap: 28px;\r\n    }\r\n\r\n    .bkc-contact-info {\r\n        padding: 32px 27px;\r\n        min-height: auto;\r\n    }\r\n\r\n    .bkc-contact-info-heading {\r\n        margin-top: 45px;\r\n\r\n        font-size: 34px;\r\n    }\r\n\r\n    .bkc-contact-info-copy {\r\n        font-size: 12px;\r\n    }\r\n\r\n    .bkc-contact-form-card {\r\n        padding: 32px 28px;\r\n    }\r\n\r\n    .bkc-contact-form-heading {\r\n        font-size: 30px;\r\n    }\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 760px) {\r\n\r\n    .bkc-contact {\r\n        padding: 72px 0 80px;\r\n    }\r\n\r\n    .bkc-contact-container {\r\n        width: calc(100% - 30px);\r\n    }\r\n\r\n    .bkc-contact::before {\r\n        top: 35px;\r\n        right: -10px;\r\n\r\n        font-size: 100px;\r\n        letter-spacing: -5px;\r\n    }\r\n\r\n    .bkc-contact-header {\r\n        margin-bottom: 38px;\r\n    }\r\n\r\n    .bkc-contact-eyebrow {\r\n        margin-bottom: 15px;\r\n    }\r\n\r\n    .bkc-contact-eyebrow-line {\r\n        width: 30px;\r\n    }\r\n\r\n    .bkc-contact-eyebrow span:last-child {\r\n        font-size: 8px;\r\n        letter-spacing: 2px;\r\n    }\r\n\r\n    .bkc-contact-title {\r\n        font-size: clamp(43px, 12vw, 62px);\r\n\r\n        line-height: .96;\r\n\r\n        letter-spacing: -2.5px;\r\n    }\r\n\r\n    .bkc-contact-intro {\r\n        margin-top: 20px;\r\n\r\n        font-size: 12px;\r\n        line-height: 1.8;\r\n    }\r\n\r\n    .bkc-contact-grid {\r\n        display: block;\r\n    }\r\n\r\n\r\n    \/* LEFT *\/\r\n\r\n    .bkc-contact-info {\r\n        min-height: 0;\r\n\r\n        margin-bottom: 28px;\r\n\r\n        padding: 30px 27px;\r\n    }\r\n\r\n    .bkc-contact-info-heading {\r\n        margin-top: 38px;\r\n        margin-bottom: 15px;\r\n\r\n        font-size: 34px;\r\n    }\r\n\r\n    .bkc-contact-info-copy {\r\n        max-width: 520px;\r\n\r\n        font-size: 12px;\r\n        line-height: 1.85;\r\n    }\r\n\r\n    .bkc-contact-details {\r\n        margin-top: 30px;\r\n    }\r\n\r\n\r\n    \/* FORM \u2014 DARK THEME MOBILE *\/\r\n\r\n    .bkc-contact-form-card {\r\n        padding: 30px 20px;\r\n    }\r\n\r\n    .bkc-contact-form-heading {\r\n        font-size: 28px;\r\n    }\r\n\r\n    .bkc-contact-form-subtitle {\r\n        margin-bottom: 28px;\r\n\r\n        font-size: 11px;\r\n    }\r\n\r\n    .bkc-contact-form {\r\n        grid-template-columns: 1fr;\r\n\r\n        gap: 17px;\r\n    }\r\n\r\n    .bkc-contact-field.full {\r\n        grid-column: auto;\r\n    }\r\n\r\n    .bkc-contact-submit-area {\r\n        grid-column: auto;\r\n\r\n        align-items: stretch;\r\n        flex-direction: column;\r\n\r\n        gap: 17px;\r\n    }\r\n\r\n    .bkc-contact-submit-note {\r\n        max-width: none;\r\n    }\r\n\r\n    .bkc-contact-button {\r\n        width: 100%;\r\n    }\r\n\r\n    .bkc-contact-status {\r\n        grid-column: auto;\r\n    }\r\n\r\n    .bkc-contact-bottom {\r\n        margin-top: 35px;\r\n\r\n        font-size: 6px;\r\n        letter-spacing: 1.3px;\r\n    }\r\n\r\n    .bkc-contact-bottom-line {\r\n        width: 25px;\r\n    }\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   VERY SMALL\r\n========================================================= *\/\r\n\r\n@media (max-width: 380px) {\r\n\r\n    .bkc-contact-container {\r\n        width: calc(100% - 22px);\r\n    }\r\n\r\n    .bkc-contact-title {\r\n        font-size: 40px;\r\n    }\r\n\r\n    .bkc-contact-info {\r\n        padding: 27px 22px;\r\n    }\r\n\r\n    .bkc-contact-info-heading {\r\n        font-size: 31px;\r\n    }\r\n\r\n    .bkc-contact-form-card {\r\n        padding: 27px 16px;\r\n    }\r\n\r\n    .bkc-contact-form-heading {\r\n        font-size: 26px;\r\n    }\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REDUCED MOTION\r\n========================================================= *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n    .bkc-contact *,\r\n    .bkc-contact {\r\n        animation: none !important;\r\n        transition: none !important;\r\n    }\r\n\r\n    .bkc-contact-header,\r\n    .bkc-contact-info,\r\n    .bkc-contact-form-card,\r\n    .bkc-contact-bottom {\r\n        opacity: 1 !important;\r\n        transform: none !important;\r\n    }\r\n}\r\n<\/style>\r\n\r\n\r\n<section class=\"bkc-contact\" id=\"bkcContact\">\r\n\r\n    <div class=\"bkc-contact-container\">\r\n\r\n        <!-- =================================================\r\n             HEADER\r\n        ================================================== -->\r\n\r\n        <div class=\"bkc-contact-header\">\r\n\r\n            <div>\r\n\r\n                <div class=\"bkc-contact-eyebrow\">\r\n\r\n                    <span class=\"bkc-contact-eyebrow-line\"><\/span>\r\n\r\n                    <span>Get In Touch<\/span>\r\n\r\n                <\/div>\r\n\r\n                <h2 class=\"bkc-contact-title\">\r\n                    Let's make something\r\n                    <em>delicious.<\/em>\r\n                <\/h2>\r\n\r\n            <\/div>\r\n\r\n            <p class=\"bkc-contact-intro\">\r\n                Have a question about an order, cookies,\r\n                custom requests, or anything else?\r\n                We'd love to hear from you.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- =================================================\r\n             MAIN CONTACT GRID\r\n        ================================================== -->\r\n\r\n        <div class=\"bkc-contact-grid\">\r\n\r\n\r\n            <!-- =================================================\r\n                 LEFT INFORMATION PANEL \u2014 LIGHT THEME\r\n            ================================================== -->\r\n\r\n            <aside class=\"bkc-contact-info\">\r\n\r\n                <div class=\"bkc-contact-info-top\">\r\n\r\n                    <span class=\"bkc-contact-label\">\r\n                        Say Hello\r\n                    <\/span>\r\n\r\n                    <h3 class=\"bkc-contact-info-heading\">\r\n                        Good things\r\n                        <em>start<\/em> with\r\n                        a hello.\r\n                    <\/h3>\r\n\r\n                    <p class=\"bkc-contact-info-copy\">\r\n                        Whether you're looking for your next\r\n                        cookie fix or simply have a question,\r\n                        send us a message and we'll get back\r\n                        to you as soon as we can.\r\n                    <\/p>\r\n\r\n\r\n                    <div class=\"bkc-contact-details\">\r\n\r\n\r\n                        <!-- EMAIL -->\r\n\r\n                        <a\r\n                            href=\"mailto:hello@brooklyncookies.com\"\r\n                            class=\"bkc-contact-detail\"\r\n                            style=\"text-decoration:none;\"\r\n                        >\r\n\r\n                            <span class=\"bkc-contact-detail-icon\">\r\n\r\n                                <svg\r\n                                    viewBox=\"0 0 24 24\"\r\n                                    fill=\"none\"\r\n                                    xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n                                >\r\n\r\n                                    <path\r\n                                        d=\"M3 5.5H21V18.5H3V5.5Z\"\r\n                                        stroke=\"currentColor\"\r\n                                        stroke-width=\"1.5\"\r\n                                    \/>\r\n\r\n                                    <path\r\n                                        d=\"M3 6L12 13L21 6\"\r\n                                        stroke=\"currentColor\"\r\n                                        stroke-width=\"1.5\"\r\n                                    \/>\r\n\r\n                                <\/svg>\r\n\r\n                            <\/span>\r\n\r\n                            <span class=\"bkc-contact-detail-text\">\r\n\r\n                                <span class=\"bkc-contact-detail-label\">\r\n                                    Email\r\n                                <\/span>\r\n\r\n                                <span class=\"bkc-contact-detail-value\">\r\n                                    hello@brooklyncookies.com\r\n                                <\/span>\r\n\r\n                            <\/span>\r\n\r\n                        <\/a>\r\n\r\n\r\n                        <!-- PHONE -->\r\n\r\n                        <a\r\n                            href=\"tel:+17185550123\"\r\n                            class=\"bkc-contact-detail\"\r\n                            style=\"text-decoration:none;\"\r\n                        >\r\n\r\n                            <span class=\"bkc-contact-detail-icon\">\r\n\r\n                                <svg\r\n                                    viewBox=\"0 0 24 24\"\r\n                                    fill=\"none\"\r\n                                    xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n                                >\r\n\r\n                                    <path\r\n                                        d=\"M7 3.5L10 3L11.5 7L9.5 8.5C10.4 10.6 12 12.6 15.5 14.5L17 12.5L21 14L20.5 17C20.3 18.4 19.1 19.5 17.7 19.5C9.9 19.2 4.8 14.1 4.5 6.3C4.5 4.9 5.6 3.7 7 3.5Z\"\r\n                                        stroke=\"currentColor\"\r\n                                        stroke-width=\"1.5\"\r\n                                        stroke-linejoin=\"round\"\r\n                                    \/>\r\n\r\n                                <\/svg>\r\n\r\n                            <\/span>\r\n\r\n                            <span class=\"bkc-contact-detail-text\">\r\n\r\n                                <span class=\"bkc-contact-detail-label\">\r\n                                    Phone\r\n                                <\/span>\r\n\r\n                                <span class=\"bkc-contact-detail-value\">\r\n                                    +1 (718) 555-0123\r\n                                <\/span>\r\n\r\n                            <\/span>\r\n\r\n                        <\/a>\r\n\r\n\r\n                        <!-- LOCATION -->\r\n\r\n                        <div class=\"bkc-contact-detail\">\r\n\r\n                            <span class=\"bkc-contact-detail-icon\">\r\n\r\n                                <svg\r\n                                    viewBox=\"0 0 24 24\"\r\n                                    fill=\"none\"\r\n                                    xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n                                >\r\n\r\n                                    <path\r\n                                        d=\"M12 21C15.5 16.8 18 13.6 18 9.8C18 6.5 15.3 4 12 4C8.7 4 6 6.5 6 9.8C6 13.6 8.5 16.8 12 21Z\"\r\n                                        stroke=\"currentColor\"\r\n                                        stroke-width=\"1.5\"\r\n                                    \/>\r\n\r\n                                    <circle\r\n                                        cx=\"12\"\r\n                                        cy=\"9.5\"\r\n                                        r=\"2\"\r\n                                        stroke=\"currentColor\"\r\n                                        stroke-width=\"1.5\"\r\n                                    \/>\r\n\r\n                                <\/svg>\r\n\r\n                            <\/span>\r\n\r\n                            <span class=\"bkc-contact-detail-text\">\r\n\r\n                                <span class=\"bkc-contact-detail-label\">\r\n                                    Find Us\r\n                                <\/span>\r\n\r\n                                <span class=\"bkc-contact-detail-value\">\r\n                                    Brooklyn, New York\r\n                                <\/span>\r\n\r\n                            <\/span>\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <!-- LEFT BOTTOM -->\r\n\r\n                <div class=\"bkc-contact-info-bottom\">\r\n\r\n                    <div class=\"bkc-contact-rule\"><\/div>\r\n\r\n                    <div class=\"bkc-contact-note\">\r\n\r\n                        <strong>\r\n                            We'd love to hear from you.\r\n                        <\/strong>\r\n\r\n                        Questions, ideas, cookie cravings \u2014\r\n                        send them our way.\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/aside>\r\n\r\n\r\n            <!-- =================================================\r\n                 RIGHT CONTACT FORM \u2014 DARK THEME (#21130D)\r\n            ================================================== -->\r\n\r\n            <div class=\"bkc-contact-form-card\">\r\n\r\n                <h3 class=\"bkc-contact-form-heading\">\r\n                    Tell us <em>what's on your mind.<\/em>\r\n                <\/h3>\r\n\r\n                <p class=\"bkc-contact-form-subtitle\">\r\n                    Fill out the form below and our team\r\n                    will get back to you shortly.\r\n                <\/p>\r\n\r\n\r\n                <form\r\n                    class=\"bkc-contact-form\"\r\n                    id=\"bkcContactForm\"\r\n                >\r\n\r\n\r\n                    <!-- NAME -->\r\n\r\n                    <div class=\"bkc-contact-field\">\r\n\r\n                        <label for=\"bkc-name\">\r\n                            Your Name\r\n                        <\/label>\r\n\r\n                        <input\r\n                            id=\"bkc-name\"\r\n                            type=\"text\"\r\n                            name=\"name\"\r\n                            placeholder=\"Your full name\"\r\n                            autocomplete=\"name\"\r\n                            required\r\n                        >\r\n\r\n                    <\/div>\r\n\r\n\r\n                    <!-- EMAIL -->\r\n\r\n                    <div class=\"bkc-contact-field\">\r\n\r\n                        <label for=\"bkc-email\">\r\n                            Email Address\r\n                        <\/label>\r\n\r\n                        <input\r\n                            id=\"bkc-email\"\r\n                            type=\"email\"\r\n                            name=\"email\"\r\n                            placeholder=\"you@example.com\"\r\n                            autocomplete=\"email\"\r\n                            required\r\n                        >\r\n\r\n                    <\/div>\r\n\r\n\r\n                    <!-- PHONE -->\r\n\r\n                    <div class=\"bkc-contact-field\">\r\n\r\n                        <label for=\"bkc-phone\">\r\n                            Phone\r\n                        <\/label>\r\n\r\n                        <input\r\n                            id=\"bkc-phone\"\r\n                            type=\"tel\"\r\n                            name=\"phone\"\r\n                            placeholder=\"Your phone number\"\r\n                            autocomplete=\"tel\"\r\n                        >\r\n\r\n                    <\/div>\r\n\r\n\r\n                    <!-- SUBJECT -->\r\n\r\n                    <div class=\"bkc-contact-field\">\r\n\r\n                        <label for=\"bkc-subject\">\r\n                            Subject\r\n                        <\/label>\r\n\r\n                        <select\r\n                            id=\"bkc-subject\"\r\n                            name=\"subject\"\r\n                        >\r\n\r\n                            <option value=\"\">\r\n                                Select a topic\r\n                            <\/option>\r\n\r\n                            <option value=\"order\">\r\n                                Order Question\r\n                            <\/option>\r\n\r\n                            <option value=\"custom\">\r\n                                Custom Order\r\n                            <\/option>\r\n\r\n                            <option value=\"general\">\r\n                                General Question\r\n                            <\/option>\r\n\r\n                            <option value=\"other\">\r\n                                Something Else\r\n                            <\/option>\r\n\r\n                        <\/select>\r\n\r\n                    <\/div>\r\n\r\n\r\n                    <!-- MESSAGE -->\r\n\r\n                    <div class=\"bkc-contact-field full\">\r\n\r\n                        <label for=\"bkc-message\">\r\n                            Message\r\n                        <\/label>\r\n\r\n                        <textarea\r\n                            id=\"bkc-message\"\r\n                            name=\"message\"\r\n                            placeholder=\"Tell us how we can help...\"\r\n                            required\r\n                        ><\/textarea>\r\n\r\n                    <\/div>\r\n\r\n\r\n                    <!-- STATUS -->\r\n\r\n                    <div\r\n                        class=\"bkc-contact-status\"\r\n                        id=\"bkcContactStatus\"\r\n                    >\r\n                        Thanks for reaching out! Your message\r\n                        has been prepared successfully.\r\n                    <\/div>\r\n\r\n\r\n                    <!-- SUBMIT -->\r\n\r\n                    <div class=\"bkc-contact-submit-area\">\r\n\r\n                        <p class=\"bkc-contact-submit-note\">\r\n                            By sending this message, you're giving\r\n                            us the details we need to get back to you.\r\n                        <\/p>\r\n\r\n                        <button\r\n                            type=\"submit\"\r\n                            class=\"bkc-contact-button\"\r\n                        >\r\n\r\n                            <span>\r\n                                Send Message\r\n                            <\/span>\r\n\r\n                            <svg\r\n                                viewBox=\"0 0 24 24\"\r\n                                fill=\"none\"\r\n                                xmlns=\"http:\/\/www.w3.org\/2000\/svg\" \r\n                            > \r\n \r\n                                <path \r\n                                    d=\"M5 12H19\" \r\n                                    stroke=\"currentColor\" \r\n                                    stroke-width=\"1.5\" \r\n                                    stroke-linecap=\"round\" \r\n                                \/> \r\n \r\n                                <path \r\n                                    d=\"M13 6L19 12L13 18\" \r\n                                    stroke=\"currentColor\" \r\n                                    stroke-width=\"1.5\" \r\n                                    stroke-linecap=\"round\" \r\n                                    stroke-linejoin=\"round\" \r\n                                \/> \r\n \r\n                            <\/svg> \r\n\r\n                        <\/button> \r\n\r\n                    <\/div> \r\n\r\n                <\/form> \r\n\r\n            <\/div> \r\n\r\n        <\/div> \r\n\r\n\r\n        <!-- ================================================= \r\n             BOTTOM \r\n        ================================================== --> \r\n\r\n        <div class=\"bkc-contact-bottom\"> \r\n\r\n            <span class=\"bkc-contact-bottom-line\"><\/span> \r\n\r\n            Fresh ideas \u00b7 Warm conversations \u00b7 Sweet moments \r\n\r\n            <span class=\"bkc-contact-bottom-line\"><\/span> \r\n\r\n        <\/div> \r\n\r\n    <\/div> \r\n\r\n<\/section> \r\n\r\n\r\n<script> \r\n(function () { \r\n\r\n    function initBrooklynContact() { \r\n\r\n        const section = \r\n            document.getElementById(\"bkcContact\"); \r\n\r\n        if ( \r\n            !section || \r\n            section.dataset.initialized === \"true\" \r\n        ) { \r\n            return; \r\n        } \r\n\r\n        section.dataset.initialized = \"true\"; \r\n\r\n\r\n        \/* ===================================================== \r\n           SCROLL REVEAL \r\n        ===================================================== *\/ \r\n\r\n        if (\"IntersectionObserver\" in window) { \r\n\r\n            const observer = \r\n                new IntersectionObserver( \r\n                    function (entries) { \r\n\r\n                        entries.forEach(function (entry) { \r\n\r\n                            if (entry.isIntersecting) { \r\n\r\n                                section.classList.add( \r\n                                    \"is-visible\" \r\n                                ); \r\n\r\n                                observer.unobserve(section); \r\n\r\n                            } \r\n\r\n                        }); \r\n\r\n                    }, \r\n                    { \r\n                        threshold: 0.10 \r\n                    } \r\n                ); \r\n\r\n            observer.observe(section); \r\n\r\n        } else { \r\n\r\n            section.classList.add(\"is-visible\"); \r\n\r\n        } \r\n\r\n\r\n        \/* ===================================================== \r\n           CONTACT FORM \r\n           Demo-safe submit behavior \r\n        ===================================================== *\/ \r\n\r\n        const form = \r\n            section.querySelector(\"#bkcContactForm\"); \r\n\r\n        const status = \r\n            section.querySelector(\"#bkcContactStatus\"); \r\n\r\n        if (!form) return; \r\n\r\n\r\n        form.addEventListener( \r\n            \"submit\", \r\n            function (event) { \r\n\r\n                event.preventDefault(); \r\n\r\n                if (!form.checkValidity()) { \r\n\r\n                    form.reportValidity(); \r\n\r\n                    return; \r\n\r\n                } \r\n\r\n                if (status) { \r\n\r\n                    status.classList.remove(\"show\"); \r\n\r\n                    void status.offsetWidth; \r\n\r\n                    status.classList.add(\"show\"); \r\n\r\n                } \r\n\r\n                const button = \r\n                    form.querySelector( \r\n                        \".bkc-contact-button\" \r\n                    ); \r\n\r\n                if (button) { \r\n\r\n                    const buttonText = \r\n                        button.querySelector(\"span\"); \r\n\r\n                    if (buttonText) { \r\n\r\n                        const originalText = \r\n                            buttonText.textContent; \r\n\r\n                        buttonText.textContent = \r\n                            \"Message Ready\"; \r\n\r\n                        setTimeout( \r\n                            function () { \r\n\r\n                                buttonText.textContent = \r\n                                    originalText; \r\n\r\n                            }, \r\n                            2500 \r\n                        ); \r\n\r\n                    } \r\n\r\n                } \r\n\r\n            } \r\n        ); \r\n\r\n    } \r\n\r\n\r\n    \/* ========================================================= \r\n       NORMAL PAGE LOAD \r\n    ========================================================= *\/ \r\n\r\n    if (document.readyState === \"loading\") { \r\n\r\n        document.addEventListener( \r\n            \"DOMContentLoaded\", \r\n            initBrooklynContact \r\n        ); \r\n\r\n    } else { \r\n\r\n        initBrooklynContact(); \r\n\r\n    } \r\n\r\n\r\n    \/* ========================================================= \r\n       ELEMENTOR SUPPORT \r\n    ========================================================= *\/ \r\n\r\n    document.addEventListener( \r\n        \"elementor\/frontend\/init\", \r\n        function () { \r\n\r\n            setTimeout( \r\n                initBrooklynContact, \r\n                100 \r\n            ); \r\n\r\n        } \r\n    ); \r\n\r\n})(); \r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>B Brooklyn Cookies Freshly Baked Today Freshly Baked \u2022 Locally Loved Baked Fresh, Made to Crave. Handcrafted cookies baked fresh [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cookieswp2.mystartupcrew.com\/index.php\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cookieswp2.mystartupcrew.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cookieswp2.mystartupcrew.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cookieswp2.mystartupcrew.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cookieswp2.mystartupcrew.com\/index.php\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":361,"href":"https:\/\/cookieswp2.mystartupcrew.com\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":420,"href":"https:\/\/cookieswp2.mystartupcrew.com\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions\/420"}],"wp:attachment":[{"href":"https:\/\/cookieswp2.mystartupcrew.com\/index.php\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}