/* ==========================================================
   GeoTech Design Consultants - Blog post pages
   Theme: navy #001659 / orange #FF5E15 / light #F2F3F5
   ========================================================== */
:root { --bp-ink: #1f2a44; --bp-text: #465066; --bp-line: #e3e6ee; --bp-soft: #fff4ee; }

/* reading progress */
.bp-progress { position: fixed; top: 0; left: 0; height: 4px; width: 0; z-index: 2000;
    background: linear-gradient(90deg, var(--bs-secondary), #ff9a5c); transition: width .12s linear; }

/* ---------- hero ---------- */
.bp-hero .bp-cat { display: inline-block; background: var(--bs-secondary); color: #fff; font-size: .78rem;
    font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: .45rem 1.1rem; margin-bottom: 1.25rem; }
.bp-hero h1 { color: #fff; font-weight: 700; line-height: 1.22; font-size: clamp(1.75rem, 4vw, 2.9rem); margin: 0; }
.bp-hero h1 .bp-sub { display: block; font-family: "Roboto", sans-serif; font-size: clamp(1rem, 1.7vw, 1.3rem);
    font-weight: 400; color: rgba(255, 255, 255, .85); margin-top: 1rem; letter-spacing: .01em; }
.bp-hero h1::after { content: ""; display: block; width: 80px; height: 4px; margin: 20px auto 0; border-radius: 4px; background: var(--bs-secondary); }
.bp-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.75rem; margin: 1.6rem 0 1.4rem;
    color: rgba(255, 255, 255, .88); font-size: .93rem; }
.bp-meta i { color: var(--bs-secondary); margin-right: .45rem; }

/* ---------- layout ---------- */
.bp-main { padding: 4.5rem 0 3rem; background: #fff; }
.bp-article { counter-reset: bpsec; color: var(--bp-text); }
.bp-article p { font-size: 1.06rem; line-height: 1.85; color: var(--bp-text); margin-bottom: 1.15rem; }
.bp-article strong { color: var(--bs-primary); font-weight: 700; }
.bp-article a { color: var(--bs-secondary); }

.bp-featured { margin: 0 0 2.4rem; }
.bp-featured img, .bp-fig img { width: 100%; object-fit: cover; border-radius: 8px; box-shadow: 0 18px 40px rgba(0, 22, 89, .16); }
.bp-featured img { height: clamp(240px, 38vw, 430px); }
.bp-fig { margin: 2.2rem 0; }
.bp-fig img { height: clamp(220px, 32vw, 360px); }
.bp-article figcaption { font-size: .86rem; color: #7a8296; margin-top: .85rem; padding-left: .8rem; border-left: 3px solid var(--bs-secondary); line-height: 1.5; }

.bp-article p.bp-lead { font-size: 1.22rem; line-height: 1.8; color: var(--bs-primary); text-align: left; text-align-last: left; }
.bp-article p.bp-sublead { font-family: "Roboto", Arial, sans-serif; font-size: 1.35rem; font-weight: 600; color: var(--bs-secondary);
    text-align: left; text-align-last: left; margin-bottom: 1rem; }

/* ---------- section headings ---------- */
.bp-sec { margin-top: 3.2rem; scroll-margin-top: 110px; }
.bp-sec > h2 { counter-increment: bpsec; position: relative; scroll-margin-top: 110px; color: var(--bs-primary);
    font-weight: 700; line-height: 1.28; font-size: clamp(1.4rem, 2.3vw, 1.85rem); margin: 0 0 1.35rem; padding-bottom: 1rem; }
.bp-sec > h2::before { content: counter(bpsec, decimal-leading-zero); display: block; font-family: "Roboto", sans-serif;
    font-size: .8rem; font-weight: 700; letter-spacing: .2em; color: var(--bs-secondary); margin-bottom: .45rem; }
.bp-sec > h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 3px; background: var(--bs-secondary); border-radius: 3px; }

.bp-leadin { font-weight: 500; color: var(--bs-primary) !important; margin-bottom: .8rem !important; text-align: left !important; text-align-last: left !important; }

/* ---------- check list ---------- */
.bp-checks { list-style: none; padding: 1.5rem 1.6rem; margin: .5rem 0 1.8rem; display: grid; grid-template-columns: repeat(2, 1fr);
    gap: .7rem 1.6rem; background: var(--bs-light); border-radius: 8px; border-top: 3px solid var(--bs-secondary); }
.bp-checks li { position: relative; padding-left: 1.85rem; font-size: .98rem; line-height: 1.5; color: var(--bp-ink); }
.bp-checks li::before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0; top: .12rem;
    width: 1.25rem; height: 1.25rem; line-height: 1.25rem; text-align: center; font-size: .62rem; color: #fff; background: var(--bs-secondary); border-radius: 50%; }

/* ---------- cards ---------- */
.bp-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; margin: .5rem 0 1.8rem; }
.bp-card { background: #fff; border: 1px solid var(--bp-line); border-top: 3px solid var(--bs-secondary); border-radius: 6px;
    padding: 1.4rem 1.5rem; transition: transform .3s, box-shadow .3s; }
.bp-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 22, 89, .12); }
.bp-cards .bp-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.bp-card .ic { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%;
    background: var(--bp-soft); color: var(--bs-secondary); font-size: 1.1rem; margin-bottom: .9rem; }
.bp-card h3 { font-size: 1.12rem; font-weight: 700; color: var(--bs-primary); margin: 0 0 .5rem; }
.bp-article .bp-card p { font-size: .97rem; line-height: 1.65; margin: 0; text-align: left; text-align-last: left; }

/* ---------- callout ---------- */
.bp-callout { display: flex; gap: 1rem; background: var(--bp-soft); border-left: 4px solid var(--bs-secondary);
    padding: 1.25rem 1.5rem; border-radius: 0 8px 8px 0; margin: 1.7rem 0; }
.bp-callout > i { color: var(--bs-secondary); font-size: 1.35rem; margin-top: .25rem; }
.bp-article .bp-callout p { margin: 0; color: var(--bs-primary); font-weight: 500; font-size: 1.02rem; line-height: 1.7; text-align: left; text-align-last: left; }

/* ---------- inline CTA ---------- */
.bp-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem;
    background: var(--bs-light); border: 1px solid var(--bp-line); border-left: 5px solid var(--bs-secondary);
    padding: 1.7rem 1.9rem; border-radius: 8px; margin: 3rem 0 .5rem; }
.bp-cta h4 { font-size: 1.3rem; font-weight: 700; color: var(--bs-primary); margin: 0 0 .35rem; }
.bp-article .bp-cta p { margin: 0; font-size: .98rem; line-height: 1.6; text-align: left; text-align-last: left; }
.bp-cta .bp-cta-btns { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ---------- "why choose" dark box ---------- */
.bp-why { position: relative; overflow: hidden; margin-top: 3.4rem; border-radius: 10px; padding: 2.6rem 2.6rem 2.2rem;
    background: linear-gradient(135deg, #001659 0%, #001248 100%); color: #fff; }
.bp-why::before { content: ""; position: absolute; inset: 0; background: url(../img/contours.svg) center / cover no-repeat; opacity: .07; pointer-events: none; }
.bp-why > * { position: relative; }
.bp-why > h2 { color: #fff; }
.bp-why > h2::before { color: #ff9a5c; }
.bp-article .bp-why p { color: rgba(255, 255, 255, .88); }
.bp-article .bp-why p.bp-leadin { color: #fff !important; }
.bp-article .bp-why strong { color: #fff; }
.bp-flow { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .5rem; margin: 1.6rem 0 1.9rem; counter-reset: bpstep; }
.bp-flow .st { counter-increment: bpstep; display: inline-flex; align-items: center; gap: .55rem; background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .28); color: #fff; padding: .4rem .95rem .4rem .45rem; border-radius: 50px; font-size: .86rem; font-weight: 500; }
.bp-flow .st::before { content: counter(bpstep); display: inline-flex; align-items: center; justify-content: center; width: 1.45rem; height: 1.45rem;
    border-radius: 50%; background: var(--bs-secondary); color: #fff; font-size: .72rem; font-weight: 700; }
.bp-flow > i { color: var(--bs-secondary); font-size: .72rem; }

/* ---------- FAQ ---------- */
.bp-faq .accordion-item { border: 1px solid var(--bp-line); border-radius: 8px !important; margin-bottom: .7rem; overflow: hidden; background: #fff; }
.bp-faq .accordion-button { font-family: "Roboto", Arial, sans-serif; font-weight: 600; font-size: 1.04rem; line-height: 1.4; color: var(--bs-primary); padding: 1.1rem 1.35rem; background: #fff; box-shadow: none; }
.bp-faq .accordion-button:not(.collapsed) { color: var(--bs-secondary); background: var(--bp-soft); }
.bp-faq .accordion-button:focus { box-shadow: none; }
.bp-faq .accordion-body { font-size: 1rem; line-height: 1.75; color: var(--bp-text); padding: 1.1rem 1.35rem 1.3rem; }

/* ---------- conclusion ---------- */
.bp-concl { margin-top: 3.4rem; padding: 2.1rem 2.3rem .9rem; border: 1px solid var(--bp-line); border-top: 4px solid var(--bs-primary);
    border-radius: 8px; background: #fff; box-shadow: 0 14px 34px rgba(0, 22, 89, .08); }
.bp-concl > h2 { margin-bottom: 1.2rem; }

/* ---------- tags / share / author ---------- */
.bp-foot { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--bp-line); }
.bp-tags { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1.3rem; }
.bp-tags .lbl, .bp-share .lbl { font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bs-primary); margin-right: .4rem; }
.bp-tags span.t { background: #fff; border: 1px solid var(--bp-line); color: var(--bs-primary); border-radius: 50px; padding: .3rem .95rem; font-size: .86rem; }
.bp-share { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.bp-share a, .bp-share button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--bp-line); background: #fff; color: var(--bs-primary); font-size: .95rem; cursor: pointer; transition: .25s; }
.bp-share a:hover, .bp-share button:hover { background: var(--bs-secondary); border-color: var(--bs-secondary); color: #fff; transform: translateY(-2px); }
.bp-author { display: flex; gap: 1.4rem; align-items: center; background: var(--bs-light); padding: 1.6rem; border-radius: 8px; margin-top: 1.8rem; }
.bp-author img { width: 130px; flex-shrink: 0; background: #fff; padding: .6rem; border-radius: 6px; }
.bp-author h5 { margin: 0 0 .3rem; font-weight: 700; color: var(--bs-primary); }
.bp-article .bp-author p { margin: 0 0 .5rem; font-size: .95rem; line-height: 1.6; text-align: left; text-align-last: left; }

/* ---------- sidebar ---------- */
.bp-sticky { position: sticky; top: 110px; }
.bp-toc { background: #fff; border: 1px solid var(--bp-line); border-top: 4px solid var(--bs-secondary); border-radius: 8px; padding: 1.2rem 1rem .8rem; box-shadow: 0 10px 26px rgba(0, 22, 89, .07); }
.bp-toc h5 { font-family: "Roboto", sans-serif; font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--bs-primary); margin: 0 0 .7rem .5rem; }
.bp-toc ol { list-style: none; counter-reset: bptoc; padding: 0 .2rem 0 0; margin: 0; max-height: 340px; overflow-y: auto; scrollbar-width: thin; }
.bp-toc li { counter-increment: bptoc; }
.bp-toc a { display: flex; gap: .55rem; padding: .45rem .6rem; border-left: 3px solid transparent; font-size: .88rem; line-height: 1.4; color: var(--bp-text); transition: .2s; }
.bp-toc a::before { content: counter(bptoc, decimal-leading-zero); font-weight: 700; font-size: .75rem; color: var(--bs-secondary); padding-top: .12rem; }
.bp-toc a:hover { color: var(--bs-primary); background: var(--bs-light); }
.bp-toc a.active { border-left-color: var(--bs-secondary); color: var(--bs-primary); font-weight: 600; background: var(--bp-soft); }
.bp-sidecta { background: linear-gradient(135deg, #001659, #001248); color: #fff; padding: 1.5rem 1.4rem; border-radius: 8px; margin-top: 1rem; }
.bp-sidecta h5 { color: #fff; font-size: 1.15rem; margin: 0 0 .4rem; }
.bp-sidecta p { color: rgba(255, 255, 255, .82); font-size: .9rem; line-height: 1.55; margin: 0 0 1rem; text-align: left; text-align-last: left; }
.bp-sidecta .btn { display: block; width: 100%; margin-bottom: .55rem; padding: .6rem 1rem; font-size: .95rem; }
.bp-sidecta .btn:last-child { margin-bottom: 0; }
.bp-sidecta .btn-outline-light:hover { color: var(--bs-primary); }

/* mobile TOC */
.bp-toc-m { border: 1px solid var(--bp-line); border-left: 4px solid var(--bs-secondary); border-radius: 6px; background: var(--bs-light); margin-bottom: 2rem; }
.bp-toc-m summary { padding: .9rem 1.1rem; font-weight: 700; color: var(--bs-primary); cursor: pointer; letter-spacing: .04em; }
.bp-toc-m ol { margin: 0; padding: 0 1.1rem 1rem 2.3rem; }
.bp-toc-m li { padding: .3rem 0; font-size: .93rem; }

/* ---------- related + closing band ---------- */
.bp-related { padding: 4rem 0 5rem; background: var(--bs-light); }
.bp-related .bp-rel-head { text-align: center; margin-bottom: 2.4rem; }
.bp-related .blog-item { background: #fff; }
.bp-related .blog-content .h4 { font-size: 1.15rem; line-height: 1.4; }
.bp-band { position: relative; padding: 4.5rem 0; text-align: center; color: #fff;
    background: linear-gradient(rgba(0, 18, 72, .9), rgba(0, 18, 72, .9)), url(../img/footer-img.jpg) center / cover no-repeat; }
.bp-band h2 { color: #fff; font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: 1rem; }
.bp-band p { color: rgba(255, 255, 255, .85); max-width: 720px; margin: 0 auto 2rem; text-align: center; text-align-last: center; font-size: 1.08rem; }
.bp-band .btn { margin: .3rem .4rem; padding: .85rem 2rem; }
.bp-band .btn-outline-light:hover { color: var(--bs-primary); }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
    .bp-main { padding: 3rem 0 2rem; }
    .bp-why { padding: 2rem 1.5rem 1.6rem; }
    .bp-concl { padding: 1.6rem 1.4rem .6rem; }
}
@media (max-width: 767px) {
    .bp-checks, .bp-cards { grid-template-columns: 1fr; }
    .bp-cta { padding: 1.4rem; }
    .bp-author { flex-direction: column; text-align: center; }
    .bp-article p { font-size: 1rem; }
    .bp-article p.bp-lead { font-size: 1.1rem; }
}

.bp-related .blog-item .blog-img img { height: 250px; object-fit: cover; }