/* =====================================================
   BBJ Location Pages — style.css  v3.1  (redesigned)
   Button class: .btn-one  (uses theme's existing class)
===================================================== */

:root {
    --bbj-green:       #5db82f;
    --bbj-green-dark:  #3d8a1a;
    --bbj-green-light: #e8f7de;
    --bbj-heading:     #162010;
    --bbj-text:        #3d4d36;
    --bbj-muted:       #6b7c62;
    --bbj-light-bg:    #f4faf0;
    --bbj-mint:        #edf9e6;
    --bbj-border:      #d4e8c8;
    --bbj-white:       #ffffff;
    --bbj-radius:      10px;
    --bbj-radius-lg:   18px;
    --bbj-radius-xl:   28px;
    --bbj-shadow-sm:   0 2px 12px rgba(0,0,0,.07);
    --bbj-shadow:      0 6px 28px rgba(0,0,0,.11);
    --bbj-shadow-lg:   0 16px 48px rgba(0,0,0,.15);
    --bbj-container:   1200px;
}

/* ── Reset/base ── */
.bbjl-location-page * { box-sizing: border-box; }
.bbjl-location-page   { font-family: inherit; color: var(--bbj-text); }

.bbj-container {
    max-width: var(--bbj-container);
    margin:    0 auto;
    padding:   0 28px;
}

.bbj-section { padding: 88px 0; }

/* ── Shared typography ── */
.bbj-eyebrow {
    display:        inline-flex;
    align-items:    center;
    gap:            8px;
    font-size:      11px;
    font-weight:    800;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color:          var(--bbj-green);
    margin-bottom:  12px;
}
.bbj-eyebrow::before {
    content:    '';
    display:    inline-block;
    width:      22px;
    height:     2px;
    background: var(--bbj-green);
    flex-shrink:0;
}

.bbj-section-heading {
    font-size:   clamp(28px, 3.2vw, 42px);
    font-weight: 900;
    color:       var(--bbj-heading);
    margin:      0 0 18px;
    line-height: 1.15;
    letter-spacing: -0.5px;
}
.bbj-section-subtext {
    font-size:   17px;
    color:       var(--bbj-muted);
    max-width:   600px;
    line-height: 1.7;
    margin:      0;
}
.bbj-section-header           { 
        margin-bottom: 50px;
    text-align: center;
    
}
.bbj-section-header--center   { text-align: center; }
.bbj-section-header--center .bbj-section-subtext { margin: 0 auto; }
.bbj-section-header--center .bbj-eyebrow::before { display: none; }

/* ── Placeholder ── */
.bbj-placeholder-box {
    background:    rgba(255,255,255,.07);
    border:        2px dashed rgba(255,255,255,.2);
    border-radius: var(--bbj-radius-lg);
    display:       flex;
    flex-direction:column;
    align-items:   center;
    justify-content:center;
    gap:           12px;
    padding:       50px;
    min-height:    360px;
    color:         rgba(255,255,255,.45);
    font-size:     14px;
}
.bbj-placeholder-box span { font-size: 56px; opacity: .7; }

/* ══════════════════════════════════════
   BUTTONS
══════════════════════════════════════ */
.bbj-btn-group           { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.bbj-btn-group--center   { justify-content: center; }


.btn-one.bbj-btn-cta-alt {
    display:         inline-flex;
    align-items:     center;
    padding:         14px 32px;
    border-radius:   50px;
    font-weight:     700;
    font-size:       15px;
    text-decoration: none;
    transition:      all .22s ease;
    border:          2px solid rgba(255,255,255,.65);
    background:      transparent;
    color:           #fff;
}
.btn-one.bbj-btn-cta-alt:hover { background: rgba(255,255,255,.14); border-color: #fff; }

/* ══════════════════════════════════════
   1. HERO
══════════════════════════════════════ */
.bbj-hero {
    position:   relative;
    min-height: 580px;
    background: var(--bbj-heading);
    background-size:    cover;
    background-position:center;
    display:    flex;
    align-items:center;
    overflow:   hidden;
}
.bbj-hero::after {
    content:  '';
    position: absolute;
    bottom:   -2px;
    left:     0;
    right:    0;
    height:   80px;
    background: #fff;
    clip-path: polygon(0 100%, 100% 100%, 100% 0);
    z-index:  3;
}
.bbj-hero--archive { min-height: 360px; }
.bbj-hero-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(125deg, rgba(15,30,8,.93) 40%, rgba(40,90,15,.70));
}
.bbj-hero-inner {
    position:       relative;
    z-index:        2;
    display:        grid;
    grid-template-columns: 1fr 1fr;
    gap:            64px;
    align-items:    center;
    padding-top:    72px;
    padding-bottom: 100px;
}
.bbj-hero-content .bbj-eyebrow {
    color: var(--bbj-green);
    font-size: 11px;
}
.bbj-hero-content .bbj-eyebrow::before { background: var(--bbj-green); }
.bbj-hero-heading {
    font-size:   clamp(34px, 4.2vw, 56px);
    font-weight: 900;
    color:       #fff;
    margin:      0 0 20px;
    line-height: 1.08;
    letter-spacing: -1px;
}
.bbj-hero-sub {
    color:       rgba(255,255,255,.78);
    font-size:   17px;
    line-height: 1.7;
    margin:      0;
    max-width:   480px;
}
.bbj-hero-img-wrap { position: relative; }
.bbj-hero-img {
    width:         100%;
    border-radius: var(--bbj-radius-xl);
    box-shadow:    0 24px 60px rgba(0,0,0,.4);
    display:       block;
}

/* Trust badges */
.bbj-trust-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.bbj-badge {
    background:   rgba(255,255,255,.1);
    border:       1px solid rgba(255,255,255,.25);
    color:        rgba(255,255,255,.9);
    border-radius:50px;
    padding:      7px 16px;
    font-size:    12.5px;
    font-weight:  700;
    letter-spacing:.3px;
    backdrop-filter: blur(8px);
}
.bbj-badge::before { content: '✓  '; color: var(--bbj-green); }

/* ══════════════════════════════════════
   2. INTRO
══════════════════════════════════════ */
.bbjl-intro-section { background: #fff; }
.bbjl-intro-text {
    font-size:   16.5px;
    line-height: 1.9;
    color:       #444;
    max-width:   800px;
}

/* ══════════════════════════════════════
   3. SERVICES
══════════════════════════════════════ */
.bbjl-services-section { background: var(--bbj-light-bg); }
.bbjl-services-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap:                   24px;
    margin-top:            36px;
}
.bbjl-service-card {
    background:    #fff;
    border:        1.5px solid var(--bbj-border);
    border-left:   4px solid var(--bbj-green);
    border-radius: var(--bbj-radius);
    padding:       28px 24px;
    transition:    box-shadow .22s, transform .22s;
}
.bbjl-service-card:hover {
    box-shadow:  var(--bbj-shadow);
    transform:   translateY(-4px);
    border-left-color: var(--bbj-green-dark);
}
.bbjl-svc-icon {
    font-size:     28px;
    width:         52px;
    height:        52px;
    background:    var(--bbj-mint);
    border-radius: 50%;
    display:       flex;
    align-items:   center;
    justify-content:center;
    margin-bottom: 16px;
}
.bbjl-svc-title { font-size:17px; font-weight:800; color:var(--bbj-heading); margin:0 0 10px; }
.bbjl-svc-text  { font-size:14px; color:var(--bbj-muted); line-height:1.7; margin:0 0 14px; }
.bbjl-svc-link  { font-size:13.5px; color:var(--bbj-green); font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:4px; }
.bbjl-svc-link:hover { text-decoration:underline; }

/* ══════════════════════════════════════
   4. WHY CHOOSE US
══════════════════════════════════════ */
.bbj-why-section  { background: #fff; }
.bbj-why-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   28px;
}
.bbj-why-card {
    background:    var(--bbj-light-bg);
    border:        1.5px solid var(--bbj-border);
    border-radius: var(--bbj-radius-lg);
    padding:       34px 28px;
    transition:    all .25s ease;
    position:      relative;
    overflow:      hidden;
}
.bbj-why-card::before {
    content:    '';
    position:   absolute;
    top:        0; left: 0; right: 0;
    height:     3px;
    background: linear-gradient(90deg, var(--bbj-green), var(--bbj-green-dark));
    transform:  scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}
.bbj-why-card:hover { border-color:var(--bbj-green); box-shadow:0 10px 36px rgba(93,184,47,.12); transform:translateY(-5px); }
.bbj-why-card:hover::before { transform:scaleX(1); }
.bbj-why-icon  { font-size:36px; margin-bottom:16px; }
.bbj-why-title { font-size:18px; font-weight:800; color:var(--bbj-heading); margin:0 0 10px; }
.bbj-why-text  { font-size:14.5px; color:var(--bbj-muted); line-height:1.65; margin:0; }

/* ══════════════════════════════════════
   5. PROPERTY TYPES
══════════════════════════════════════ */
.bbjl-prop-section { background: var(--bbj-light-bg); }
.bbjl-prop-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap:                   18px;
    margin-top:            36px;
}
.bbjl-prop-card {
    background:    #fff;
    border:        1.5px solid var(--bbj-border);
    border-radius: var(--bbj-radius);
    padding:       22px 18px;
    text-align:    center;
    transition:    all .2s;
}
.bbjl-prop-card:hover { border-color:var(--bbj-green); box-shadow:var(--bbj-shadow-sm); transform:translateY(-3px); }
.bbjl-prop-icon  { font-size:32px; margin-bottom:10px; }
.bbjl-prop-title { font-size:14.5px; font-weight:800; color:var(--bbj-heading); margin:0 0 8px; }
.bbjl-prop-text  { font-size:13px; color:var(--bbj-muted); line-height:1.6; margin:0; }

/* ══════════════════════════════════════
   6. HOW IT WORKS (Process)
══════════════════════════════════════ */
.bbjl-process-section { background: #fff; }
.bbjl-process-steps {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap:                   0;
    margin-top:            40px;
    position:              relative;
}
.bbjl-process-steps::before {
    content:  '';
    position: absolute;
    top:      22px;
    left:     44px;
    right:    44px;
    height:   2px;
    background: linear-gradient(90deg, var(--bbj-green), var(--bbj-green-dark));
    z-index:  0;
}
.bbjl-step {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    padding:        0 24px 0 0;
    position:       relative;
    z-index:        1;
}
.bbjl-step-num {
    flex-shrink:    0;
    width:          46px;
    height:         46px;
    background:     var(--bbj-green);
    color:          #fff;
    border-radius:  50%;
    display:        flex;
    align-items:    center;
    justify-content:center;
    font-size:      17px;
    font-weight:    900;
    margin-bottom:  18px;
    box-shadow:     0 4px 16px rgba(93,184,47,.35);
    border:         3px solid #fff;
}
.bbjl-step-content { padding-left: 0; }
.bbjl-step-title   { font-size:16px; font-weight:800; color:var(--bbj-heading); margin:0 0 8px; }
.bbjl-step-text    { font-size:14px; color:var(--bbj-muted); line-height:1.65; margin:0; }

/* ══════════════════════════════════════
   7. WHAT WE REMOVE
══════════════════════════════════════ */
.bbjl-items-section { background: var(--bbj-light-bg); }
.bbjl-items-grid    { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.bbjl-item-chip {
    background:    #fff;
    border:        1.5px solid var(--bbj-border);
    color:         var(--bbj-heading);
    font-size:     13.5px;
    font-weight:   700;
    padding:       9px 20px;
    border-radius: 50px;
    transition:    all .18s;
}
.bbjl-item-chip:hover { border-color:var(--bbj-green); background:var(--bbj-mint); color:var(--bbj-green-dark); }
.bbjl-items-note { margin-top:22px; font-size:14px; color:var(--bbj-muted); font-style:italic; }

/* ══════════════════════════════════════
   8. PERFECT FOR
══════════════════════════════════════ */
.bbjl-use-section { background: #fff; }
.bbjl-use-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap:                   20px;
    margin-top:            36px;
}
.bbjl-use-card {
    background:    var(--bbj-mint);
    border-radius: var(--bbj-radius);
    padding:       22px 20px;
    border:        1.5px solid var(--bbj-border);
    transition:    all .2s;
}
.bbjl-use-card:hover { border-color:var(--bbj-green); box-shadow:var(--bbj-shadow-sm); transform:translateY(-2px); }
.bbjl-use-icon  { font-size:26px; margin-bottom:10px; }
.bbjl-use-title { font-size:15px; font-weight:800; color:var(--bbj-heading); margin:0 0 8px; }
.bbjl-use-text  { font-size:13px; color:var(--bbj-muted); line-height:1.6; margin:0; }

/* ══════════════════════════════════════
   9. TESTIMONIALS
══════════════════════════════════════ */
.bbj-testi-section { background: var(--bbj-heading); }
.bbj-testi-section .bbj-section-heading { color:black; }
.bbj-testi-section .bbj-eyebrow { color: #8de65a; }
.bbj-testi-section .bbj-eyebrow::before { background: #8de65a; }
.bbj-testi-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   22px;
}
.bbj-testi-card {
    background:    rgba(255,255,255,.07);
    border:        1px solid rgba(255,255,255,.12);
    border-radius: var(--bbj-radius-lg);
    padding:       32px 26px;
    display:       flex;
    flex-direction:column;
    gap:           14px;
    backdrop-filter: blur(4px);
    transition:    all .22s;
}
.bbj-testi-card:hover { background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.22); transform:translateY(-3px); }
.bbj-testi-stars  { color:#f5c842; font-size:18px; letter-spacing:3px; }
.bbj-testi-review { font-size:15px; line-height:1.75; color:rgba(255,255,255,.80); margin:0; font-style:italic; }
.bbj-testi-name   { font-weight:800; color:var(--bbj-green); font-size:13px; margin-top:auto; letter-spacing:.5px; }

/* ══════════════════════════════════════
   10. FAQ
══════════════════════════════════════ */
.bbj-faq-section { background: #fff; }
.bbj-faq-inner {
    display:               grid;
    grid-template-columns: 320px 1fr;
    gap:                   72px;
    align-items:           start;
}
.bbj-faq-list { display:flex; flex-direction:column; gap:10px; }
.bbj-faq-item {
    border:        1.5px solid var(--bbj-border);
    border-radius: var(--bbj-radius);
    overflow:      hidden;
    transition:    border-color .2s;
}
.bbj-faq-item.open { border-color:var(--bbj-green); }
.bbj-faq-q {
    width:       100%;
    background:  #fff;
    border:      none;
    text-align:  left;
    padding:     18px 22px;
    font-size:   15.5px;
    font-weight: 700;
    color:       var(--bbj-heading);
    cursor:      pointer;
    display:     flex;
    justify-content:space-between;
    align-items: center;
    gap:         16px;
    transition:  background .2s;
}
.bbj-faq-q:hover                  { background:var(--bbj-light-bg); }
.bbj-faq-item.open .bbj-faq-q     { background:var(--bbj-mint); color:var(--bbj-green-dark); }
.bbj-faq-icon                      { font-size:20px; font-weight:300; flex-shrink:0; transition:transform .25s; line-height:1; }
.bbj-faq-item.open .bbj-faq-icon   { transform:rotate(45deg); color:var(--bbj-green); }
.bbj-faq-a {
    display:     none;
    padding:     0 22px 20px;
    font-size:   14.5px;
    line-height: 1.75;
    color:       var(--bbj-muted);
}
.bbj-faq-a p { margin:0; }
.bbj-faq-item.open .bbj-faq-a { display:block; }

/* ══════════════════════════════════════
   11. AREAS
══════════════════════════════════════ */
.bbj-areas-section { background: var(--bbj-light-bg); }
.bbj-areas-grid {
    display:        flex;
    flex-wrap:      wrap;
    gap:            12px;
    justify-content:center;
    margin-top:     32px;
}
.bbj-area-chip {
    display:     flex;
    align-items: center;
    gap:         8px;
    background:  #fff;
    border:      1.5px solid var(--bbj-border);
    border-radius:50px;
    padding:     10px 22px;
    font-size:   14.5px;
    font-weight: 700;
    color:       var(--bbj-heading);
    transition:  all .2s;
}
.bbj-area-chip:hover { border-color:var(--bbj-green); background:var(--bbj-mint); color:var(--bbj-green-dark); box-shadow:0 4px 16px rgba(93,184,47,.13); }
.bbj-area-pin { font-size:15px; }

/* ══════════════════════════════════════
   12. CTA SECTION
══════════════════════════════════════ */
.bbj-cta-section {
    position:   relative;
    background: var(--bbj-green-dark);
    background-size:    cover;
    background-position:center;
    padding:    96px 0;
    overflow:   hidden;
}
.bbj-cta-section::before {
    content:  '';
    position: absolute;
    top: -60px; left: -60px;
    width:  340px; height: 340px;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
}
.bbj-cta-section::after {
    content:  '';
    position: absolute;
    bottom:-80px; right:-40px;
    width:  260px; height: 260px;
    border-radius: 50%;
    background: rgba(255,255,255,.04);
}
.bbj-cta-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(135deg, rgba(12,28,6,.85), rgba(61,138,26,.72));
}
.bbj-cta-inner    { position:relative; z-index:2; }
.bbj-cta-content  { text-align:center; max-width:680px; margin:0 auto; }
.bbj-cta-heading {
    font-size:   clamp(30px, 3.8vw, 48px);
    font-weight: 900;
    color:       #fff;
    margin:      0 0 18px;
    line-height: 1.1;
    letter-spacing: -0.5px;
}
.bbj-cta-text { color:rgba(255,255,255,.82); font-size:17px; line-height:1.75; margin:0 0 38px; }

/* ══════════════════════════════════════
   ARCHIVE GRID
══════════════════════════════════════ */
.bbj-svc-archive-grid {
    display:               grid;
    grid-template-columns: repeat(3,1fr);
    gap:                   28px;
}
.bbj-svc-archive-card {
    background:    #fff;
    border:        1.5px solid var(--bbj-border);
    border-radius: var(--bbj-radius-lg);
    overflow:      hidden;
    text-decoration:none;
    transition:    all .25s ease;
    display:       flex;
    flex-direction:column;
}
.bbj-svc-archive-card:hover { box-shadow:var(--bbj-shadow); transform:translateY(-5px); border-color:var(--bbj-green); }
.bbj-svc-archive-img-wrap { display:block; text-decoration:none; overflow:hidden; }
.bbj-svc-archive-img {
    height:             220px;
    background-size:    cover;
    background-position:center;
    background-color:   #e0f0d4;
    transition:         transform .35s ease;
}
.bbj-svc-archive-card:hover .bbj-svc-archive-img { transform:scale(1.05); }
.bbj-svc-archive-body          { padding:24px 22px 28px; display:flex; flex-direction:column; gap:8px; }
.bbj-svc-archive-body h3       { font-size:20px; font-weight:800; color:var(--bbj-heading); margin:0; line-height:1.3; }
.bbj-svc-archive-body h3 a     { text-decoration:none; color:inherit; }
.bbj-svc-archive-body p        { font-size:14px; color:var(--bbj-muted); line-height:1.6; margin:0; }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width:1024px) {
    .bbj-why-grid,
    .bbj-testi-grid           { grid-template-columns:repeat(2,1fr); }
    .bbj-svc-archive-grid     { grid-template-columns:repeat(2,1fr); }
    .bbjl-process-steps::before { display:none; }
}
@media (max-width:768px) {
    .bbj-section              { padding:56px 0; }
    .bbj-hero                 { min-height:auto; padding:52px 0; }
    .bbj-hero::after          { display:none; }
    .bbj-hero-inner           { grid-template-columns:1fr; gap:32px; padding-bottom:60px; }
    .bbj-hero-img-wrap        { display:none; }
    .bbj-why-grid             { grid-template-columns:1fr; }
    .bbj-testi-grid           { grid-template-columns:1fr; }
    .bbj-svc-archive-grid     { grid-template-columns:1fr; }
    .bbj-faq-inner            { grid-template-columns:1fr; gap:32px; }
    .bbjl-process-steps       { gap:32px; }
    .bbjl-process-steps::before { display:none; }
}