/* ==========================================================================
   BRENCUR SYSTEMS: design system for Elementor
   Ported from the static build (site/assets/css/*.css). Ratios in comments are
   measured WCAG 2.1.

   How this file relates to Elementor:
     - Elementor owns structure, backgrounds, padding, gaps and direction. Those
       stay editable from the Layout and Style tabs.
     - This file owns the design system, applied through bc-* classes set on the
       elements. Column widths are driven through Elementor's own --width custom
       property, so no !important is needed and the cascade stays predictable.
     - Elementor puts custom CSS classes on the OUTER .elementor-element wrapper,
       while the real h1/p/img sit one level in. Note that current Elementor ships
       optimised markup WITHOUT the .elementor-widget-container div, so nothing
       here may depend on that class.
     - Elementor's per-widget stylesheets are enqueued AFTER this file, so a rule
       that merely ties on specificity with one of them loses. Where that matters
       the selectors below carry an extra class on purpose.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-var.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- BRAND (from the logo vectors, exact) --- */
  --bc-navy:   #031346;   /* 17.71:1 on white */
  --bc-cyan:   #1990F6;   /*  5.37:1 on navy, accent on DARK only */
  --bc-white:  #FFFFFF;

  /* Brand cyan is 3.30:1 on white and cannot carry text or a white label. */
  --bc-link:        #0B5FBF;   /* 5.79:1 on white, 5.36:1 on grey */
  --bc-link-hover:  #084A96;
  --bc-navy-hover:  #0A2472;
  --bc-navy-deep:   #020D33;

  --bc-ink:     #1B1F2A;   /* 15.1:1 on white */
  --bc-ink-2:   #414A61;   /*  8.4:1 */
  --bc-ink-3:   #5D6478;   /*  5.6:1 */

  --bc-grey:    #F4F5F7;
  --bc-grey-2:  #EAECF0;
  --bc-line:    #DDE1E8;
  --bc-line-2:  #C7CDD8;

  --bc-on-dark:   #FFFFFF;
  --bc-on-dark-2: #AEB6CE;  /* 8.6:1 on navy */

  --bc-font: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;

  --bc-fs-hero: clamp(2.125rem, 1.55rem + 2.55vw, 3.25rem);   /* 34 to 52 */
  --bc-fs-h2:   clamp(1.5rem, 1.29rem + 0.95vw, 2rem);        /* 24 to 32 */
  --bc-fs-h3:   1.125rem;
  --bc-fs-lead: clamp(1.0625rem, 1.01rem + 0.25vw, 1.1875rem);
  --bc-fs-body: 1rem;
  --bc-fs-sm:   0.9375rem;
  --bc-fs-xs:   0.8125rem;

  --bc-radius: 4px;
  --bc-radius-lg: 6px;
  --bc-pill: 999px;

  --bc-shadow-lift: 0 6.4px 14.4px rgba(0,0,0,.11), 0 1.2px 3.6px rgba(0,0,0,.08);

  --bc-dur: 200ms;
  --bc-ease: cubic-bezier(.33,0,.67,1);

  --bc-container: 1300px;
  --bc-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --bc-nav-h: 68px;
}

@media (prefers-reduced-motion: reduce) { :root { --bc-dur: 1ms; } }

/* --- GROUND ---------------------------------------------------------------- */

/* The Elementor kit writes `line-height: 1.6em` on the body class, which computes
   to a frozen 25.6px and inherits verbatim, so every 13px and 15px paragraph gets
   desktop leading. The attribute selector beats `.elementor-kit-N` (0,1,0) and
   survives a kit post-ID change. */
body[class*="elementor-kit-"] { line-height: 1.6; }

body {
  font-family: var(--bc-font);
  font-size: var(--bc-fs-body);
  line-height: 1.6;
  color: var(--bc-ink-2);
  background: var(--bc-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  overflow-x: hidden;
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bc-nav-h) + 1rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

h1, h2, h3, h4,
.elementor-heading-title {
  font-family: var(--bc-font);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: var(--bc-ink);
}
.elementor-widget-heading h1.elementor-heading-title { font-size: var(--bc-fs-hero); line-height: 1.18; letter-spacing: -0.022em; }
.elementor-widget-heading h2.elementor-heading-title { font-size: var(--bc-fs-h2); }
.elementor-widget-heading h3.elementor-heading-title { font-size: var(--bc-fs-h3); }

.elementor-widget-text-editor p { text-wrap: pretty; margin: 0; }
.elementor-widget-text-editor p + p { margin-top: 1rem; }
.elementor-widget-text-editor a { color: var(--bc-link); text-decoration: underline; text-underline-offset: 3px; }
.elementor-widget-text-editor a:hover { color: var(--bc-link-hover); }

::selection { background: var(--bc-cyan); color: var(--bc-white); }
:focus-visible { outline: 2px solid var(--bc-link); outline-offset: 2px; border-radius: 2px; }
.bc-on-dark :focus-visible { outline-color: var(--bc-white); }

/* --- CONTAINER PADDING MODEL -----------------------------------------------
   Elementor gives every container a default padding (10px block, plus whatever
   the kit sets inline) and it applies to nested containers too, so a plain row
   like the nav's right-hand group silently gains 10px top and bottom and 40px
   either side. This design drives vertical rhythm from explicit section padding
   and container gaps, and puts the horizontal gutter on the boxed section
   wrappers, so the defaults are cleared here and handed back deliberately.

   Per-element padding set in the Elementor editor writes --padding-* directly
   and still wins, so the Padding field on any container keeps working. */

/* Doubled class: Elementor sets these at (0,1,0) and the order of the two
   stylesheets is not something to depend on. */
.e-con.e-con {
  --container-default-padding-top: 0px;
  --container-default-padding-bottom: 0px;
  --container-default-padding-left: 0px;
  --container-default-padding-right: 0px;
}

/* A boxed container caps its inner at --bc-container and centres it, which
   leaves nothing at the edges once the viewport narrows past that. Restoring the
   gutter here rather than in the Elementor padding fields keeps it fluid, and
   the two-part selector puts it safely above Elementor's per-element rules. */
.bc-nav.e-con > .e-con-inner,
.bc-band-stats.e-con > .e-con-inner,
.bc-section.e-con > .e-con-inner,
.bc-footer.e-con > .e-con-inner { padding-inline: var(--bc-gutter); }

/* Section rhythm is FLUID in the static build: --section-y is
   clamp(3.5rem, 6vw, 5.5rem), which is 56px on a phone and 86.4px at 1440.
   An Elementor padding field holds one fixed number per breakpoint and cannot
   express that, so a flat 80px was reaching phones and adding 48px of dead
   space to every one of the seven sections. The token is reproduced here
   instead, and the padding field has been removed from those containers so
   there is a single source of truth. */
.bc-section.e-con > .e-con-inner { padding-block: clamp(3.5rem, 6vw, 5.5rem); }

/* --- ON DARK ---------------------------------------------------------------- */

.bc-on-dark, .bc-on-dark .elementor-widget-text-editor { color: var(--bc-on-dark-2); }
.bc-on-dark .elementor-heading-title { color: var(--bc-white); }
.bc-on-dark .elementor-widget-text-editor p { color: var(--bc-on-dark-2); }

/* --- EYEBROW ----------------------------------------------------------------- */

.bc-eyebrow .elementor-heading-title {
  display: block; font-size: var(--bc-fs-xs); font-weight: 600; line-height: 1.6;
  letter-spacing: .08em; text-transform: uppercase; color: var(--bc-ink-3);
}
.bc-eyebrow + .elementor-widget { margin-top: .75rem; }
.bc-on-dark .bc-eyebrow .elementor-heading-title { color: var(--bc-cyan); }

.bc-eyebrow--rule .elementor-heading-title { display: flex; align-items: center; gap: .75rem; width: fit-content; }
.bc-eyebrow--rule .elementor-heading-title::before { content: ''; width: 28px; height: 2px; background: var(--bc-cyan); }

/* --- SECTION HEADS ------------------------------------------------------------ */

.bc-shead { --width: 100%; max-width: 60ch; }
.bc-shead .elementor-widget-heading + .elementor-widget-text-editor { margin-top: .75rem; }
.bc-shead__lead p { font-size: var(--bc-fs-lead); color: var(--bc-ink-2); }
.bc-on-dark .bc-shead__lead p { color: var(--bc-on-dark-2); }

/* --- BUTTONS -------------------------------------------------------------------
   Square-ish, modest. Primary is navy: white on cyan is 3.30:1 and fails AA. */

.bc-btn .elementor-button {
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  padding: .78rem 1.6rem; min-height: 46px;
  font-family: var(--bc-font); font-size: var(--bc-fs-sm); font-weight: 600;
  line-height: 1.3; text-align: center; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--bc-pill); cursor: pointer;
  transition: background-color var(--bc-dur) var(--bc-ease), border-color var(--bc-dur) var(--bc-ease), color var(--bc-dur) var(--bc-ease);
}
.bc-btn .elementor-button-content-wrapper { gap: .5rem; }

.bc-btn--primary .elementor-button { background-color: var(--bc-navy); color: var(--bc-white); border-color: var(--bc-navy); }
.bc-btn--primary .elementor-button:hover { background-color: var(--bc-navy-hover); border-color: var(--bc-navy-hover); color: var(--bc-white); }

.bc-btn--white .elementor-button { background-color: var(--bc-white); color: var(--bc-navy); border-color: var(--bc-white); }
.bc-btn--white .elementor-button:hover { background-color: var(--bc-grey-2); border-color: var(--bc-grey-2); color: var(--bc-navy); }

.bc-btn--ghost .elementor-button { background-color: transparent; color: var(--bc-ink); border-color: var(--bc-line-2); }
.bc-btn--ghost .elementor-button:hover { background-color: var(--bc-grey-2); border-color: var(--bc-ink-3); }
.bc-on-dark .bc-btn--ghost .elementor-button { color: var(--bc-white); border-color: rgba(255,255,255,.5); }
.bc-on-dark .bc-btn--ghost .elementor-button:hover { background-color: rgba(255,255,255,.1); border-color: var(--bc-white); }

.bc-btn--block, .bc-btn--block .elementor-button { width: 100%; }

/* Chevron link: the signature enterprise "Learn more >" affordance. */
.bc-chev .elementor-button {
  background-color: transparent; border-color: transparent; padding: 0;
  min-height: 44px; color: var(--bc-link);
  font-family: var(--bc-font); font-size: var(--bc-fs-sm); font-weight: 600;
  display: inline-flex; align-items: center;
}
.bc-chev .elementor-button:hover { background-color: transparent; color: var(--bc-link-hover); text-decoration: underline; text-underline-offset: 3px; }
.bc-chev .elementor-button-icon { font-size: 12px; transition: transform var(--bc-dur) var(--bc-ease); }
.bc-chev .elementor-button:hover .elementor-button-icon { transform: translateX(3px); }
.bc-on-dark .bc-chev .elementor-button { color: var(--bc-cyan); }
@media (prefers-reduced-motion: reduce) { .bc-chev .elementor-button-icon { transition: none; } }

/* --- ICONS ---------------------------------------------------------------------
   Elementor renders Font Awesome as inline <svg>, which carries its own fill and
   ignores the wrapper's colour. Handing every icon `fill: currentColor` puts
   them back under the control of the colour rules above. */

.bc-chev .elementor-button-icon svg,
.bc-stance .elementor-icon-list-icon svg,
.bc-footer__list .elementor-icon-list-icon svg,
.bc-faq .e-n-accordion-item-title-icon svg,
.elementor-icon-list-icon svg { fill: currentColor; }

.bc-chev .elementor-button-icon { color: inherit; }
.bc-stance .elementor-icon-list-icon { color: var(--bc-cyan); }
.bc-footer__list .elementor-icon-list-icon { color: var(--bc-on-dark-2); }
/* Elementor orders the icon before the title (--n-accordion-title-icon-order:-1)
   and ships a +/- pair. The static build put a rotating chevron on the right, so
   the packaged icon is hidden and the chevron redrawn here. This is accordion
   chrome, not content: the questions and answers stay fully editable. */
.bc-faq .e-n-accordion { --n-accordion-title-icon-order: 0; }
.bc-faq .e-n-accordion .e-n-accordion-item-title-icon { display: none; }
.bc-faq .e-n-accordion-item-title-header { flex: 1 1 auto; text-align: left; }
.bc-faq .e-n-accordion-item-title { list-style: none; }
.bc-faq .e-n-accordion-item-title::-webkit-details-marker { display: none; }

.bc-faq .e-n-accordion-item-title::after {
  content: ''; flex: none; width: 12px; height: 12px;
  border-right: 2px solid var(--bc-ink-3); border-bottom: 2px solid var(--bc-ink-3);
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--bc-dur) var(--bc-ease);
}
.bc-faq .e-n-accordion-item[open] > .e-n-accordion-item-title::after { transform: rotate(-135deg) translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .bc-faq .e-n-accordion-item-title::after { transition: none; } }

/* --- STICKY NAV ------------------------------------------------------------------ */

.bc-nav {
  position: sticky; top: 0; z-index: 100;
  background-color: var(--bc-white);
  border-bottom: 1px solid var(--bc-line);
}
.admin-bar .bc-nav { top: 32px; }
@media (max-width: 782px) { .admin-bar .bc-nav { top: 46px; } }
@media (max-width: 600px) { .admin-bar .bc-nav { top: 0; } }

.bc-nav > .e-con-inner { min-height: var(--bc-nav-h); flex-wrap: nowrap; }
.bc-nav__logo { flex: none; display: flex; align-items: center; min-height: 44px; text-align: left; }
.bc-nav__logo img { width: auto; height: 34px; }
.bc-nav__end { --width: auto; margin-left: auto; flex: none; }

/* Below 768px Elementor forces every container to --width:100% so that sections
   stack, which is right for the page and wrong for the nav bar. The bar's two
   groups opt out explicitly; the three-part selector clears Elementor's
   two-class media rule. */
.bc-nav > .e-con-inner > .bc-nav__end,
.bc-nav > .e-con-inner > .bc-nav__links { --width: auto; width: auto; flex: 0 0 auto; }

.bc-nav__mail p { font-size: var(--bc-fs-sm); margin: 0; white-space: nowrap; }
.bc-nav__mail a { color: var(--bc-ink-2); text-decoration: none; }
.bc-nav__mail a:hover { color: var(--bc-link); }
/* Measured, not guessed: below 1300px the logo, six links, address and CTA no
   longer fit on one 1300px row and the link list wraps to a second line. The
   address is the least load-bearing of the four, so it goes first. */
@media (max-width: 1299px) { .bc-nav__mail { display: none; } }

.bc-nav__cta .elementor-button { white-space: nowrap; }

.bc-nav__links { --width: auto; width: auto; flex: 0 1 auto; min-width: 0; }
.bc-nav__links .elementor-icon-list-items { gap: 0 1.5rem; flex-wrap: nowrap; }
.bc-nav__links .elementor-icon-list-item { margin: 0; }
.bc-nav__links .elementor-icon-list-item > a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0;
  font-size: var(--bc-fs-sm); color: var(--bc-ink-2);
  border-bottom: 2px solid transparent;
  transition: color var(--bc-dur) var(--bc-ease), border-color var(--bc-dur) var(--bc-ease);
}
.bc-nav__links .elementor-icon-list-item > a:hover { color: var(--bc-ink); border-bottom-color: var(--bc-line-2); }
.bc-nav__links .elementor-icon-list-item.bc-is-current > a { color: var(--bc-ink); border-bottom-color: var(--bc-cyan); }
.bc-nav__links .elementor-icon-list-icon { display: none; }

/* Hamburger. Injected by brencur.js: free Elementor has no nav-menu widget, so
   the toggle is a mechanism rather than content and does not need to be
   editable. Everything it reveals is the editable icon-list above. */
.bc-navtoggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none; background: transparent;
  border: 1px solid var(--bc-line-2); border-radius: var(--bc-radius);
  cursor: pointer; color: var(--bc-ink); padding: 0;
}
/* Elementor's kit styles bare <button> through `.elementor-kit-N button` at
   (0,1,1), which outranks a plain `.bc-navtoggle` (0,1,0) and repaints the
   toggle as a navy pill: background #031346, white bars, 999px radius, and
   `padding: 13px 26px` which floors the 44px box to 54px wide. Hello
   Elementor's reset.css separately claims `button:hover` at (0,1,1) and would
   turn it crimson. Repeating the class wins on specificity rather than order.

   `display` is deliberately NOT in this block. Raising its specificity would
   beat the (0,1,0) reveal rule in the max-width:1059px query below and hide the
   hamburger at every viewport. A higher-specificity base rule already beats the
   lower-specificity :hover rules, so no :focus or :active block is needed; adding
   one would tie with :hover at (0,3,1) and, coming later, cancel the hover state
   for as long as the button holds focus after a click. */
button.bc-navtoggle.bc-navtoggle {
  width: 44px; height: 44px; padding: 0;
  background-color: transparent; background-image: none;
  color: var(--bc-ink);
  border: 1px solid var(--bc-line-2);
  border-radius: var(--bc-radius);
  box-shadow: none; text-align: center;
  transition: background-color var(--bc-dur) var(--bc-ease), border-color var(--bc-dur) var(--bc-ease);
}
button.bc-navtoggle.bc-navtoggle:hover {
  background-color: var(--bc-grey-2);
  border-color: var(--bc-ink-3);
  color: var(--bc-ink);
}

.bc-navtoggle__b { position: relative; width: 18px; height: 1.5px; background: currentColor; display: block; }
.bc-navtoggle__b::before, .bc-navtoggle__b::after {
  content: ''; position: absolute; left: 0; width: 18px; height: 1.5px; background: currentColor;
  transition: transform var(--bc-dur) var(--bc-ease), top var(--bc-dur) var(--bc-ease);
}
.bc-navtoggle__b::before { top: -6px; }
.bc-navtoggle__b::after { top: 6px; }
.bc-navtoggle[aria-expanded='true'] .bc-navtoggle__b { background: transparent; }
.bc-navtoggle[aria-expanded='true'] .bc-navtoggle__b::before { top: 0; transform: rotate(45deg); }
.bc-navtoggle[aria-expanded='true'] .bc-navtoggle__b::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1059px) {
  .bc-navtoggle { display: inline-flex; }
  .bc-nav .bc-nav__links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bc-white); border-bottom: 1px solid var(--bc-line);
    padding: .5rem var(--bc-gutter) 1.5rem;
  }
  .bc-nav.bc-nav--open .bc-nav__links { display: block; }
  .bc-nav__links .elementor-icon-list-items { display: block; }
  .bc-nav__links .elementor-icon-list-item > a { display: flex; min-height: 52px; color: var(--bc-ink); border-bottom: 1px solid var(--bc-line); }
}

@media (max-width: 420px) {
  .bc-nav > .e-con-inner { gap: .75rem; }
  .bc-nav__logo img { height: 28px; }
  .bc-nav > .e-con-inner > .bc-nav__end { gap: .5rem; }
  .bc-nav__cta .elementor-button { padding-inline: 1rem; font-size: var(--bc-fs-xs); }
}
@media (max-width: 340px) {
  .bc-nav__logo img { height: 24px; }
  .bc-nav__cta .elementor-button { padding-inline: .75rem; }
}

/* --- HERO ----------------------------------------------------------------------
   Navy copy panel with the photograph meeting it on an angled edge. The wedge is
   drawn with clip-path so it stays resolution independent, and it is applied only
   where there is width to carry it: a diagonal across a 390px screen would eat
   the headline. */

.bc-hero { position: relative; overflow: hidden; }
.bc-hero > .e-con { --width: 100%; }

/* Elementor containers default to flex-wrap:nowrap, so a two-child row shrinks
   to fit rather than stacking. The hero splits at 940px in this design, which is
   neither of Elementor's breakpoints (767 and 1024), so the stack is expressed
   here rather than in the editor's responsive tabs. */
@media (max-width: 939px) {
  .bc-hero.e-con { flex-direction: column; }
}

.bc-hero > .bc-hero__copy {
  position: relative; z-index: 2;
  padding-block: clamp(3rem, 6vw, 6rem);
  padding-left: max(var(--bc-gutter), (100vw - var(--bc-container))/2 + var(--bc-gutter));
  padding-right: var(--bc-gutter);
}

@media (min-width: 940px) {
  .bc-hero { flex-wrap: nowrap; }
  /* 1.05fr / 1fr, the ratio the static build used. */
  .bc-hero > .bc-hero__copy { --width: calc(100% * 1.05 / 2.05); padding-block: clamp(4.5rem, 8vw, 7.5rem); padding-right: 4rem; padding-left: max(var(--bc-gutter), (100vw - var(--bc-container))/2 + var(--bc-gutter)); }
  .bc-hero > .bc-hero__media { --width: calc(100% * 1 / 2.05); }
}

.bc-hero__copy .bc-eyebrow + .elementor-widget { margin-top: .75rem; }
.bc-hero__copy h1.elementor-heading-title { color: var(--bc-white); max-width: 16ch; }
.bc-hero__copy h1 .bc-accent { color: var(--bc-cyan); }
.bc-hero__copy .elementor-widget-heading + .elementor-widget-icon-list { margin-top: 1rem; }

/* The independence claim is the strongest line on the page, so it is broken into
   three chips rather than one sentence: each claim reads on its own and survives
   a two-second scan. Cyan on navy is 5.37:1; the label is white. */
/* Selectors here must not use .elementor-widget-container: this Elementor build
   emits optimised markup without that wrapper. They also have to outrank
   widget-icon-list.min.css, which is enqueued after the theme and sets
   `margin-inline: 8px` on inline list items, so an .elementor-element prefix is
   used to buy the extra class. */
.elementor-element.bc-stance .elementor-icon-list-items.elementor-inline-items {
  gap: .75rem; flex-wrap: wrap; margin-inline: 0;
}
.elementor-element.bc-stance .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item { margin-inline: 0; }
.elementor-element.bc-stance .elementor-icon-list-icon + .elementor-icon-list-text { padding-inline-start: 0; }
.bc-stance .elementor-icon-list-items .elementor-icon-list-item {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0; line-height: 1.6;
  padding: .5rem 1rem .5rem .75rem;
  background: rgba(25,144,246,.14);
  border: 1px solid rgba(25,144,246,.55);
  border-radius: var(--bc-pill);
  font-size: var(--bc-fs-sm); font-weight: 600; color: var(--bc-white);
  white-space: nowrap;
}
.bc-stance .elementor-icon-list-icon i { color: var(--bc-cyan); font-size: 15px; }
.bc-stance .elementor-icon-list-icon svg { width: 15px; height: 15px; }
.bc-stance .elementor-icon-list-items .elementor-icon-list-text { color: var(--bc-white); padding: 0; }

@media (max-width: 480px) {
  .elementor-element.bc-stance .elementor-icon-list-items.elementor-inline-items { gap: .5rem; }
  .bc-stance .elementor-icon-list-items .elementor-icon-list-item { font-size: var(--bc-fs-xs); padding-inline: .75rem; }
}

.bc-hero__sub { margin-top: 2rem; }
.bc-hero__sub p { color: var(--bc-on-dark-2); max-width: 46ch; }
.bc-actions { margin-top: 2.5rem; --width: 100%; }
@media (max-width: 559px) { .bc-actions > .elementor-widget-button, .bc-actions .elementor-button { width: 100%; } }

.bc-hero__media { position: relative; min-height: 320px; padding: 0; }
@media (min-width: 940px) { .bc-hero__media { min-height: 280px; } }
.bc-hero__media > .elementor-widget-image { position: absolute; inset: 0; width: 100%; }
.bc-hero__media > .elementor-widget-image > * { height: 100%; }
.bc-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bc-hero__media::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(120deg, rgba(3,19,70,.82) 0%, rgba(3,19,70,.30) 55%, rgba(3,19,70,.18) 100%);
  mix-blend-mode: multiply;
}

@media (min-width: 940px) {
  .bc-hero__media::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: -1px;
    width: 190px; z-index: 2; background: var(--bc-navy);
    clip-path: polygon(0 0, 100% 0, 0 100%);
  }
}

/* --- STAT BAND --------------------------------------------------------------------
   The SYSTEMS cyan from the logo. Text is navy, not white: white on this cyan
   measures 3.30:1 and fails AA, which is the constraint the whole palette is
   built around. Navy on it is 5.37:1. */

.bc-band-stats > .e-con-inner { flex-wrap: wrap; }
/* Static build: .stats gap is --s-6 (32px), tightening to --s-5 (24px) only at
   min-width 900px. The container ships the 24px flat, so the phone side is
   restored here along with the width formula that depends on it.
   Order matters: these all tie on specificity, so the base case goes first and
   the breakpoints override it. */
.bc-band-stats.e-con .bc-stat { --width: calc((100% - 24px) / 2); }

@media (max-width: 899px) {
  .bc-band-stats.e-con > .e-con-inner { gap: 2rem; }
  .bc-band-stats.e-con .bc-stat { --width: calc((100% - 32px) / 2); }
}
@media (min-width: 900px) { .bc-band-stats.e-con .bc-stat { --width: calc((100% - 72px) / 4); } }

.bc-stat__v .elementor-heading-title {
  font-size: clamp(2rem, 1.6rem + 1.8vw, 2.75rem); font-weight: 600;
  letter-spacing: -.02em; line-height: 1.1; color: var(--bc-navy);
}
/* No opacity on the unit: at .72 it measured 3.81:1. It clears AA as large text,
   but solid navy-deep gives 5.74:1 for nothing. */
.bc-stat__v .elementor-heading-title span { color: var(--bc-navy-deep); font-size: .55em; margin-left: .1em; }
.bc-stat__l { margin-top: .5rem; }
.bc-stat__l p { font-size: var(--bc-fs-sm); color: var(--bc-navy-deep); }

/* --- TILE GRID ----------------------------------------------------------------------
   The core enterprise pattern: image, heading, short body, chevron link. */

.bc-tiles > .e-con { --width: 100%; }
@media (min-width: 680px)  { .bc-tiles > .e-con { --width: calc((100% - 24px) / 2); } }
@media (min-width: 1000px) { .bc-tiles > .e-con { --width: calc((100% - 48px) / 3); } }

.bc-tile {
  background-color: var(--bc-white);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-radius-lg);
  overflow: hidden; padding: 0;
  transition: box-shadow var(--bc-dur) var(--bc-ease);
}
.bc-tile:hover { box-shadow: var(--bc-shadow-lift); }
.bc-tile__img img { aspect-ratio: 16/9; object-fit: cover; width: 100%; display: block; }
/* Two classes so this outranks Elementor's own `.e-con` sizing regardless of
   which stylesheet the site happens to load last. */
.bc-tile > .bc-tile__body { --flex-grow: 1; flex-grow: 1; padding: 1.5rem; }
.bc-tile__body .elementor-heading-title { margin-bottom: .5rem; }
.bc-tile__body .elementor-widget-text-editor p { font-size: var(--bc-fs-sm); }
.bc-tile__body > .elementor-widget-button:last-child { margin-top: auto; padding-top: 1rem; }

/* --- NUMBERED STEPS ---------------------------------------------------------------- */

.bc-steps > .e-con { --width: 100%; }
/* Static build: .steps gap is --s-6 (32px) until min-width 1060px, then --s-5. */
@media (max-width: 1059px) { .bc-steps.e-con { gap: 2rem; } }
@media (min-width: 760px) and (max-width: 1059px) { .bc-steps > .e-con { --width: calc((100% - 32px) / 2); } }
@media (min-width: 1060px) { .bc-steps > .e-con { --width: calc((100% - 72px) / 4); } }

.bc-steps > .bc-step { padding-top: 1.5rem; border-top: 3px solid var(--bc-cyan); }
.bc-step__n .elementor-heading-title { font-size: var(--bc-fs-xs); font-weight: 600; line-height: 1.6; letter-spacing: .08em; color: var(--bc-ink-3); text-transform: uppercase; }
.bc-step__n + .elementor-widget { margin-top: .5rem; }
.bc-step .elementor-widget-heading + .elementor-widget-text-editor { margin-top: .5rem; }
.bc-step .elementor-widget-text-editor p { font-size: var(--bc-fs-sm); }

/* --- AUDIT ---------------------------------------------------------------------------- */

.bc-audit > .e-con { --width: 100%; }
/* Static build: .audit__grid gap is --s-7 (40px), widening to --s-9 (64px) only
   at min-width 940px. The container ships 64px flat, which is the largest gap on
   the page once it stacks. */
@media (max-width: 939px) { .bc-audit.e-con { gap: 2.5rem; } }
@media (min-width: 940px) {
  /* 1.1fr / 0.9fr across a 64px gap. */
  .bc-audit > .bc-audit__main { --width: calc((100% - 64px) * 0.55); }
  .bc-audit > .bc-offer      { --width: calc((100% - 64px) * 0.45); }
}
.bc-audit__img img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--bc-radius-lg); display: block; }

.bc-offer {
  background-color: var(--bc-white); border: 1px solid var(--bc-line);
  border-radius: var(--bc-radius-lg); color: var(--bc-ink-2);
}
.bc-offer .elementor-heading-title { color: var(--bc-ink); }
.bc-offer .elementor-widget-text-editor p { color: var(--bc-ink-2); }
.bc-offer__rows { border-top: 1px solid var(--bc-line); margin: 1rem 0 1.5rem; --width: 100%; }
.bc-offer__rows > .bc-offer__row { padding-block: 1rem; border-bottom: 1px solid var(--bc-line); --width: 100%; }
.bc-offer__dt p { font-size: var(--bc-fs-sm); margin: 0; }
.bc-offer__dd .elementor-heading-title { font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em; color: var(--bc-navy); }
.bc-offer__note p { font-size: var(--bc-fs-sm); }
.bc-offer > .elementor-widget-button { margin-top: 1.5rem; }

/* --- COVERAGE ---------------------------------------------------------------------------- */

.bc-coverage > .e-con { --width: 100%; }
@media (min-width: 860px) { .bc-coverage > .e-con { --width: calc((100% - 64px) / 3); } }
.bc-coverage > .bc-coverage__item { padding-top: 1rem; border-top: 1px solid var(--bc-line); }
.bc-coverage__item .elementor-heading-title { margin-bottom: .5rem; }
.bc-coverage__item .elementor-widget-text-editor p { font-size: var(--bc-fs-sm); }

/* --- FAQ (nested accordion) ---------------------------------------------------------------- */

.bc-faq .e-n-accordion { border-top: 1px solid var(--bc-line); display: flex; flex-direction: column; gap: 0; }
.bc-faq .e-n-accordion-item { border-bottom: 1px solid var(--bc-line); }
.bc-faq .e-n-accordion .e-n-accordion-item-title {
  padding: 1.5rem 0; min-height: 60px; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  background: transparent; border: 0;
}
.bc-faq .e-n-accordion-item-title-text,
.bc-faq .e-n-accordion-item-title-header > * {
  font-family: var(--bc-font); font-size: var(--bc-fs-lead); font-weight: 600;
  line-height: 1.6; color: var(--bc-ink); margin: 0;
}
.bc-faq .e-n-accordion-item-title:hover .e-n-accordion-item-title-text { color: var(--bc-link); }
.bc-faq .e-n-accordion-item-title-icon { color: var(--bc-ink-3); }
.bc-faq .e-n-accordion-item > .e-con { padding: 0 0 1.5rem; max-width: 78ch; }
.bc-faq .e-n-accordion-item .elementor-widget-text-editor p { color: var(--bc-ink-2); }

/* --- CONTACT ------------------------------------------------------------------------------- */

.bc-contact > .e-con { --width: 100%; }
/* Static build: .contact__grid gap is --s-7 (40px), widening to --s-8 (48px) at
   min-width 940px; .particulars carries a 32px margin below it. */
@media (max-width: 939px) { .bc-contact.e-con { gap: 2.5rem; } }
.bc-contact__copy.e-con { gap: 2rem; }

@media (min-width: 940px) {
  /* 0.85fr / 1.15fr across a 48px gap. */
  .bc-contact > .bc-contact__copy { --width: calc((100% - 48px) * 0.425); }
  .bc-contact > .bc-contact__form { --width: calc((100% - 48px) * 0.575); }
}

.bc-particulars { border-top: 1px solid var(--bc-line); --width: 100%; }
.bc-particulars > .bc-particular { padding-block: 1rem; border-bottom: 1px solid var(--bc-line); --width: 100%; flex-wrap: nowrap; }
.bc-particular__dt { --width: 96px; flex: none; }
.bc-particular__dt .elementor-heading-title { font-size: var(--bc-fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bc-ink-3); }
.bc-particular__dd { --width: auto; min-width: 0; }
.bc-particular__dd p { margin: 0; font-size: var(--bc-fs-sm); color: var(--bc-ink); overflow-wrap: anywhere; }
.bc-particular__dd a { color: var(--bc-link); }
@media (max-width: 420px) {
  .bc-particulars > .bc-particular { flex-direction: column; gap: .25rem; }
  .bc-particulars .bc-particular__dt { --width: 100%; }
}

.bc-form { background: var(--bc-white); border: 1px solid var(--bc-line); border-radius: var(--bc-radius-lg); padding: 2rem; min-height: 460px; }
.bc-form__t { margin-bottom: 1rem; font-size: var(--bc-fs-h3); font-weight: 600; color: var(--bc-ink); }
.bc-form__fb {
  display: grid; place-content: center; min-height: 320px; text-align: center;
  border: 1px dashed var(--bc-line-2); border-radius: var(--bc-radius);
  color: var(--bc-ink-3); font-size: var(--bc-fs-sm); padding: 2rem;
}
.bc-contact__privacy p { font-size: var(--bc-fs-sm); color: var(--bc-ink-3); }

/* --- FOOTER ---------------------------------------------------------------------------------- */

.bc-footer { font-size: var(--bc-fs-sm); }
.bc-footer__cols > .e-con { --width: 100%; }
@media (min-width: 620px)  { .bc-footer__cols > .e-con { --width: calc((100% - 32px) / 2); } }
@media (min-width: 1000px) {
  .bc-footer__cols > .bc-footer__brand { --width: calc(34% - 24px); }
  .bc-footer__cols > .bc-footer__col   { --width: calc(22% - 24px); }
}

.bc-footer__logo { text-align: left; }
.bc-footer__logo img { width: auto; height: 30px; }
/* No margin here: the footer brand container already carries an 8px gap, and the
   two used to stack into 16px. */
.bc-footer__about p { margin-top: 0; max-width: 34ch; font-size: var(--bc-fs-sm); color: var(--bc-on-dark-2); }
.bc-footer__h .elementor-heading-title { font-size: var(--bc-fs-sm); font-weight: 600; color: var(--bc-white); margin-bottom: .25rem; }

.bc-footer__list .elementor-icon-list-items .elementor-icon-list-item { margin: 0; padding: 0; }
.bc-footer__list .elementor-icon-list-item > a,
.bc-footer__list .elementor-icon-list-item > span {
  display: inline-flex; align-items: center; min-height: 44px; gap: .5rem;
  color: var(--bc-on-dark-2); transition: color var(--bc-dur) var(--bc-ease);
}
.bc-footer__list .elementor-icon-list-item > a:hover { color: var(--bc-white); text-decoration: underline; text-underline-offset: 3px; }
.bc-footer__list .elementor-icon-list-icon i { color: var(--bc-on-dark-2); font-size: 15px; }
.bc-footer__list .elementor-icon-list-text { color: inherit; padding: 0; }

.bc-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.16); margin-top: 2.5rem; --width: 100%;
  font-size: var(--bc-fs-xs);
}
.bc-footer__bottom p { font-size: var(--bc-fs-xs); color: var(--bc-on-dark-2); margin: 0; line-height: 1.6; }
.bc-footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; color: var(--bc-on-dark-2); text-decoration: none; }
.bc-footer__bottom a:hover { color: var(--bc-white); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 619px) { .bc-footer > .e-con-inner > .bc-footer__bottom { justify-content: center; text-align: center; } }

/* --- MOTION ---------------------------------------------------------------------
   Text only, and nothing in the header.

   The nav and the hero are deliberately excluded: they are the first thing a
   reader sees and they should simply be there. No entrance stagger, no image
   scale, no shadow appearing under the nav on scroll. Everything below the fold
   animates its TEXT as it is reached, and nothing else. Photographs, cards and
   container backgrounds never move; only the words inside them rise and fade.

   The motion itself is a 14px rise over 480ms, one direction, no bounce.

   Mechanism. The hidden state is written against real structural selectors, not
   against a class JavaScript has to add, because adding it after the first paint
   would show the text and then snatch it away. An inline script in <head> adds
   .bc-anim to <html> before anything renders; brencur.js then adds .is-in to the
   GROUP as it scrolls into view, and its children stagger off :nth-child.

   Three ways it fails safe, because text that stays invisible is far worse than
   text that does not animate:
     1. No JavaScript: .bc-anim is never added, so nothing is ever hidden.
     2. JavaScript throws before the reveals are armed: the inline script's own
        3 second timer adds .bc-anim-fallback, which reveals everything.
     3. prefers-reduced-motion, or the Elementor editor: handled at the end.
   ------------------------------------------------------------------------------ */

.bc-anim .bc-shead > *,
.bc-anim .bc-tile__body > *,
.bc-anim .bc-step > *,
.bc-anim .bc-coverage__item > *,
.bc-anim .bc-band-stats .bc-stat > * {
  opacity: 0;
  transform: translateY(14px);
}

.bc-anim .bc-shead.is-in > *,
.bc-anim .bc-tile__body.is-in > *,
.bc-anim .bc-step.is-in > *,
.bc-anim .bc-coverage__item.is-in > *,
.bc-anim .bc-band-stats.is-in .bc-stat > *,
.bc-anim.bc-anim-fallback .bc-shead > *,
.bc-anim.bc-anim-fallback .bc-tile__body > *,
.bc-anim.bc-anim-fallback .bc-step > *,
.bc-anim.bc-anim-fallback .bc-coverage__item > *,
.bc-anim.bc-anim-fallback .bc-band-stats .bc-stat > * {
  opacity: 1;
  transform: none;
  transition: opacity .48s var(--bc-ease), transform .48s var(--bc-ease);
}

/* Stagger within a block, so a heading leads its paragraph rather than the two
   arriving as one slab. Capped at the fourth child. */
.bc-anim .is-in > *:nth-child(2) { transition-delay: .07s; }
.bc-anim .is-in > *:nth-child(3) { transition-delay: .14s; }
.bc-anim .is-in > *:nth-child(n+4) { transition-delay: .21s; }

/* The FAQ reveals whole rather than row by row: staggering six one-line
   questions looks like a loading state. */
.bc-anim .bc-faq { opacity: 0; transform: translateY(14px); }
.bc-anim .bc-faq.is-in,
.bc-anim.bc-anim-fallback .bc-faq {
  opacity: 1; transform: none;
  transition: opacity .48s var(--bc-ease), transform .48s var(--bc-ease);
}

/* Tabular figures so a counting number cannot change the row's width mid-count. */
.bc-stat__v .elementor-heading-title { font-variant-numeric: tabular-nums; }

/* Reduced motion, and the Elementor editor, get the finished state immediately.
   Editing a page whose text fades out on every canvas refresh is miserable, and
   the editor is not where motion should be judged anyway. */
@media (prefers-reduced-motion: reduce) {
  .bc-anim .bc-shead > *, .bc-anim .bc-tile__body > *, .bc-anim .bc-step > *,
  .bc-anim .bc-coverage__item > *, .bc-anim .bc-band-stats .bc-stat > *, .bc-anim .bc-faq {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

body.elementor-editor-active .bc-shead > *,
body.elementor-editor-active .bc-tile__body > *,
body.elementor-editor-active .bc-step > *,
body.elementor-editor-active .bc-coverage__item > *,
body.elementor-editor-active .bc-band-stats .bc-stat > *,
body.elementor-editor-active .bc-faq {
  opacity: 1 !important; transform: none !important; transition: none !important;
}

/* The HubSpot embed. Height is reserved by .bc-form so the form arriving cannot
   push the page around; HubSpot brings its own field styling. */
.bc-form .hs-form-frame { min-height: 320px; }

/* --- PROSE PAGES (privacy policy, terms) ------------------------------------
   Long-form legal copy on a page whose type scale is built for marketing blocks.
   The measure is capped for readability rather than filling the 1220px grid. */

/* Elementor caps widget width with `.e-con.e-con > .e-con-inner > .elementor-widget`,
   deliberately doubling the class to reach (0,4,0). Matching that here rather
   than reaching for !important. */
.bc-section.bc-prose.e-con.e-con > .e-con-inner > * { max-width: 74ch; }
.bc-prose .bc-shead { margin-bottom: 0; }
.bc-prose h1.elementor-heading-title { font-size: var(--bc-fs-h1-prose, clamp(2rem, 1.6rem + 1.8vw, 2.75rem)); }
.bc-prose h2.elementor-heading-title { font-size: 1.25rem; margin-top: 1rem; }
.bc-prose .elementor-widget-text-editor p { margin-bottom: 0; }
.bc-prose .elementor-widget-text-editor ul {
  list-style: disc; padding-left: 1.25rem; margin-top: .75rem; display: grid; gap: .5rem;
}
.bc-prose .elementor-widget-text-editor li { font-size: var(--bc-fs-body); }
.bc-prose .elementor-widget-text-editor strong { color: var(--bc-ink); }

/* The review notice. It is a plain container so it can be deleted in one click
   from the Elementor navigator once the policy has been completed. */
.bc-notice { border: 1px solid #E8B923; border-radius: var(--bc-radius-lg); max-width: 74ch; }
.bc-notice .bc-notice__h .elementor-heading-title { font-size: var(--bc-fs-h3); margin-top: 0; }
.bc-notice .elementor-widget-text-editor p { color: var(--bc-ink-2); font-size: var(--bc-fs-sm); }

/* --- Narrow-phone hardening -------------------------------------------------------------------
   At 320px the nav row and the contact particulars overflowed. Anything that can
   carry a long unbroken token gets permission to break. */

.bc-tile p, .bc-step p, .bc-shead p, .bc-faq p, .bc-footer__about p { overflow-wrap: anywhere; }

/* --- Editor-only: keep the sticky nav from covering the Elementor toolbar ---------------------- */
.elementor-editor-active .bc-nav { position: relative; top: 0; }