/* ===========================================================
 * BEC · Template chrome (interior pages)
 * ---------------------------------------------------------
 * Components used across the non-home templates:
 *   - Page hero (smaller than home hero, with breadcrumbs)
 *   - Breadcrumbs
 *   - Section heading helpers
 *   - Article body / prose
 *   - Sidebar TOC
 *   - Project facts grid
 *   - Project gallery
 *   - Cities grid (county pages)
 *   - Service feature list
 *   - FAQ accordion polish
 *   - Blog cards + pagination
 *   - Tag chips, post meta
 *   - 404 page
 *   - Sticky lead-capture rail
 *   - Contact map placeholder
 *
 * Brand tokens come from custom.css (loaded before this file).
 * =========================================================== */


/* 01 · Page hero ------------------------------------------- *
 * Used on every non-home template. Compact dark band with
 * page title + breadcrumbs. NOT a full-screen hero.
 * --------------------------------------------------------- */
.bec-pagehero{
  position:relative;color:#fff;
  background:
    linear-gradient(120deg,rgba(9,20,40,.85) 0%,rgba(15,58,138,.6) 100%),
    linear-gradient(135deg,var(--bec-brand-dk) 0%,var(--bec-brand) 100%);
  padding:64px 0 56px;
  isolation:isolate;
  overflow:hidden;
}
.bec-pagehero[data-bg]::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--bg) center/cover no-repeat;opacity:.35;
}
.bec-pagehero h1{
  font-family:"Barlow Condensed","Inter",sans-serif;
  font-size:clamp(34px,4.4vw,52px);font-weight:800;
  line-height:1.05;letter-spacing:-.01em;color:#fff;margin:0 0 12px;
}
.bec-pagehero p{
  font-size:18px;color:rgba(255,255,255,.85);max-width:64ch;margin:0;
}
.bec-pagehero .bec-eyebrow{color:rgba(255,255,255,.78)}


/* 02 · Breadcrumbs ----------------------------------------- */
.bec-crumbs{
  font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  color:rgba(255,255,255,.7);margin:0 0 18px;font-weight:600;
}
.bec-crumbs a{color:rgba(255,255,255,.85);text-decoration:none}
.bec-crumbs a:hover{color:#fff;text-decoration:underline}
.bec-crumbs span[aria-current]{color:#fff}
.bec-crumbs .sep{margin:0 8px;opacity:.55}


/* 03 · Section helpers ------------------------------------- */
.bec-section{padding:80px 0}
.bec-section-soft{background:var(--bec-bg-soft)}
.bec-section-dark{background:var(--bec-brand-dk);color:#fff}
.bec-section-dark h1,.bec-section-dark h2,.bec-section-dark h3{color:#fff}

.bec-section-head{max-width:780px;margin:0 0 40px}
.bec-section-head h2{
  font-family:"Barlow Condensed","Inter",sans-serif;
  font-size:clamp(28px,3vw,42px);font-weight:800;letter-spacing:-.01em;
  margin:8px 0 12px;
}
.bec-section-head p{font-size:17px;color:var(--bec-muted);max-width:60ch;margin:0}


/* 04 · Article body / prose -------------------------------- *
 * For long-form pages (about, page templates, blog post body).
 * --------------------------------------------------------- */
.bec-prose{font-size:17px;line-height:1.7;color:var(--bec-ink-2)}
.bec-prose > * + *{margin-top:1.1em}
.bec-prose .lead{font-size:19px;line-height:1.6;color:var(--bec-ink);font-weight:500;margin-bottom:1.4em}
.bec-prose h2{
  font-family:"Inter",sans-serif;
  font-size:26px;font-weight:700;letter-spacing:-.01em;line-height:1.25;
  margin-top:2em;margin-bottom:.5em;color:var(--bec-ink);
}
.bec-prose h3{
  font-family:"Inter",sans-serif;font-size:20px;font-weight:700;
  margin-top:1.6em;margin-bottom:.4em;color:var(--bec-ink);letter-spacing:0;
}
.bec-prose h4{font-size:17px;font-weight:700;color:var(--bec-ink);margin-top:1.4em;letter-spacing:0}
.bec-prose p{margin:0 0 1em}
.bec-prose a{color:var(--bec-brand);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.bec-prose a:hover{color:var(--bec-brand-2)}
.bec-prose ul,.bec-prose ol{padding-left:1.4em;margin:1em 0}
.bec-prose li{margin-bottom:.4em}
.bec-prose img{max-width:100%;height:auto;border-radius:12px;margin:1.4em 0}
.bec-prose figure{margin:1.6em 0}
.bec-prose figure img,
.bec-prose .wp-block-image img{width:100%;height:auto;display:block}
.bec-prose figcaption{font-size:13.5px;color:var(--bec-muted);text-align:center;margin-top:.5em}
.bec-prose hr{border:0;border-top:1px solid var(--bec-line);margin:2em 0}


/* 05 · Sidebar TOC + share -------------------------------- */
.bec-sidebar{position:sticky;top:96px;align-self:start}
.bec-toc{
  background:#fff;border:1px solid var(--bec-line);border-radius:14px;
  padding:18px 20px;
}
.bec-toc h4{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--bec-muted);font-weight:700;margin:0 0 10px}
.bec-toc ul{list-style:none;padding:0;margin:0}
.bec-toc li{padding:6px 0;border-bottom:1px solid var(--bec-line)}
.bec-toc li:last-child{border-bottom:0}
.bec-toc a{color:var(--bec-ink-2);text-decoration:none;font-size:14.5px;font-weight:500}
.bec-toc a:hover{color:var(--bec-brand)}
.bec-toc a.active{color:var(--bec-brand);font-weight:700}

.bec-share{margin-top:16px;display:flex;gap:8px}
.bec-share a{
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  background:#fff;border:1px solid var(--bec-line);color:var(--bec-ink-2);
  transition:all .15s ease;
}
.bec-share a:hover{background:var(--bec-brand);color:#fff;border-color:var(--bec-brand)}


/* 06 · Project facts grid (project single) ----------------- */
.bec-facts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  background:#fff;border:1px solid var(--bec-line);border-radius:14px;
  overflow:hidden;
}
.bec-facts > div{padding:22px 24px;border-right:1px solid var(--bec-line)}
.bec-facts > div:last-child{border-right:0}
.bec-facts dt{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bec-muted);margin-bottom:6px}
.bec-facts dd{font-family:"Barlow Condensed",sans-serif;font-size:24px;font-weight:700;color:var(--bec-ink);margin:0;line-height:1.1}
@media (max-width:760px){
  .bec-facts{grid-template-columns:repeat(2,1fr)}
  .bec-facts > div{border-right:0;border-bottom:1px solid var(--bec-line)}
  .bec-facts > div:nth-child(odd){border-right:1px solid var(--bec-line)}
}


/* 07 · Project gallery -------------------------------------
 * Reworked 2026-05-11: previous layout used 12-col grid with a
 * giant feature (col-span-8, row-span-2). Dev review flagged it
 * as "too big" — the feature image dwarfed the rest of the page
 * and the small thumbs felt like an afterthought. New layout is
 * a balanced 3-col grid with a slightly taller feature, capped
 * via max-height + object-fit so it can't dominate.
 */
.bec-gallery{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  --gallery-h:220px;
}
.bec-gallery img{display:block;width:100%;height:var(--gallery-h);object-fit:cover;border-radius:10px;background:#eef2f8}
.bec-gallery .g-lg{grid-column:span 2;grid-row:span 2}
.bec-gallery .g-lg{height:calc(var(--gallery-h) * 2 + 12px)}
@media (max-width:760px){
  .bec-gallery{grid-template-columns:repeat(2,1fr);--gallery-h:180px}
  .bec-gallery .g-lg{grid-column:span 2;grid-row:auto;height:240px}
  .bec-gallery .g-sm{height:var(--gallery-h)}
}
@media (max-width:480px){
  .bec-gallery{grid-template-columns:1fr;--gallery-h:200px}
  .bec-gallery .g-lg{height:var(--gallery-h)}
}


/* 08 · Cities grid (county pages) -------------------------- */
.bec-cities{
  columns:4;column-gap:24px;list-style:none;padding:0;margin:0;
  font-size:14.5px;color:var(--bec-ink-2);
}
.bec-cities li{padding:6px 0;break-inside:avoid;display:flex;align-items:center;gap:8px}
.bec-cities li::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--bec-accent);flex-shrink:0;
}
@media (max-width:992px){.bec-cities{columns:3}}
@media (max-width:680px){.bec-cities{columns:2}}


/* 09 · Service / Solution feature list --------------------- */
.bec-features{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.bec-feature{
  background:#fff;border:1px solid var(--bec-line);border-radius:14px;
  padding:28px;display:flex;flex-direction:column;gap:10px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.bec-feature:hover{
  transform:translateY(-3px);
  border-color:var(--bec-brand);
  box-shadow:0 18px 40px -20px rgba(15,58,138,.25);
}
.bec-feature .bec-feature-icon{
  width:48px;height:48px;border-radius:10px;
  background:linear-gradient(135deg,#eaf0fd,#d5e1fb);
  color:var(--bec-brand);display:grid;place-items:center;
}
.bec-feature h3{font-size:18px;font-weight:700;margin:0;color:var(--bec-ink);font-family:"Inter",sans-serif;letter-spacing:0}
.bec-feature p{font-size:14.5px;color:var(--bec-muted);margin:0;line-height:1.6}
@media (max-width:991px){.bec-features{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.bec-features{grid-template-columns:1fr}}

/* Inline checklist
 * Icon uses absolute positioning rather than grid columns so that
 * mixed <li> content like "<b>Label.</b> body text" stays as one
 * inline run. (Grid-cell auto-flow would split the <b> and the
 * trailing text into separate cells, wrapping the body one-word-per-line.)
 */
.bec-checklist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.bec-checklist li{
  position:relative;padding-left:36px;
  font-size:15.5px;line-height:1.55;color:var(--bec-ink-2);
}
.bec-checklist li::before{
  content:"";position:absolute;left:0;top:2px;
  width:24px;height:24px;border-radius:50%;
  background:var(--bec-accent);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19l12-12-1.4-1.4z'/></svg>") center/14px no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19l12-12-1.4-1.4z'/></svg>") center/14px no-repeat;
}
.bec-checklist li b{color:var(--bec-ink);font-weight:700}


/* 10 · FAQ accordion --------------------------------------- */
.bec-faq{display:flex;flex-direction:column;gap:12px}
.bec-faq details{
  background:#fff;border:1px solid var(--bec-line);border-radius:12px;
  padding:18px 22px;transition:border-color .18s ease, box-shadow .18s ease;
}
.bec-faq details[open]{
  border-color:var(--bec-brand);box-shadow:0 12px 28px -16px rgba(15,58,138,.18);
}
.bec-faq summary{
  list-style:none;cursor:pointer;font-weight:700;color:var(--bec-ink);
  font-size:16.5px;display:flex;justify-content:space-between;align-items:center;gap:14px;
}
.bec-faq summary::-webkit-details-marker{display:none}
.bec-faq summary::after{
  content:"+";font-size:24px;font-weight:300;color:var(--bec-brand);
  transition:transform .2s ease;line-height:1;
}
.bec-faq details[open] summary::after{transform:rotate(45deg)}
.bec-faq details > p,.bec-faq details > ul{
  margin:14px 0 0;color:var(--bec-ink-2);font-size:15px;line-height:1.65;
}


/* 11 · Blog cards + pagination ----------------------------- */
.bec-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media (max-width:991px){.bec-blog-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.bec-blog-grid{grid-template-columns:1fr}}

.bec-blog-card{
  display:flex;flex-direction:column;height:100%;
  background:#fff;border:1px solid var(--bec-line);border-radius:14px;
  overflow:hidden;text-decoration:none;color:var(--bec-ink);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.bec-blog-card:hover{
  transform:translateY(-3px);border-color:var(--bec-brand);
  box-shadow:0 18px 40px -20px rgba(15,58,138,.22);color:var(--bec-ink);
}
.bec-blog-card-img{aspect-ratio:16/10;background:#e4e9f1 center/cover no-repeat;display:block}
.bec-blog-card-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.bec-blog-card-meta{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--bec-muted);font-weight:700}
.bec-blog-card-meta .cat{color:var(--bec-brand)}
.bec-blog-card h3{
  font-family:"Inter",sans-serif;font-size:19px;font-weight:700;
  margin:0;line-height:1.3;letter-spacing:-.005em;
}
.bec-blog-card p{font-size:14.5px;color:var(--bec-muted);margin:0;line-height:1.55}
.bec-blog-card .read-more{
  margin-top:auto;font-weight:700;color:var(--bec-brand);font-size:14px;
  display:inline-flex;align-items:center;gap:6px;
}

.bec-blog-card-feature{
  grid-column:span 2;flex-direction:row;align-items:stretch;
}
.bec-blog-card-feature .bec-blog-card-img{flex:1 1 50%;aspect-ratio:auto}
.bec-blog-card-feature .bec-blog-card-body{flex:1 1 50%;padding:32px;justify-content:center}
.bec-blog-card-feature h3{font-size:24px}
@media (max-width:991px){
  .bec-blog-card-feature{grid-column:span 2;flex-direction:column}
  .bec-blog-card-feature .bec-blog-card-img{aspect-ratio:16/10}
}
@media (max-width:600px){
  .bec-blog-card-feature{grid-column:span 1}
}

.bec-pagination{
  display:flex;justify-content:center;align-items:center;gap:6px;
  margin-top:48px;font-size:14px;
}
.bec-pagination a,.bec-pagination span{
  min-width:42px;height:42px;padding:0 12px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--bec-line);border-radius:10px;
  text-decoration:none;color:var(--bec-ink-2);font-weight:600;
  background:#fff;transition:all .15s ease;
}
.bec-pagination a:hover{border-color:var(--bec-brand);color:var(--bec-brand)}
.bec-pagination .current{background:var(--bec-brand);color:#fff;border-color:var(--bec-brand)}
.bec-pagination .dots{border-color:transparent;background:transparent}


/* 12 · Tag chips + post meta ------------------------------- */
.bec-chips{display:flex;flex-wrap:wrap;gap:8px;margin:1.4em 0}
.bec-chip{
  padding:6px 14px;border-radius:999px;
  background:#eef2f8;color:var(--bec-ink-2);
  font-size:13px;font-weight:600;text-decoration:none;
}
.bec-chip:hover{background:var(--bec-brand);color:#fff}

.bec-postmeta{
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;
  font-size:13.5px;color:var(--bec-muted);font-weight:600;
  margin:0 0 18px;
}
.bec-postmeta .dot{width:4px;height:4px;border-radius:50%;background:#c2cbdc}
.bec-postmeta a{color:var(--bec-brand);text-decoration:none}


/* 13 · 404 page -------------------------------------------- */
.bec-404{
  display:grid;place-items:center;text-align:center;
  padding:120px 24px;min-height:60vh;
}
.bec-404 .code{
  font-family:"Barlow Condensed",sans-serif;
  font-size:clamp(120px,18vw,220px);font-weight:800;line-height:.85;
  background:linear-gradient(135deg,var(--bec-brand) 0%,var(--bec-accent) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:-.04em;
}
.bec-404 h1{font-size:32px;margin:8px 0 12px;color:var(--bec-ink)}
.bec-404 p{color:var(--bec-muted);max-width:48ch;margin:0 auto 28px}


/* 14 · Sticky lead-capture rail (used on solution detail) - */
.bec-rail{
  position:sticky;top:104px;align-self:start;
  background:#fff;border:1px solid var(--bec-line);border-radius:14px;
  padding:24px;box-shadow:0 12px 36px -22px rgba(15,58,138,.25);
}
.bec-rail h3{font-size:18px;font-weight:700;margin:0 0 8px;color:var(--bec-ink);font-family:"Inter",sans-serif;letter-spacing:0}
.bec-rail p{font-size:14px;color:var(--bec-muted);margin:0 0 16px}
.bec-rail .form-control,.bec-rail .form-select{border-color:var(--bec-line);background:#fbfcfe;border-radius:10px;font-size:14.5px}
.bec-rail .btn{width:100%}


/* 15 · Contact map placeholder ----------------------------- */
.bec-map{
  aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  background:linear-gradient(135deg,#dbe4f4 0%,#c7d4ec 100%);
  position:relative;border:1px solid var(--bec-line);
}
.bec-map iframe{width:100%;height:100%;border:0;display:block}
.bec-map-pin{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-100%);
  width:36px;height:36px;border-radius:50%;
  background:var(--bec-accent);color:var(--bec-ink);
  display:grid;place-items:center;font-weight:800;
  box-shadow:0 8px 24px -6px rgba(245,180,0,.6);
}

.bec-contact-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:start}
@media (max-width:992px){.bec-contact-grid{grid-template-columns:1fr;gap:32px}}

.bec-contact-card{
  background:#fff;border:1px solid var(--bec-line);border-radius:14px;
  padding:24px;display:flex;align-items:flex-start;gap:14px;
  height: stretch;
}
.bec-contact-card .icon{
  width:44px;height:44px;border-radius:10px;flex-shrink:0;
  background:#eaf0fd;color:var(--bec-brand);display:grid;place-items:center;
}
.bec-contact-card h4{font-size:15px;margin:0 0 4px;color:var(--bec-ink);font-family:"Inter",sans-serif;letter-spacing:0;font-weight:700}
.bec-contact-card p{font-size:14.5px;color:var(--bec-muted);margin:0;line-height:1.5}
.bec-contact-card a{color:var(--bec-ink-2);text-decoration:none;font-weight:600}


/* 16 · Listing layouts (archive-solutions, services list) - */
.bec-list-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media (max-width:760px){.bec-list-grid{grid-template-columns:1fr}}

.bec-list-card{
  display:grid;grid-template-columns:120px 1fr;gap:20px;
  background:#fff;border:1px solid var(--bec-line);border-radius:14px;
  padding:24px;text-decoration:none;color:var(--bec-ink);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.bec-list-card:hover{transform:translateY(-2px);border-color:var(--bec-brand);box-shadow:0 16px 36px -20px rgba(15,58,138,.22);color:var(--bec-ink)}
.bec-list-card-icon{
  width:120px;aspect-ratio:1;border-radius:12px;
  background:linear-gradient(135deg,#eaf0fd,#d5e1fb);
  display:grid;place-items:center;color:var(--bec-brand);
}
.bec-list-card h3{font-size:20px;font-weight:700;margin:0 0 4px;color:var(--bec-ink);font-family:"Inter",sans-serif;letter-spacing:0}
.bec-list-card p{font-size:14.5px;color:var(--bec-muted);margin:0 0 12px;line-height:1.55}
.bec-list-card .arrow{font-weight:700;color:var(--bec-brand);font-size:14px}
@media (max-width:560px){
  .bec-list-card{grid-template-columns:1fr}
  .bec-list-card-icon{width:64px;aspect-ratio:1}
}