/*
Theme Name: BBQ Marketer
Theme URI: https://bbqmarketer.com
Description: Custom neobrutalist landing theme for BBQ Marketer (Direction 1A — "The Roadside Shout"). Ported from the Claude Design mockup. Bangers + Barlow, hard offset shadows, yellow/black/red.
Author: Snazzy Solutions
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
Text Domain: bbq-marketer
*/

/* =========================================================================
   TOKENS
   ========================================================================= */
:root {
    --cream:        #FAF7F0;
    --black:        #000000;
    --ink:          #171310;   /* near-black text / dark bands */
    --yellow:       #F9E80F;
    --red:          #D9060A;
    --muted:        #443E36;   /* body copy on light */
    --muted-light:  #C9C2B8;   /* body copy on dark */
    --pink:         #FFD9DA;
    --pink-2:       #FFE3E4;
    --foot-muted:   #8F877C;
    --foot-border:  #2B2620;

    --display: 'Bangers', cursive;
    --body:    'Barlow', -apple-system, BlinkMacSystemFont, sans-serif;
    --cond:    'Barlow Condensed', 'Barlow', sans-serif;

    --wrap: 1240px;

    /* ---------------------------------------------------------------------
       CORNER RADIUS MASTER TOGGLE
       Every border-radius (buttons, cards, inputs, badges, etc.) is
       multiplied by this value. 0 = sharp square corners (current), 1 =
       restore the original rounded look. To bring the rounded corners
       back, just change this ONE value from 0 to 1.
       (Circular elements using border-radius: 50% are intentionally left
       round and are NOT controlled by this toggle.)
       --------------------------------------------------------------------- */
    --bbq-radius: 0;
}

/* =========================================================================
   RESET / BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }   /* clip, not hidden — keeps sticky + momentum */

body {
    margin: 0;
    font-family: var(--body);
    color: var(--ink);
    background: var(--cream);
    -webkit-font-smoothing: antialiased;
    scroll-padding-top: 90px;
}

img { max-width: 100%; }
a { color: inherit; }

/* sticky header sits below the WP admin bar when logged in */
.admin-bar .bbq-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .bbq-header { top: 46px; } }

.bbq-wrap { max-width: var(--wrap); margin: 0 auto; padding-left: 40px; padding-right: 40px; }

/* =========================================================================
   SHARED — buttons, eyebrows, section heads
   ========================================================================= */
.bbq-btn {
    display: inline-block;
    font-family: var(--display);
    font-size: 28px;
    letter-spacing: 0.05em;
    text-decoration: none;
    padding: 14px 30px;
    border: 3px solid var(--black);
    border-radius: calc(12px * var(--bbq-radius));
    transition: transform .08s ease, box-shadow .08s ease;
}
.bbq-btn--black  { color: var(--yellow); background: var(--black); box-shadow: 5px 5px 0 var(--red); }
.bbq-btn--black:hover  { box-shadow: 2px 2px 0 var(--red); transform: translate(3px, 3px); }
.bbq-btn--cream  { color: var(--black); background: var(--cream); box-shadow: 5px 5px 0 var(--black); }
.bbq-btn--cream:hover  { box-shadow: 2px 2px 0 var(--black); transform: translate(3px, 3px); }
.bbq-btn--yellow { color: var(--black); background: var(--yellow); box-shadow: 5px 5px 0 var(--black); }
.bbq-btn--yellow:hover { box-shadow: 2px 2px 0 var(--black); transform: translate(3px, 3px); }

.bbq-eyebrow {
    font-family: var(--cond);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.bbq-eyebrow--red    { color: var(--red); }
.bbq-eyebrow--yellow { color: var(--yellow); }

.bbq-section-head { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.bbq-section-head--center { align-items: center; text-align: center; }

.bbq-h2 {
    font-family: var(--display);
    font-size: clamp(40px, 6vw, 72px);
    line-height: 1;
    margin: 0;
    letter-spacing: 0.02em;
    color: var(--ink);
}
.bbq-h2--cream { color: var(--cream); }

.bbq-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

.bbq-badge {
    font-family: var(--cond);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: var(--black);
    color: var(--yellow);
    padding: 6px 14px;
    transform: rotate(-2deg);
}

/* =========================================================================
   TOP BAR
   ========================================================================= */
.bbq-topbar { background: var(--black); color: var(--cream); }
.bbq-topbar-inner {
    display: flex; align-items: center; justify-content: center;
    gap: 18px; padding: 9px 24px;
}
.bbq-topbar-line {
    font-family: var(--cond); font-weight: 600; font-size: 16px;
    letter-spacing: 0.06em; text-transform: uppercase;
}
.bbq-topbar-call {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--yellow); color: var(--black); text-decoration: none;
    font-family: var(--cond); font-weight: 700; font-size: 16px; letter-spacing: 0.04em;
    padding: 4px 14px; border-radius: calc(12px * var(--bbq-radius)); border: 2px solid var(--black);
    transition: background .1s ease;
}
.bbq-topbar-call:hover { background: var(--cream); }
.bbq-topbar-call svg { display: block; }

/* =========================================================================
   STICKY HEADER
   ========================================================================= */
.bbq-header {
    position: sticky; top: 0; z-index: 50;
    background: var(--cream); border-bottom: 4px solid var(--black);
}
.bbq-header-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; padding: 14px 40px; max-width: 1440px; margin: 0 auto;
}
.bbq-brand { display: block; line-height: 0; }
.bbq-brand img, .bbq-brand .custom-logo { height: 46px; width: auto; display: block; }

.bbq-nav { display: flex; align-items: center; gap: 28px; }
.bbq-nav a {
    font-family: var(--cond); font-weight: 700; font-size: 18px;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
    text-decoration: none; border-bottom: 3px solid transparent; padding-bottom: 2px;
}
.bbq-nav a:hover { border-bottom-color: var(--red); }

.bbq-holler {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--cond); font-weight: 700; font-size: 19px;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--cream); background: var(--red); text-decoration: none;
    padding: 12px 24px; border: 3px solid var(--black); border-radius: calc(12px * var(--bbq-radius));
    box-shadow: 4px 4px 0 var(--black);
    transition: transform .08s ease, box-shadow .08s ease, background .1s ease, color .1s ease;
    white-space: nowrap;
}
.bbq-holler:hover  { background: var(--black); color: var(--yellow); }
.bbq-holler:active { box-shadow: 0 0 0 var(--black); transform: translate(4px, 4px); }

/* hamburger + mobile panel (hidden on desktop) */
.bbq-hamburger {
    display: none; background: var(--yellow); border: 3px solid var(--black);
    border-radius: calc(10px * var(--bbq-radius)); width: 46px; height: 46px; padding: 8px; cursor: pointer;
    box-shadow: 3px 3px 0 var(--black);
}
.bbq-hamburger svg { width: 100%; height: 100%; stroke: var(--black); }
.bbq-mobile-panel { display: none; flex-direction: column; border-top: 3px solid var(--black); background: var(--cream); }
.bbq-mobile-panel a {
    font-family: var(--cond); font-weight: 700; font-size: 19px;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
    text-decoration: none; padding: 14px 24px; border-bottom: 2px solid rgba(0,0,0,.1);
}
.bbq-mobile-panel .bbq-mobile-call { background: var(--red); color: var(--cream); }
.bbq-mobile-panel.is-open { display: flex; }

/* =========================================================================
   HERO
   ========================================================================= */
.bbq-hero {
    background-color: var(--yellow);
    background-image: radial-gradient(rgba(0,0,0,0.13) 1.6px, transparent 1.7px);
    background-size: 22px 22px;
    border-bottom: 4px solid var(--black); overflow: hidden;
}
.bbq-hero-inner {
    max-width: var(--wrap); margin: 0 auto;
    display: grid; grid-template-columns: 1.25fr 1fr; align-items: center;
    gap: 40px; padding: 72px 40px 64px;
}
.bbq-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.bbq-hero-title {
    font-family: var(--display);
    font-size: clamp(48px, 7vw, 88px);
    line-height: 0.95; margin: 0; color: var(--black); letter-spacing: 0.02em;
    text-shadow: 5px 5px 0 var(--red);
}
.bbq-hero-title span { color: var(--red); text-shadow: 5px 5px 0 var(--black); }
.bbq-hero-lede { font-size: 22px; font-weight: 500; line-height: 1.45; margin: 0; max-width: 46ch; }
.bbq-hero-cta { display: flex; align-items: center; gap: 18px; margin-top: 8px; flex-wrap: wrap; }

.bbq-hero-art { position: relative; display: flex; justify-content: center; }
.bbq-hero-mascot { width: 380px; max-width: 80%; display: block; animation: bbqBob 4s ease-in-out infinite; }
.bbq-starburst {
    position: absolute; top: -12px; right: 8px;
    width: 170px; height: 170px; display: flex; align-items: center; justify-content: center;
    text-align: center; text-decoration: none; transform: rotate(10deg);
    filter: drop-shadow(4px 4px 0 rgba(0,0,0,.9));
}
.bbq-starburst svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bbq-starburst span {
    position: relative; font-family: var(--display); font-size: 24px; line-height: 1;
    color: var(--cream); width: 110px;
}

/* =========================================================================
   TICKER
   ========================================================================= */
.bbq-ticker { background: var(--black); border-bottom: 4px solid var(--black); overflow: hidden; padding: 14px 0; }
.bbq-ticker-track { display: flex; width: max-content; animation: bbqTicker 22s linear infinite; }
.bbq-ticker-run { display: flex; align-items: center; gap: 28px; padding-right: 28px; }
.bbq-ticker-item {
    font-family: var(--display); font-size: 26px; letter-spacing: 0.08em;
    color: var(--yellow); white-space: nowrap;
}
.bbq-ticker-star { flex-shrink: 0; }

/* =========================================================================
   PITCH DIVIDER
   ========================================================================= */
.bbq-pitch { background: var(--ink); border-bottom: 4px solid var(--black); padding: 88px 40px; text-align: center; }
.bbq-pitch-inner { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; align-items: center; }
.bbq-pitch-inner h2 {
    font-family: var(--display); font-size: clamp(40px, 6vw, 72px); line-height: 1;
    margin: 0; color: var(--cream); letter-spacing: 0.03em;
}
.bbq-pitch-inner h2 span { color: var(--yellow); }
.bbq-pitch-inner p { color: var(--muted-light); font-size: 20px; font-weight: 500; line-height: 1.5; margin: 0; max-width: 56ch; }

/* =========================================================================
   SERVICES
   ========================================================================= */
.bbq-services { background: var(--cream); padding: 88px 40px; border-bottom: 4px solid var(--black); }
.bbq-services > .bbq-wrap { padding: 0; display: flex; flex-direction: column; gap: 48px; }

.bbq-svc-card {
    background: #FFFFFF; border: 3px solid var(--black); border-radius: calc(14px * var(--bbq-radius));
    box-shadow: 6px 6px 0 var(--black); padding: 28px;
    display: flex; flex-direction: column; gap: 14px;
    transition: transform .1s ease, box-shadow .1s ease; text-decoration: none;
}
.bbq-svc-card:hover { box-shadow: 8px 8px 0 var(--red); transform: translate(-2px, -2px); }
.bbq-svc-ico {
    width: 64px; height: 64px; background: var(--yellow); border: 3px solid var(--black);
    border-radius: calc(12px * var(--bbq-radius)); display: flex; align-items: center; justify-content: center;
}
.bbq-svc-card h3 { font-family: var(--display); font-size: 32px; margin: 0; letter-spacing: 0.03em; color: var(--ink); }
.bbq-svc-card p { font-size: 17px; font-weight: 500; line-height: 1.5; margin: 0; color: var(--muted); }

.bbq-svc-card--cta { background: var(--red); justify-content: center; align-items: flex-start; gap: 12px; }
.bbq-svc-card--cta:hover { box-shadow: 8px 8px 0 var(--black); transform: translate(-2px, -2px); }
.bbq-svc-card--cta h3 { font-size: 34px; color: var(--cream); }
.bbq-svc-card--cta p { font-weight: 600; color: var(--pink); }
.bbq-svc-cta-btn {
    font-family: var(--display); font-size: 24px; letter-spacing: 0.05em; color: var(--black);
    background: var(--yellow); padding: 8px 20px; border: 3px solid var(--black);
    border-radius: calc(12px * var(--bbq-radius)); box-shadow: 4px 4px 0 var(--black); margin-top: 6px;
}

/* =========================================================================
   WORK / PROOF
   ========================================================================= */
.bbq-work { background: var(--yellow); padding: 88px 40px; border-bottom: 4px solid var(--black); }
.bbq-work > .bbq-wrap { padding: 0; display: flex; flex-direction: column; gap: 48px; }
.bbq-work .bbq-grid-3 { gap: 32px; }

.bbq-work-card {
    display: flex; flex-direction: column; text-decoration: none; color: inherit;
    transition: transform .1s ease;
}
.bbq-work-card:hover { transform: translate(-2px, -2px); }
.bbq-work-card:hover .bbq-work-shot, .bbq-work-card:hover .bbq-work-body { box-shadow: 8px 8px 0 var(--red); }
.bbq-work-shot {
    border: 3px solid var(--black); border-radius: calc(14px * var(--bbq-radius)) calc(14px * var(--bbq-radius)) 0 0; overflow: hidden;
    box-shadow: 6px 6px 0 var(--black); background: var(--cream); line-height: 0;
    transition: box-shadow .1s ease;
}
.bbq-work-shot img { width: 100%; height: auto; display: block; }
.bbq-work-body {
    border: 3px solid var(--black); border-top: none; border-radius: 0 0 calc(14px * var(--bbq-radius)) calc(14px * var(--bbq-radius));
    box-shadow: 6px 6px 0 var(--black); background: var(--cream);
    padding: 18px 22px; display: flex; flex-direction: column; gap: 4px;
    transition: box-shadow .1s ease;
}
.bbq-work-name { font-family: var(--display); font-size: 26px; letter-spacing: 0.03em; }
.bbq-work-result { display: flex; align-items: center; gap: 8px; }
.bbq-work-result span {
    font-family: var(--cond); font-weight: 700; font-size: 20px;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--red);
}

/* =========================================================================
   TESTIMONIALS
   ========================================================================= */
.bbq-testi { background: var(--ink); padding: 88px 40px; border-bottom: 4px solid var(--black); }
.bbq-testi > .bbq-wrap { padding: 0; display: flex; flex-direction: column; gap: 48px; }
.bbq-testi-head {
    font-family: var(--display); font-size: clamp(38px, 5.5vw, 64px); line-height: 1;
    margin: 0; letter-spacing: 0.02em; color: var(--yellow); text-align: center;
}
.bbq-quote {
    margin: 0; background: var(--cream); border: 3px solid var(--black); border-radius: calc(14px * var(--bbq-radius));
    box-shadow: 6px 6px 0 var(--red); padding: 28px;
    display: flex; flex-direction: column; gap: 16px; transform: rotate(var(--tilt, 0deg));
}
.bbq-quote-mark { font-family: var(--display); font-size: 56px; line-height: 0.5; color: var(--red); margin-top: 10px; }
.bbq-quote blockquote { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.55; color: var(--ink); }
.bbq-quote figcaption { display: flex; flex-direction: column; gap: 2px; }
.bbq-quote-who { font-family: var(--cond); font-weight: 700; font-size: 18px; letter-spacing: 0.08em; text-transform: uppercase; }
.bbq-quote-biz { font-family: var(--cond); font-weight: 600; font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); }

/* =========================================================================
   PRICING
   ========================================================================= */
.bbq-pricing { background: var(--cream); padding: 88px 40px; border-bottom: 4px solid var(--black); }
.bbq-pricing > .bbq-wrap { padding: 0; display: flex; flex-direction: column; gap: 48px; }
.bbq-pricing-lede { font-size: 20px; font-weight: 500; line-height: 1.5; margin: 0; max-width: 62ch; color: var(--muted); }

/* Step 1 — the website card (horizontal) */
.bbq-step1 {
    position: relative; background: #FFFFFF; border: 3px solid var(--black); border-radius: calc(14px * var(--bbq-radius));
    box-shadow: 6px 6px 0 var(--black); padding: 32px;
    display: grid; grid-template-columns: 1fr 1.3fr; gap: 36px; align-items: center;
}
.bbq-step1-badge {
    position: absolute; top: -16px; left: 24px; font-family: var(--cond); font-weight: 700; font-size: 15px;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream); background: var(--black);
    padding: 5px 14px; border-radius: calc(10px * var(--bbq-radius));
}
.bbq-step1-main { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.bbq-step1-head { display: flex; flex-direction: column; gap: 4px; }
.bbq-step1-name { font-family: var(--display); font-size: 44px; margin: 0; letter-spacing: 0.03em; }
.bbq-step1-sub { font-family: var(--cond); font-weight: 600; font-size: 18px; letter-spacing: 0.04em; color: var(--muted); }
.bbq-step1-price { display: flex; align-items: baseline; gap: 8px; }
.bbq-step1-amt { font-family: var(--display); font-size: 52px; letter-spacing: 0.02em; }
.bbq-step1-note { font-family: var(--cond); font-weight: 600; font-size: 17px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.bbq-step1-btn {
    font-family: var(--display); font-size: 24px; letter-spacing: 0.05em; color: var(--black);
    background: var(--yellow); text-decoration: none; padding: 12px 28px; border: 3px solid var(--black);
    border-radius: calc(12px * var(--bbq-radius)); box-shadow: 4px 4px 0 var(--black); display: inline-block; margin-top: 4px;
    transition: transform .08s ease, box-shadow .08s ease;
}
.bbq-step1-btn:hover { box-shadow: 2px 2px 0 var(--black); transform: translate(2px, 2px); }
.bbq-step1-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.bbq-step1-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.bbq-step1-list li svg { flex-shrink: 0; margin-top: 3px; }

/* Plus divider */
.bbq-plus { display: flex; align-items: center; gap: 20px; }
.bbq-plus-line { flex: 1; height: 3px; background: var(--black); border-radius: calc(2px * var(--bbq-radius)); }
.bbq-plus-circle {
    width: 64px; height: 64px; flex-shrink: 0; background: var(--red); border: 3px solid var(--black);
    border-radius: 50%; box-shadow: 4px 4px 0 var(--black); display: flex; align-items: center;
    justify-content: center; font-family: var(--display); font-size: 46px; line-height: 1; color: var(--cream); padding-bottom: 6px;
}

/* Step 2 — marketing plans */
.bbq-step2-head { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.bbq-step2-title { font-family: var(--display); font-size: clamp(36px, 5vw, 48px); line-height: 1; margin: 0; letter-spacing: 0.02em; }

.bbq-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.bbq-plan {
    position: relative; background: #FFFFFF; border: 3px solid var(--black); border-radius: calc(14px * var(--bbq-radius));
    box-shadow: 6px 6px 0 var(--black); padding: 30px; display: flex; flex-direction: column; gap: 16px;
}
.bbq-plan--pop  { box-shadow: 6px 6px 0 var(--red); }
.bbq-plan--dark { background: var(--ink); box-shadow: 6px 6px 0 var(--red); }
.bbq-plan-badge {
    position: absolute; top: -18px; right: 16px; font-family: var(--display); font-size: 18px;
    letter-spacing: 0.05em; color: var(--black); background: var(--yellow); padding: 5px 14px;
    border: 3px solid var(--black); border-radius: calc(12px * var(--bbq-radius)); transform: rotate(3deg);
}
.bbq-plan-head { display: flex; flex-direction: column; gap: 4px; }
.bbq-plan-kicker { font-family: var(--cond); font-weight: 700; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); }
.bbq-plan--dark .bbq-plan-kicker { color: var(--yellow); }
.bbq-plan-name { font-family: var(--display); font-size: 34px; margin: 0; letter-spacing: 0.03em; }
.bbq-plan--dark .bbq-plan-name { color: var(--cream); }
.bbq-plan-sub { font-family: var(--cond); font-weight: 600; font-size: 16px; letter-spacing: 0.04em; color: var(--muted); }
.bbq-plan--dark .bbq-plan-sub { color: var(--muted-light); }
.bbq-plan-price { display: flex; align-items: baseline; gap: 6px; }
.bbq-plan-amt { font-family: var(--display); font-size: 40px; letter-spacing: 0.02em; }
.bbq-plan--dark .bbq-plan-amt { color: var(--yellow); }
.bbq-plan-per { font-family: var(--cond); font-weight: 600; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.bbq-plan--dark .bbq-plan-per { color: var(--muted-light); }
.bbq-plan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bbq-plan-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.bbq-plan--dark .bbq-plan-list li { color: var(--cream); }
.bbq-plan-list li svg { flex-shrink: 0; margin-top: 3px; }
.bbq-plan-btn {
    margin-top: auto; text-align: center; font-family: var(--display); font-size: 22px;
    letter-spacing: 0.05em; color: var(--black); background: var(--cream); text-decoration: none;
    padding: 11px 22px; border: 3px solid var(--black); border-radius: calc(12px * var(--bbq-radius));
    box-shadow: 4px 4px 0 var(--black); display: block;
    transition: transform .08s ease, box-shadow .08s ease;
}
.bbq-plan-btn:hover { box-shadow: 2px 2px 0 var(--black); transform: translate(2px, 2px); }
.bbq-plan-btn--y  { background: var(--yellow); }
.bbq-plan-btn--yr { background: var(--yellow); box-shadow: 4px 4px 0 var(--red); }
.bbq-plan-btn--yr:hover { box-shadow: 2px 2px 0 var(--red); transform: translate(2px, 2px); }

.bbq-pricing-note {
    background: var(--yellow); border: 3px solid var(--black); border-radius: calc(14px * var(--bbq-radius));
    box-shadow: 6px 6px 0 var(--black); padding: 24px 32px; display: flex; align-items: center; gap: 20px;
}
.bbq-pricing-note svg { flex-shrink: 0; }
.bbq-pricing-note p { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.5; color: var(--ink); }
.bbq-pricing-note strong { font-weight: 800; }

/* =========================================================================
   FAQ
   ========================================================================= */
.bbq-faq { background: var(--ink); padding: 88px 40px; border-bottom: 4px solid var(--black); }
.bbq-faq-inner { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.bbq-faq-list { display: flex; flex-direction: column; gap: 16px; }
.bbq-faq-item {
    background: var(--cream); border: 3px solid var(--black); border-radius: calc(14px * var(--bbq-radius));
    box-shadow: 5px 5px 0 var(--red); overflow: hidden;
}
.bbq-faq-item summary {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer;
    padding: 20px 26px; font-family: var(--display); font-size: 26px; letter-spacing: 0.03em;
    color: var(--ink); list-style: none;
}
.bbq-faq-item summary::-webkit-details-marker { display: none; }
.bbq-faq-plus { font-family: var(--display); font-size: 30px; color: var(--red); flex-shrink: 0; transition: transform .15s ease; }
.bbq-faq-item[open] .bbq-faq-plus { transform: rotate(45deg); }
.bbq-faq-item p { margin: 0; padding: 0 26px 22px; font-size: 18px; font-weight: 500; line-height: 1.55; color: var(--muted); }

/* =========================================================================
   FREE AUDIT
   ========================================================================= */
.bbq-audit { background: var(--red); padding: 88px 40px; border-bottom: 4px solid var(--black); }
.bbq-audit-inner { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; }
.bbq-audit-copy { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.bbq-audit-title {
    font-family: var(--display); font-size: clamp(46px, 6.5vw, 76px); line-height: 0.95; margin: 0;
    letter-spacing: 0.02em; color: var(--cream); text-shadow: 5px 5px 0 var(--black);
}
.bbq-audit-copy p { font-size: 20px; font-weight: 500; line-height: 1.55; margin: 0; max-width: 50ch; color: var(--pink-2); }
.bbq-audit-copy .bbq-btn { margin-top: 8px; }

.bbq-audit-card {
    background: var(--cream); border: 3px solid var(--black); border-radius: calc(14px * var(--bbq-radius));
    box-shadow: 8px 8px 0 var(--black); padding: 32px; display: flex; flex-direction: column; gap: 18px;
    transform: rotate(1deg);
}
.bbq-audit-card h3 { font-family: var(--display); font-size: 30px; margin: 0; letter-spacing: 0.03em; }
.bbq-audit-item { display: flex; align-items: flex-start; gap: 14px; }
.bbq-audit-num {
    width: 40px; height: 40px; flex-shrink: 0; background: var(--yellow); border: 3px solid var(--black);
    border-radius: calc(12px * var(--bbq-radius)); display: flex; align-items: center; justify-content: center;
    font-family: var(--display); font-size: 22px;
}
.bbq-audit-text { display: flex; flex-direction: column; gap: 2px; }
.bbq-audit-item-title { font-family: var(--cond); font-weight: 700; font-size: 19px; letter-spacing: 0.06em; text-transform: uppercase; }
.bbq-audit-item-copy { font-size: 16px; font-weight: 500; line-height: 1.45; color: var(--muted); }

/* =========================================================================
   ABOUT + SEAL
   ========================================================================= */
.bbq-about { background: var(--cream); padding: 88px 40px; border-bottom: 4px solid var(--black); }
.bbq-about-inner { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; }
.bbq-about-copy { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.bbq-about-copy p { font-size: 19px; font-weight: 500; line-height: 1.6; margin: 0; color: var(--muted); }

.bbq-about-seal-wrap { display: flex; justify-content: center; }
.bbq-about-seal { position: relative; width: 340px; height: 340px; max-width: 100%; display: flex; align-items: center; justify-content: center; }
.bbq-about-seal-spin { position: absolute; inset: 0; animation: bbqSpin 24s linear infinite; }
.bbq-about-seal-spin svg { width: 100%; height: 100%; }
.bbq-about-seal-text { font-family: var(--cond); font-weight: 700; font-size: 20px; letter-spacing: 1px; fill: var(--yellow); }
.bbq-about-seal-center { position: relative; text-align: center; transform: rotate(-6deg); display: flex; flex-direction: column; gap: 2px; }
.bbq-about-seal-center span:first-child { font-family: var(--display); font-size: 52px; line-height: 0.95; color: var(--yellow); text-shadow: 4px 4px 0 var(--red); }
.bbq-about-seal-center span:last-child  { font-family: var(--display); font-size: 40px; line-height: 0.95; color: var(--yellow); text-shadow: 4px 4px 0 var(--red); }

/* =========================================================================
   CONTACT
   ========================================================================= */
.bbq-contact { background: var(--yellow); padding: 88px 40px; border-bottom: 4px solid var(--black); }
.bbq-contact-inner { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: start; }
.bbq-contact-left { display: flex; flex-direction: column; gap: 20px; }
.bbq-contact-title { font-family: var(--display); font-size: clamp(50px, 6.5vw, 76px); line-height: 0.95; margin: 0; letter-spacing: 0.02em; }
.bbq-contact-left > p { font-size: 20px; font-weight: 500; line-height: 1.5; margin: 0; max-width: 44ch; }
.bbq-contact-phone-row { display: flex; align-items: center; gap: 20px; margin-top: 10px; flex-wrap: wrap; }
.bbq-contact-phone {
    font-family: var(--display); font-size: clamp(40px, 6vw, 58px); letter-spacing: 0.03em;
    color: var(--black); text-decoration: none; text-shadow: 4px 4px 0 var(--cream), 6px 6px 0 var(--red);
    transition: color .1s ease, text-shadow .1s ease;
}
.bbq-contact-phone:hover { color: var(--red); text-shadow: 4px 4px 0 var(--cream), 6px 6px 0 var(--black); }
.bbq-contact-mascot { width: 110px; animation: bbqWiggle 1.6s ease-in-out infinite; transform-origin: 50% 90%; }
.bbq-contact-caption { font-family: var(--cond); font-weight: 600; font-size: 18px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* Contact form card — wraps the Fluent Form (id 3) */
.bbq-form-card {
    background: var(--cream); border: 3px solid var(--black); border-radius: calc(16px * var(--bbq-radius));
    box-shadow: 8px 8px 0 var(--black); padding: 32px;
}

/* Fluent Forms → BBQ design system overrides */
.bbq-form-card .fluentform .ff-el-group { margin-bottom: 18px; }
.bbq-form-card .fluentform .ff-el-input--label { margin-bottom: 6px; padding: 0; }
.bbq-form-card .fluentform .ff-el-input--label label {
    font-family: var(--cond); font-weight: 700; font-size: 16px;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); margin: 0;
}
.bbq-form-card .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label:after { color: var(--red); }
.bbq-form-card .fluentform .ff-el-form-control {
    font-family: var(--body); font-size: 17px; font-weight: 500; color: var(--ink);
    padding: 12px 14px; height: auto; line-height: 1.4;
    border: 3px solid var(--black); border-radius: calc(10px * var(--bbq-radius)); background: #FFFFFF;
    box-shadow: 3px 3px 0 var(--black);   /* neobrutalist offset, matches the cards */
    outline: none; width: 100%;
    transition: border-color .1s ease, box-shadow .1s ease;
}
.bbq-form-card .fluentform .ff-el-form-control::placeholder { color: #9A9186; opacity: 1; }
.bbq-form-card .fluentform .ff-el-form-control:focus {
    border-color: var(--red); box-shadow: 3px 3px 0 var(--red);
}
.bbq-form-card .fluentform textarea.ff-el-form-control { resize: vertical; }

/* two-column rows */
.bbq-form-card .fluentform .ff-t-container { gap: 16px; }
.bbq-form-card .fluentform .ff-t-cell { padding: 0 !important; }

/* validation errors */
.bbq-form-card .fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--red); box-shadow: 3px 3px 0 var(--red); }
.bbq-form-card .error.text-danger, .bbq-form-card .fluentform .ff-el-is-error .text-danger {
    font-family: var(--cond); font-weight: 700; font-size: 14px; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--red);
}

/* submit button */
.bbq-form-card .fluentform .ff-btn-submit {
    font-family: var(--display); font-size: 28px; letter-spacing: 0.05em; color: var(--yellow) !important;
    background: var(--black) !important; padding: 14px 30px; height: auto; line-height: 1;
    border: 3px solid var(--black) !important; border-radius: calc(12px * var(--bbq-radius));
    box-shadow: 5px 5px 0 var(--red); cursor: pointer;
    transition: transform .08s ease, box-shadow .08s ease;
}
.bbq-form-card .fluentform .ff-btn-submit:hover { box-shadow: 2px 2px 0 var(--red); transform: translate(3px, 3px); }

/* success message (replaces the form after submit) */
.bbq-form-card .fluentform .ff-message-success {
    background: var(--cream); border: 3px solid var(--black); border-radius: calc(12px * var(--bbq-radius));
    box-shadow: 5px 5px 0 var(--red); padding: 28px; text-align: center;
    animation: bbqPop .5s ease-out;
}
.bbq-form-card .fluentform .ff-message-success h3 { font-family: var(--display); font-size: 40px; margin: 0 0 10px; letter-spacing: 0.03em; color: var(--ink); }
.bbq-form-card .fluentform .ff-message-success p { font-size: 19px; font-weight: 500; line-height: 1.5; margin: 0; color: var(--ink); }

/* =========================================================================
   FOOTER
   ========================================================================= */
.bbq-footer { background: var(--black); padding: 72px 40px 32px; }
.bbq-footer-inner { max-width: var(--wrap); margin: 0 auto; display: flex; flex-direction: column; gap: 48px; }
.bbq-footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 48px; align-items: start; }

.bbq-footer-brandcol { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.bbq-footer-brand { font-family: var(--display); font-size: 54px; line-height: 1; color: var(--yellow); text-shadow: 4px 4px 0 var(--red); transform: rotate(-2deg); display: inline-block; }
.bbq-footer-tag { font-family: var(--cond); font-weight: 600; font-size: 18px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-light); line-height: 1.5; margin: 0; max-width: 30ch; }
.bbq-footer-mascot { width: 120px; display: block; margin-top: 4px; }

.bbq-footer-nav, .bbq-footer-contact { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.bbq-footer-head { font-family: var(--display); font-size: 24px; letter-spacing: 0.05em; color: var(--cream); }
.bbq-footer-nav a { font-family: var(--cond); font-weight: 600; font-size: 17px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-light); text-decoration: none; }
.bbq-footer-nav a:hover { color: var(--yellow); }
.bbq-footer-phone { font-family: var(--display); font-size: 36px; letter-spacing: 0.04em; color: var(--yellow); text-decoration: none; }
.bbq-footer-phone:hover { color: var(--cream); }
.bbq-footer-url { font-family: var(--cond); font-weight: 600; font-size: 17px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-light); }
.bbq-footer-cta {
    display: inline-flex; align-items: center; gap: 10px; font-family: var(--cond); font-weight: 700;
    font-size: 17px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--black);
    background: var(--yellow); text-decoration: none; padding: 10px 20px; border: 3px solid var(--black);
    border-radius: calc(12px * var(--bbq-radius)); box-shadow: 4px 4px 0 var(--red); margin-top: 6px;
    transition: background .1s ease, color .1s ease;
}
.bbq-footer-cta:hover { background: var(--cream); }

.bbq-footer-bottom { border-top: 2px solid var(--foot-border); padding-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.bbq-footer-bottom span { font-family: var(--cond); font-weight: 500; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--foot-muted); }

/* =========================================================================
   ANIMATIONS
   ========================================================================= */
@keyframes bbqTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bbqWiggle { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes bbqSpin   { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes bbqPop    { 0% { transform: scale(0.6) rotate(-8deg); opacity: 0; } 70% { transform: scale(1.08) rotate(2deg); } 100% { transform: scale(1) rotate(0deg); opacity: 1; } }
@keyframes bbqBob    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

@media (prefers-reduced-motion: reduce) {
    .bbq-ticker-track, .bbq-hero-mascot, .bbq-contact-mascot, .bbq-about-seal-spin, .bbq-thankyou img { animation: none !important; }
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1080px) {
    .bbq-nav, .bbq-holler { display: none; }
    .bbq-hamburger { display: block; }
    .bbq-footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 960px) {
    .bbq-hero-inner { grid-template-columns: 1fr; gap: 32px; padding: 56px 32px 56px; }
    .bbq-hero-art { order: -1; }
    .bbq-hero-copy { align-items: center; text-align: center; }
    .bbq-hero-lede { margin-left: auto; margin-right: auto; }
    .bbq-hero-cta { justify-content: center; }

    .bbq-audit-inner, .bbq-about-inner, .bbq-contact-inner { grid-template-columns: 1fr; gap: 40px; }
    .bbq-about-seal-wrap { order: -1; }

    .bbq-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .bbq-quote { transform: none; }
    .bbq-step1 { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 760px) {
    .bbq-topbar-line { display: none; }
    .bbq-topbar-inner { justify-content: center; }

    .bbq-pitch, .bbq-services, .bbq-work, .bbq-testi, .bbq-pricing, .bbq-faq, .bbq-audit, .bbq-about, .bbq-contact {
        padding-left: 20px; padding-right: 20px; padding-top: 60px; padding-bottom: 60px;
    }
    .bbq-wrap { padding-left: 20px; padding-right: 20px; }

    .bbq-grid-3, .bbq-plans, .bbq-step1-list { grid-template-columns: 1fr; }
    .bbq-form-card { padding: 24px 20px; }
    .bbq-form-card .fluentform .ff-t-container { flex-direction: column; }
    .bbq-pitch-br { display: none; }   /* let the headline flow naturally on mobile */

    .bbq-footer { padding-left: 20px; padding-right: 20px; }
    .bbq-footer-top { grid-template-columns: 1fr; gap: 34px; }
    .bbq-footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
    .bbq-pricing-note { flex-direction: column; align-items: flex-start; }
    .bbq-header-inner { padding: 12px 20px; }
    .bbq-brand img, .bbq-brand .custom-logo { height: 38px; }
}

@media (max-width: 420px) {
    .bbq-hero-title { font-size: clamp(40px, 11vw, 48px); text-shadow: 4px 4px 0 var(--red); }
    .bbq-hero-title span { text-shadow: 4px 4px 0 var(--black); }
    .bbq-btn { font-size: 24px; padding: 12px 22px; }
}