
/* ============ 1. WIDTH: the ONE value to change ============
   Option A (recommended): set the Elementor column/container to 66.66% (about 1000px of 1500) and leave this alone.
   Option B: force it here, e.g. --bc-maxw:1000px;                                                        */
.bc-page{--bc-maxw:1240px;
/* ============ 2. COLOURS: inherit Elementor global colours (fallbacks after the comma) ============ */
--bc-brand:#24376E; /* Accent Secondary. Custom kit colours have an unknown variable name, so this is a fixed hex: edit here */
--bc-ink:var(--e-global-color-primary,#282D3C); /* Primary: headings, dark panels */
--bc-text:var(--e-global-color-text,#4B535D);
--bc-accent:var(--e-global-color-accent,#2BA543); /* Accent green: buttons, accents */
--bc-on-accent:#fff;
--bc-tint:color-mix(in srgb,var(--bc-brand) 6%,#F5F5F5);
--bc-warm:color-mix(in srgb,var(--bc-accent) 10%,#fff);
--bc-line:color-mix(in srgb,var(--bc-ink) 14%,#fff);
max-width:var(--bc-maxw);margin:0 auto;font-family:inherit;color:var(--bc-text);line-height:1.6;width:100%;overflow:hidden}
.bc-page *{box-sizing:border-box}
/* ============ 3. HEADINGS: H2 = accents, H3 = sub heads, H4 = main headers. Sizes/fonts come from your theme (Fraunces). ============
   Optional overrides, uncomment to force:
   .bc-page h4{font-size:2.2rem} .bc-page h3{font-size:1.3rem} .bc-page h2{font-size:.8rem}                     */
.bc-page h2,.bc-page h3,.bc-page h4{margin:0 0 .5em}
.bc-page h4{color:var(--bc-ink)}
.bc-page h3{color:var(--bc-ink)}
.bc-page h2.bc-acc{color:var(--bc-accent);font-size:.82rem;font-weight:700;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.8em}
.bc-page p{margin:0 0 1em}
.bc-page a{text-decoration:none}
.bc-page svg.ic{width:1.1em;height:1.1em;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bc-sec{padding:44px 36px;border-radius:24px;margin:0 0 26px;background:#fff;border:1px solid var(--bc-line)}
.bc-sec.tint{background:var(--bc-tint);border-color:transparent}
.bc-sec.warm{background:var(--bc-warm);border-color:transparent}
.bc-center{text-align:center}
.bc-lead{font-size:1.08em;max-width:720px}
.bc-center .bc-lead{margin-left:auto;margin-right:auto}
/* photos: set --img:url('https://…') on the element */
.bc-photo{position:relative;border-radius:18px;min-height:300px;overflow:hidden;background-color:var(--bc-brand);background-image:var(--img,none),linear-gradient(135deg,var(--bc-brand),color-mix(in srgb,var(--bc-brand) 60%,var(--bc-accent)) 60%,var(--bc-accent));background-size:cover;background-position:var(--pos,center)}
.bc-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.5))}
.bc-photo span{position:absolute;left:16px;bottom:12px;z-index:2;color:#fff;font-size:.85em;font-weight:600}
/* buttons: Title Case is typed in the markup. Colours + icons inherit theme. */
.bc-btn{display:inline-flex;align-items:center;gap:10px;padding:.85em 1.8em;border-radius:999px;background:var(--bc-accent);color:var(--bc-on-accent);border:2px solid var(--bc-accent);font-weight:700;line-height:1.2;transition:transform .25s,box-shadow .25s,background .25s}
.bc-btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px color-mix(in srgb,var(--bc-accent) 35%,transparent);color:var(--bc-on-accent)}
.bc-btn.ghost{background:transparent;color:var(--bc-brand)}
.bc-btn.ghost:hover{background:var(--bc-brand);border-color:var(--bc-brand);color:#fff;box-shadow:none}
.bc-btn.light{background:#fff;color:var(--bc-brand);border-color:#fff}
.bc-btn.light:hover{color:var(--bc-brand)}
.bc-btn.sm{padding:.65em 1.4em;font-size:.92em}
/* hero */
.bc-hero{background:linear-gradient(120deg,var(--bc-ink),var(--bc-brand) 75%);color:rgba(255,255,255,.88);border:0}
.bc-hero h4,.bc-hero h3{color:#fff}
.bc-hero .bc-grid2{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.bc-hero .bc-photo{min-height:360px}
.bc-hero .bc-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
/* journey */
.bc-journey{display:grid;grid-template-columns:repeat(5,1fr);margin-top:28px;counter-reset:j}
.bc-journey div{padding:18px 8px;text-align:center;background:#fff;border:1px solid var(--bc-line);font-weight:700;letter-spacing:.1em;color:var(--bc-brand);font-size:.85em}
.bc-journey div:first-child{border-radius:14px 0 0 14px}.bc-journey div:last-child{border-radius:0 14px 14px 0}
.bc-journey div::before{counter-increment:j;content:"0" counter(j);display:block;color:var(--bc-accent);font-size:.8em;margin-bottom:2px}
/* stage header */
.bc-stage{display:flex;align-items:center;gap:16px;margin-bottom:28px}
.bc-stage .n{flex:0 0 auto;width:56px;height:56px;border-radius:50%;background:var(--bc-brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.bc-stage h2,.bc-stage h4{margin:0}
.bc-stage h2.bc-acc{margin-bottom:.2em}
/* cards */
.bc-cards{display:grid;gap:22px}
.bc-cards.two{grid-template-columns:repeat(2,1fr)}
.bc-cards.three{grid-template-columns:repeat(3,1fr)}
.bc-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--bc-line);border-radius:18px;padding:30px;transition:transform .3s,box-shadow .3s}
.bc-tint .bc-card,.bc-warm .bc-card{border-color:transparent}
.bc-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px color-mix(in srgb,var(--bc-ink) 14%,transparent)}
.bc-card::before{content:"";position:absolute;left:30px;top:0;width:50px;height:4px;background:var(--bc-accent);border-radius:0 0 4px 4px}
.bc-card h3{margin-top:6px}
.bc-card .bc-tag{color:var(--bc-brand);font-weight:600;margin-bottom:14px}
.bc-card .bc-btn{margin-top:auto;align-self:flex-start}
/* lists: circle + thin right chevron. Add class "check" for the check-mark circle (as in Key Benefits). All centred on the text. */
.bc-list{list-style:none;margin:0 0 20px;padding:0}
.bc-list li{display:flex;align-items:center;gap:12px;padding:6px 0;margin:0}
.bc-list li::before{content:"";flex:0 0 22px;width:22px;height:22px;background:var(--bc-brand);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10.5'/%3E%3Cpath d='M10.5 8l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10.5'/%3E%3Cpath d='M10.5 8l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat}
.bc-list.check li::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10.5'/%3E%3Cpath d='M7.8 12.4l3 3 5.4-6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10.5'/%3E%3Cpath d='M7.8 12.4l3 3 5.4-6'/%3E%3C/svg%3E")}
.bc-list.cols{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}
/* outcome */
.bc-outcome{margin-top:auto;padding:14px 18px;border-left:4px solid var(--bc-accent);background:var(--bc-warm);border-radius:0 12px 12px 0;color:var(--bc-ink);font-weight:600}
.bc-card .bc-outcome{margin-top:6px}
/* pills + steps */
.bc-pills{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 22px}
.bc-pills span{padding:.5em 1.1em;border-radius:999px;background:var(--bc-tint);color:var(--bc-brand);font-weight:600;font-size:.92em}
.bc-steps{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0 6px;font-weight:700;color:var(--bc-brand)}
.bc-steps b{padding:.5em 1.1em;background:var(--bc-tint);border-radius:999px;font-weight:700}
.bc-steps i{font-style:normal;color:var(--bc-accent)}
/* split */
.bc-split{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.bc-split.rev .bc-photo{order:2}
.bc-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:28px 0}
.bc-role{background:#fff;border:1px solid var(--bc-line);border-radius:14px;padding:20px}
.bc-role h3{color:var(--bc-brand)}
.bc-role p{font-size:.92em;margin:0}
/* bring */
.bc-bring{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:26px 0}
.bc-bring div{padding:24px;border-radius:16px;background:var(--bc-brand);color:rgba(255,255,255,.9)}
.bc-bring div:last-child{background:var(--bc-accent);color:#fff}
.bc-bring h3{color:#fff;letter-spacing:.12em;text-transform:uppercase}
.bc-bring p{margin:0;font-weight:700}
.bc-tagline{font-weight:700;color:var(--bc-ink)}
/* packages */
.bc-pack{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.bc-pk{display:flex;flex-direction:column;background:#fff;border:1px solid var(--bc-line);border-radius:16px;padding:24px 18px;transition:transform .3s,border-color .3s,box-shadow .3s}
.bc-pk:hover{transform:translateY(-5px);border-color:var(--bc-accent);box-shadow:0 16px 32px color-mix(in srgb,var(--bc-ink) 14%,transparent)}
.bc-pk .step{color:var(--bc-accent);font-weight:700;letter-spacing:.14em;font-size:.8em}
.bc-pk p.sub{font-weight:600;color:var(--bc-brand)}
.bc-pk p.inc{font-size:.86em;border-top:1px dashed var(--bc-line);padding-top:12px;margin:auto 0 0}
/* faq (no JS: native details/summary) */
.bc-faq{margin-top:24px}
.bc-faq details{border:1px solid var(--bc-line);border-radius:12px;margin-bottom:12px;background:#fff}
.bc-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;font-weight:700;color:var(--bc-ink)}
.bc-faq summary::-webkit-details-marker{display:none}
.bc-faq summary svg.ic{transition:transform .25s}
.bc-faq details[open]{background:var(--bc-ink);border-color:var(--bc-ink)}
.bc-faq details[open] summary{color:#fff}
.bc-faq details[open] summary svg.ic{transform:rotate(45deg);color:var(--bc-accent)}
.bc-faq .a{padding:0 20px 18px;color:rgba(255,255,255,.85)}
/* final cta */
.bc-cta{background:linear-gradient(120deg,var(--bc-brand),var(--bc-ink));color:rgba(255,255,255,.88);text-align:center;border:0}
.bc-cta h4{color:#fff}
.bc-cta .bc-btn{margin:6px}
/* responsive */
@media(max-width:1280px){
.bc-pack{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:1100px){
.bc-pack{grid-template-columns:repeat(2,1fr)}
.bc-cards.three,.bc-roles{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
.bc-sec{padding:32px 22px}
.bc-hero .bc-grid2,.bc-split,.bc-cards.two,.bc-bring{grid-template-columns:1fr}
.bc-split.rev .bc-photo{order:0}
.bc-journey{grid-template-columns:1fr}
.bc-journey div,.bc-journey div:first-child,.bc-journey div:last-child{border-radius:0}
.bc-list.cols{grid-template-columns:1fr}
.bc-photo,.bc-hero .bc-photo{min-height:230px}
}
@media(max-width:600px){
.bc-pack,.bc-cards.three,.bc-roles{grid-template-columns:1fr}
.bc-card{padding:24px}
}
