.elementor-kit-6{--e-global-color-primary:#3E4A33;--e-global-color-secondary:#93A681;--e-global-color-text:#23241C;--e-global-color-accent:#14150F;--e-global-color-plaster:#F2EFE8;--e-global-color-plaster2:#FAF8F3;--e-global-color-stone:#E4DFD4;--e-global-color-rule:#D5CFC2;--e-global-color-muted:#6A6A5F;--e-global-color-darkrule:#2E2F26;--e-global-color-onink:#FDFCF8;--e-global-color-onink2:#C3C1B6;--e-global-color-error:#8E2C1F;--e-global-typography-primary-font-family:"Archivo";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Archivo";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Archivo";--e-global-typography-text-font-size:17px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.6em;--e-global-typography-accent-font-family:"Archivo";--e-global-typography-accent-font-size:11px;--e-global-typography-accent-font-weight:600;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-letter-spacing:2.6px;background-color:#F2EFE8;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1320px;}.e-con{--container-max-width:1320px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1080px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:760px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ==========================================================================
   BadContractorLaw.com — Elementor kit custom CSS

   Goes in Site Settings → Custom CSS. This is deliberately ONLY the things
   Elementor has no native control for. Everything expressible as a widget
   control (typography, colour, spacing, borders, alignment) is set on the
   widgets themselves and bound to the kit's global tokens — not duplicated here.

   Values are taken from the verified reference build, which was measured
   against the source design at 1470/1024/768/500/375/320px with every section
   height matching exactly.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */

:root {
  --bcl-plaster:   #F2EFE8;
  --bcl-plaster2:  #FAF8F3;
  --bcl-stone:     #E4DFD4;
  --bcl-rule:      #D5CFC2;
  --bcl-ink:       #14150F;
  --bcl-text:      #23241C;
  --bcl-muted:     #6A6A5F;
  --bcl-accent:    #3E4A33;
  --bcl-accent-lt: #93A681;
  --bcl-dark-rule: #2E2F26;

  --bcl-dim:   0.9;                        /* hero overlay 90% */
  --bcl-slant: clamp(26px, 4vw, 72px);     /* angled edge      */
  --bcl-spine: clamp(76px, 7vw, 116px);    /* §NN gutter       */

  --bcl-hero-w: min(52%, 860px);
  --bcl-hero-fade: linear-gradient(96deg, #14150F 0%, #14150F 46%,
                    rgba(20, 21, 15, .92) 62%, rgba(20, 21, 15, .42) 100%);

  --bcl-spine-rule: var(--bcl-rule);
  --bcl-header-h: 82px;
}

/* The source swaps these with matchMedia; media queries reach the same result
   without a JS dependency, and keep it correct before scripts run. */
@media (max-width: 1080px) { :root { --bcl-spine: 0px; } }
@media (max-width: 760px) {
  :root {
    --bcl-hero-w: 100%;
    --bcl-hero-fade: linear-gradient(178deg, rgba(20, 21, 15, .86) 0%,
                      rgba(20, 21, 15, .93) 45%, #14150F 100%);
  }
}

/* --- 1b. Fluid type -------------------------------------------------------
   Elementor globals carry family / weight / letter-spacing / colour. The sizes
   below are continuous clamp() scales, which two breakpoints cannot reproduce —
   and they are what made the reference build match the source exactly at every
   width. Applied via each widget's CSS Classes field. */

.bcl-t-hero, .bcl-t-hero .elementor-heading-title    { font-size: clamp(36px, 6.2vw, 84px) !important; line-height: 1.02; letter-spacing: -.035em; }
.bcl-t-section, .bcl-t-section .elementor-heading-title { font-size: clamp(32px, 4.6vw, 58px) !important; line-height: 1.02; letter-spacing: -.035em; }
.bcl-t-section-sm, .bcl-t-section-sm .elementor-heading-title { font-size: clamp(30px, 4.2vw, 52px) !important; line-height: 1.03; letter-spacing: -.035em; }
.bcl-t-case, .bcl-t-case .elementor-heading-title    { font-size: clamp(23px, 2.4vw, 34px) !important; line-height: 1.14; letter-spacing: -.03em; }
.bcl-t-step, .bcl-t-step .elementor-heading-title    { font-size: clamp(23px, 2.2vw, 31px) !important; line-height: 1.14; letter-spacing: -.03em; }
.bcl-t-tool, .bcl-t-tool .elementor-heading-title    { font-size: clamp(27px, 2.8vw, 40px) !important; line-height: 1.06; letter-spacing: -.035em; }
.bcl-t-faq, .bcl-t-faq .elementor-heading-title     { font-size: clamp(20px, 1.9vw, 27px) !important; line-height: 1.2;  letter-spacing: -.03em; }
.bcl-t-name, .bcl-t-name .elementor-heading-title    { font-size: clamp(40px, 5.4vw, 74px) !important; line-height: .98;  letter-spacing: -.042em; }
.bcl-t-contact, .bcl-t-contact .elementor-heading-title { font-size: clamp(32px, 4.4vw, 58px) !important; line-height: 1;    letter-spacing: -.038em; }
.bcl-t-stepnum, .bcl-t-stepnum .elementor-heading-title { font-size: clamp(44px, 5vw, 68px) !important;  line-height: .8; color: #6E6857; }
.bcl-t-casenum, .bcl-t-casenum .elementor-heading-title { font-size: clamp(20px, 2vw, 26px) !important;  font-weight: 600; }

/* Section rhythm — the source's own padding, including the one asymmetric case. */
.bcl-sec      { padding-top: clamp(56px, 8vw, 104px); padding-bottom: clamp(56px, 8vw, 104px); }
.bcl-sec-deep { padding-bottom: clamp(56px, 8vw, 110px); }

/* --- 2. Angled section edges --------------------------------------------- */
/* Each dark band is cut on the same diagonal and overlaps its neighbour by the
   slant, so the cut reveals the adjacent section's colour rather than a gap.
   Applied via the container's CSS Classes field. */

.bcl-cut-hero {
  padding-bottom: var(--bcl-slant) !important;
  margin-bottom: calc(var(--bcl-slant) * -1) !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--bcl-slant)), 0 100%);
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.bcl-cut-band {
  margin-top: calc(var(--bcl-slant) * -1) !important;
  margin-bottom: calc(var(--bcl-slant) * -1) !important;
  padding-top: calc(clamp(56px, 8vw, 104px) + var(--bcl-slant)) !important;
  padding-bottom: calc(clamp(56px, 8vw, 104px) + var(--bcl-slant)) !important;
  clip-path: polygon(0 var(--bcl-slant), 100% 0,
                     100% calc(100% - var(--bcl-slant)), 0 100%);
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.bcl-cut-foot {
  margin-top: calc(var(--bcl-slant) * -1) !important;
  padding-top: calc(clamp(56px, 8vw, 104px) + var(--bcl-slant)) !important;
  clip-path: polygon(0 var(--bcl-slant), 100% 0, 100% 100%, 0 100%);
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* --- 3. The §NN spine ---------------------------------------------------- */
/* A left gutter carrying a double hairline and the section number. Built as
   padding + pseudo-elements so it needs no extra Elementor column that would
   collapse awkwardly on mobile. Put .bcl-spine on the inner container and
   .bcl-spine-01 … -09 alongside it. */

.bcl-spine {
  position: relative;
  padding-left: var(--bcl-spine);
}
.bcl-spine::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--bcl-spine) - 40px);
  width: 4px;
  border-left: 1px solid var(--bcl-spine-rule);
  border-right: 1px solid var(--bcl-spine-rule);
}
.bcl-spine::after {
  content: var(--bcl-mark, "");
  position: absolute;
  top: 6px;
  left: 0;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--bcl-accent);
}
.bcl-spine-01 { --bcl-mark: "§01"; }
.bcl-spine-02 { --bcl-mark: "§02"; }
.bcl-spine-03 { --bcl-mark: "§03"; }
.bcl-spine-04 { --bcl-mark: "§04"; }
.bcl-spine-05 { --bcl-mark: "§05"; }
.bcl-spine-06 { --bcl-mark: "§06"; }
.bcl-spine-08 { --bcl-mark: "§08"; }
.bcl-spine-09 { --bcl-mark: "§09"; }

/* Hero marker sits lower; §02 lower still. */
.bcl-spine-hero::after { top: clamp(56px, 9vh, 96px); }
.bcl-spine-mid::after  { top: 34px; }

/* On dark sections the rule and marker invert. */
.bcl-dark {
  --bcl-spine-rule: rgba(247, 245, 240, .2);
}
.bcl-dark .bcl-spine::after { color: var(--bcl-accent-lt); }

/* The gutter collapses below 1080px — hide the marker with it. */
@media (max-width: 1080px) {
  .bcl-spine { padding-left: 0; }
  .bcl-spine::before,
  .bcl-spine::after { display: none; }
}

/* --- 4. Film grain ------------------------------------------------------- */

body.bcl-home::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- 5. Sticky header: shrink + scroll progress -------------------------- */
/* The theme-builder header container gets .bcl-header. JS adds .bcl-scrolled
   and drives --bcl-progress. */

.bcl-header {
  --bcl-header-h: 82px;
  position: sticky;
  top: 0;
  z-index: 50;
}
.bcl-header .e-con-inner,
.bcl-header > .e-con-inner {
  min-height: var(--bcl-header-h);
  transition: min-height .35s cubic-bezier(.2, .7, .2, 1);
}
.bcl-header.bcl-scrolled { --bcl-header-h: 64px; }

/* The scroll-progress rule is the native Pro Progress Tracker widget, placed
   at the foot of the header container — see .bcl-progress-w below. */

/* --- 6. Interactions Elementor controls can't express -------------------- */

/* Situation rows: indent + wash on hover */
.bcl-case-row a,
.bcl-case-row .elementor-widget-container > a {
  transition: padding-left .3s, background .3s;
}
.bcl-case-row:hover {
  padding-left: 14px;
  background: linear-gradient(to right, rgba(62, 74, 51, .07), transparent 70%);
}

/* Blueprint grid on the dark tool card */
.bcl-tool-dark {
  background-color: #1A1B13;
  background-image:
    linear-gradient(to right, rgba(147, 166, 129, .1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(147, 166, 129, .1) 1px, transparent 1px);
  background-size: 26px 26px;
  transition: border-color .3s, transform .3s;
}
.bcl-tool-dark:hover { border-color: var(--bcl-accent-lt) !important; transform: translateY(-3px); }

/* Tear-off perforation on the light tool card */
.bcl-tool-light { transition: transform .3s, box-shadow .3s; }
.bcl-tool-light:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -30px rgba(0, 0, 0, .75); }
.bcl-tool-light::before {
  content: "";
  display: block;
  height: 14px;
  width: 100%;
  background-image: repeating-linear-gradient(to right, #B4AD9C 0 1px, transparent 1px 20px);
  background-position: 0 bottom;
  background-repeat: repeat-x;
  background-size: 100% 10px;
  border-bottom: 1px solid #B4AD9C;
}

/* Hero art */
.bcl-hero-img img {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--bcl-hero-w);
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  filter: grayscale(.5) contrast(1.08);
}
.bcl-hero-fade::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--bcl-dim);
  background: var(--bcl-hero-fade);
  pointer-events: none;
}

/* Resources index reads as newspaper columns, not a grid */
.bcl-res-cols {
  columns: 3 260px;
  column-gap: clamp(28px, 4vw, 56px);
  column-rule: 1px solid var(--bcl-rule);
}
.bcl-res-cols .elementor-widget { break-inside: avoid; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bcl-header .e-con-inner,
  .bcl-header::after,
  .bcl-case-row,
  .bcl-tool-dark,
  .bcl-tool-light { transition: none !important; }
}
/* ==========================================================================
   BadContractorLaw.com — component layer (appended to the kit custom CSS)

   Values ported from the reference build, which matched the source design
   exactly at 1470/1024/768/500/375/320px.
   ========================================================================== */

/* Elementor resets ---------------------------------------------------------
   The editor wraps text in .elementor-widget-container and gives <p> a bottom
   margin; the design controls its own rhythm, so clear it. */
.bcl-wrap-pad > .e-con-inner,
.bcl-wrap-pad {
  padding-left: clamp(20px, 4.5vw, 56px);
  padding-right: clamp(20px, 4.5vw, 56px);
}
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.bcl-hero ol, .bcl-hero ul,
.bcl-cases, .bcl-steps { list-style: none; margin: 0; padding: 0; }

/* Section heads ------------------------------------------------------------ */
.bcl-head > .e-con-inner,
.bcl-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px clamp(24px, 4vw, 64px);
  align-items: end;
}
.bcl-head-gap12 > .e-con-inner, .bcl-head-gap12 { row-gap: 12px; }
.bcl-head-gap14 > .e-con-inner, .bcl-head-gap14 { row-gap: 14px; }
.bcl-h2-26 { max-width: 26ch; }
.bcl-h2-22 { max-width: 22ch; }
.bcl-h2-24 { max-width: 24ch; }
.bcl-lede  { max-width: 34rem; text-wrap: pretty; }
.bcl-kicker-end { padding-bottom: 8px; align-self: end; }
.bcl-more {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 600; color: var(--bcl-accent); text-decoration: none;
}
.bcl-dark .bcl-more { color: var(--bcl-accent-lt); }

/* Hero --------------------------------------------------------------------- */
.bcl-hero { position: relative; }
.bcl-hero-body { padding: clamp(52px, 8.5vh, 96px) 0 clamp(30px, 4vh, 48px); }
.bcl-hero-sub { max-width: 36rem; text-wrap: pretty; }
.bcl-hero-cta > .e-con-inner { align-items: center; }
.bcl-row-rule { border-top: 1px solid rgba(247, 245, 240, .16); }
.bcl-spine-bare::before { display: none; }

.bcl-btn-primary .elementor-button { min-height: 54px; transition: background .25s, transform .25s; }
.bcl-btn-primary .elementor-button:hover { transform: translateY(-2px); }
.bcl-btn-underline .elementor-button {
  min-height: 54px; padding-left: 0; padding-right: 0;
  border-bottom: 1px solid rgba(253, 252, 248, .32);
  border-radius: 0; transition: border-color .25s;
}
.bcl-btn-underline .elementor-button:hover { border-bottom-color: #FDFCF8; }

/* Credibility strip */
.bcl-cred { padding: 26px 0; }
.bcl-cred-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr));
  gap: 22px 30px; align-items: center;
}
.bcl-cred-who { display: flex; align-items: center; gap: 13px; }
.bcl-cred-who img {
  width: 46px; height: 46px; object-fit: cover; object-position: center top;
  filter: grayscale(1) contrast(1.06); background: #2E2F26;
}
.bcl-cred p { font-size: 14px; color: #C3C1B6; margin: 0; }
.bcl-cred-who p { font-size: 14.5px; line-height: 1.35; color: #F7F5F0; }
.bcl-cred strong { font-weight: 500; color: #FDFCF8; }
.bcl-cred-stars { display: block; font-size: 12px; letter-spacing: .08em; color: var(--bcl-accent-lt); }
.bcl-cred-tel { display: block; font-weight: 500; font-size: 15.5px; color: #FDFCF8; }
.bcl-cred-meta { color: #9C9A8F; font-size: 13.5px; }
.bcl-cred p.bcl-cred-bar { font-size: 12.5px; line-height: 1.5; color: #9C9A8F; }

/* Hero situation shortlist */
.bcl-sit-h { font-size: clamp(21px, 2vw, 27px); letter-spacing: -.024em; }
.bcl-sit { padding-bottom: clamp(38px, 5vh, 56px); }
.bcl-sit-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  column-gap: clamp(24px, 3vw, 48px); margin-top: 18px;
}
.bcl-sit-list a {
  display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 6px 0;
  border-top: 1px solid rgba(247, 245, 240, .16);
  color: #FDFCF8; font-size: 16px; text-decoration: none;
  transition: padding-left .25s, color .25s;
}
.bcl-sit-list a:hover { padding-left: 10px; color: var(--bcl-accent-lt); }
.bcl-sit-list li:last-child a { border-bottom: 1px solid rgba(247, 245, 240, .16); }
.bcl-sit-n { font-size: 11px; color: var(--bcl-accent-lt); width: 20px; }
.bcl-sit-arrow { margin-left: auto; color: var(--bcl-accent-lt); display: none; }
.bcl-sit-foot { margin-top: 18px; }
.bcl-sit-foot a { color: var(--bcl-accent-lt); font-size: 12.5px; letter-spacing: .06em; text-decoration: none; }
.bcl-lbl-lg { display: none; }
@media (max-width: 1080px) {
  .bcl-sit-h { font-size: 22px; }
  .bcl-sit-list { display: flex; flex-direction: column; margin-top: 16px; }
  .bcl-sit-list a { gap: 13px; min-height: 60px; padding: 10px 0; font-size: 16.5px; }
  .bcl-sit-list a:hover { padding-left: 0; }
  .bcl-sit-arrow { display: inline; }
  .bcl-lbl-sm { display: none; }
  .bcl-lbl-lg { display: inline; }
}

.bcl-disclaimer { max-width: 82ch; padding: 16px 0 20px; }
.bcl-disclaimer strong { font-weight: 500; color: #D9D7CE; }

/* Case index --------------------------------------------------------------- */
.bcl-cases-kicker { margin-top: clamp(34px, 4.5vw, 56px); padding-bottom: 10px; }
.bcl-cases { border-top: 1px solid var(--bcl-text); }
.bcl-case {
  display: grid; grid-template-columns: auto 1fr;
  gap: 6px clamp(18px, 2.5vw, 40px); align-items: baseline;
  padding: clamp(20px, 2.4vw, 30px) 0;
  border-bottom: 1px solid var(--bcl-rule);
  color: var(--bcl-text); text-decoration: none;
  transition: padding-left .3s, background .3s;
}
.bcl-case:hover {
  padding-left: 14px; color: var(--bcl-text);
  background: linear-gradient(to right, rgba(62, 74, 51, .07), transparent 70%);
}
.bcl-cases li:last-child .bcl-case { border-bottom: 1px solid var(--bcl-text); }
.bcl-case-n { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: clamp(20px, 2vw, 26px); color: var(--bcl-accent); }
.bcl-case-main {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 6px 28px; align-items: baseline;
}
.bcl-case-t { font-family: 'Archivo', sans-serif; font-size: clamp(23px, 2.4vw, 34px); font-weight: 600; line-height: 1.14; letter-spacing: -.03em; }
.bcl-case-meta { display: flex; flex-direction: column; gap: 5px; }
.bcl-case-tag { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: #63635A; }
.bcl-case-note { font-size: 12px; color: var(--bcl-accent); }
.bcl-case-go { font-size: 14px; font-weight: 500; color: var(--bcl-accent); }

/* Steps -------------------------------------------------------------------- */
.bcl-steps { margin-top: clamp(34px, 4.5vw, 52px); }
.bcl-step {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 10px clamp(24px, 4vw, 64px);
  padding: clamp(22px, 2.6vw, 32px) 0; border-top: 1px solid #C9C3B4;
}
.bcl-steps li:last-child { border-bottom: 1px solid #C9C3B4; }
/* Flex+baseline, not a block box: a block line-box adds ~24px per row here. */
.bcl-step-num { display: flex; align-items: baseline; gap: 16px; }
.bcl-step-num span { font-family: 'Archivo', sans-serif; font-weight: 600; }
.bcl-step-body {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 10px clamp(24px, 4vw, 64px); align-items: baseline;
}
.bcl-step-body h3 { font-family: 'Archivo', sans-serif; font-weight: 600; margin: 0; }
.bcl-step-p { max-width: 52ch; font-size: 16px; line-height: 1.62; color: #4B4C42; text-wrap: pretty; margin: 0; }

/* Tool cards --------------------------------------------------------------- */
.bcl-tools > .e-con-inner {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(18px, 2vw, 26px);
}
.bcl-tools { margin-top: clamp(32px, 4vw, 48px); }
.bcl-tool { padding: clamp(26px, 3vw, 40px); text-decoration: none; }
.bcl-tool-inner { display: flex; flex-direction: column; }
.bcl-tool-badge {
  display: inline-flex; align-self: flex-start; padding: 7px 12px;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
}
.bcl-tool-t { font-family: 'Archivo', sans-serif; font-weight: 600; }
.bcl-tool-p { margin-top: 16px; max-width: 44ch; font-size: 16px; line-height: 1.62; text-wrap: pretty; }
.bcl-tool-go {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 26px;
  padding-top: 18px; width: 100%; min-height: 44px;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
}
.bcl-tool-dark { border: 1px solid rgba(247, 245, 240, .22); color: #F7F5F0; }
.bcl-tool-dark .bcl-tool-badge { background: var(--bcl-accent); color: #FDFCF8; }
.bcl-tool-dark .bcl-tool-t { margin-top: clamp(30px, 4vw, 56px); color: #FDFCF8; }
.bcl-tool-dark .bcl-tool-p { color: #C3C1B6; }
.bcl-tool-dark .bcl-tool-go { border-top: 1px solid rgba(247, 245, 240, .22); color: var(--bcl-accent-lt); }
.bcl-tool-light { border: 1px solid var(--bcl-plaster2); background: var(--bcl-plaster2); color: var(--bcl-text); }
.bcl-tool-light .bcl-tool-badge { margin-top: 22px; border: 1px solid #C9C3B4; color: var(--bcl-text); }
.bcl-tool-light .bcl-tool-t { margin-top: clamp(22px, 3vw, 40px); }
.bcl-tool-light .bcl-tool-p { color: #4B4C42; }
.bcl-tool-light .bcl-tool-go { border-top: 1px solid #C9C3B4; color: var(--bcl-accent); }

/* FAQ ---------------------------------------------------------------------- */
.bcl-faq { margin-top: clamp(30px, 4vw, 48px); }
.bcl-faq .elementor-accordion-item { border-left: 0; border-right: 0; border-top: 0; }
.bcl-faq .elementor-accordion-item:first-child { border-top: 1px solid var(--bcl-text); }
.bcl-faq .elementor-tab-title {
  padding: 24px 0; font-family: 'Archivo', sans-serif; font-weight: 600;
  font-size: clamp(20px, 1.9vw, 27px); line-height: 1.2; letter-spacing: -.03em;
}
.bcl-faq .elementor-tab-content { padding: 0 0 28px; }
.bcl-faq .elementor-tab-content p { max-width: 64ch; text-wrap: pretty; }

/* Attorney ----------------------------------------------------------------- */
.bcl-att > .e-con-inner {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  align-items: stretch; gap: 0;
}
.bcl-att-media { position: relative; min-height: clamp(360px, 46vw, 620px); }
.bcl-att-media .bcl-att-img,
.bcl-att-media .bcl-att-img img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 20%;
  filter: grayscale(1) contrast(1.05);
}
.bcl-att-place {
  position: absolute; left: 0; bottom: 0; margin: 0; padding: 10px 16px;
  background: var(--bcl-ink); color: #F7F5F0;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
}
.bcl-att-place-w { position: absolute; inset: 0; pointer-events: none; }
.bcl-att-body { padding: clamp(48px, 6vw, 88px) clamp(20px, 4.5vw, 56px); }
.bcl-att-body > .e-con-inner { max-width: 44rem; }
.bcl-att-bar { margin-top: 18px; }
.bcl-att-bio { margin-top: 24px; max-width: 40rem; text-wrap: pretty; }
.bcl-att-facts { margin-top: 30px; }

.bcl-rating {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 12px clamp(16px, 3vw, 36px); padding: clamp(24px, 3vw, 34px) 0;
  border-bottom: 1px solid var(--bcl-text);
}
.bcl-rating p { margin: 0; }
.bcl-rating-score { font-family: 'Archivo', sans-serif; font-size: clamp(46px, 5.4vw, 76px); font-weight: 600; line-height: .85; letter-spacing: -.042em; }
.bcl-rating-stars { font-size: 15px; letter-spacing: .12em; color: var(--bcl-accent); }
.bcl-rating-src { font-size: 12.5px; color: #4B4C42; }
.bcl-rating-link { margin-left: auto; }
.bcl-quotes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 1px; background: var(--bcl-rule);
}
.bcl-quote { margin: 0; padding: clamp(24px, 2.6vw, 36px) clamp(20px, 2.2vw, 32px); background: var(--bcl-plaster); }
.bcl-quote-stars { font-size: 12px; letter-spacing: .12em; color: var(--bcl-accent); margin: 0; }
.bcl-quote blockquote {
  margin: 16px 0 0; padding: 0; border: 0;
  font-family: 'Archivo', sans-serif; font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 500; line-height: 1.35; letter-spacing: -.024em; text-wrap: pretty;
}
.bcl-quote figcaption { margin-top: 20px; font-size: 11.5px; letter-spacing: .06em; color: #6A6A5F; }

/* Resources ---------------------------------------------------------------- */
.bcl-res-sec { border-top: 1px solid var(--bcl-rule); }
.bcl-res-w { margin-top: clamp(28px, 3.5vw, 44px); }
.bcl-res-cols a {
  display: block; padding: 13px 0; border-bottom: 1px solid var(--bcl-rule);
  color: var(--bcl-text); text-decoration: none; break-inside: avoid;
  transition: padding-left .26s, color .26s;
}
.bcl-res-cols a:hover { padding-left: 8px; color: var(--bcl-accent); }
.bcl-res-tag { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: #63635A; }
.bcl-res-t { display: block; margin-top: 4px; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 18.5px; line-height: 1.24; }

/* Contact ------------------------------------------------------------------ */
.bcl-contact > .e-con-inner {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(32px, 4vw, 64px); align-items: start;
}
.bcl-contact-p { margin-top: 22px; max-width: 34rem; text-wrap: pretty; }
.bcl-contact-facts { margin-top: 32px; }
.bcl-card-h { margin: 0; }
.bcl-card-p { margin-top: 12px; }
.bcl-note {
  margin-top: 18px; padding: 15px 17px; border-left: 2px solid var(--bcl-accent);
  background: var(--bcl-stone); text-wrap: pretty;
}
.bcl-note strong { font-weight: 600; color: var(--bcl-text); }
.bcl-consent { margin-top: 14px; text-wrap: pretty; }
.bcl-form .elementor-field-group > label { margin-bottom: 8px; }
.bcl-form .elementor-field-textual { min-height: 50px; border-radius: 0; }
.bcl-form .elementor-button { min-height: 56px; border-radius: 0; }

/* Footer ------------------------------------------------------------------- */
.bcl-foot-cols > .e-con-inner {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: clamp(28px, 3.5vw, 52px);
}
.bcl-foot-h { padding-bottom: 12px; border-bottom: 1px solid var(--bcl-text); }
.bcl-foot-blurb { margin-top: 14px; max-width: 34ch; text-wrap: pretty; }
.bcl-foot-tel { margin-top: 18px; }
.bcl-foot-legal {
  margin-top: clamp(36px, 4.5vw, 58px); padding-top: 26px;
  border-top: 1px solid var(--bcl-rule);
}
.bcl-foot-legal p { text-wrap: pretty; }
.bcl-foot-bar { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--bcl-rule); }

/* Header ------------------------------------------------------------------- */
.bcl-header-bar > .e-con-inner { min-height: var(--bcl-header-h); }
.bcl-progress-w { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; }
.bcl-progress-w .elementor-widget-container { margin: 0; }


/* ==========================================================================
   Corrections found on the live build
   ========================================================================== */

/* 1. Row containers: Elementor gives every child --width:100%, so a flex row
      collapses into overlapping full-width children. */
.bcl-header-bar > .e-con-inner > *,
.bcl-hero-cta > .e-con-inner > *,
.bcl-header-actions > .e-con-inner > * { width: auto; }
.bcl-header-bar > .e-con-inner {
  justify-content: space-between; align-items: center; flex-wrap: nowrap;
}
.bcl-nav-h { flex: 0 1 auto; }

/* 2. Hero art. The image widget's own wrapper is position:relative with zero
      height, so an absolutely-positioned img resolved height:100% against it
      and disappeared. Promote the wrapper to the layer itself. */
.bcl-hero-img {
  position: absolute !important;
  inset: 0; z-index: 0; margin: 0; pointer-events: none;
}
.bcl-hero-img .elementor-widget-container,
.bcl-hero-img .elementor-image { position: absolute; inset: 0; }
.bcl-hero-img img {
  position: absolute; top: 0; right: 0;
  width: var(--bcl-hero-w); height: 100%;
  object-fit: cover; object-position: 50% 45%;
  filter: grayscale(.5) contrast(1.08);
}
/* Gradient sits above the art, below the copy. */
.bcl-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--bcl-hero-fade); opacity: var(--bcl-dim);
  pointer-events: none;
}
/* Do NOT position .e-con-inner: it would become the image's containing block
   and clip the art to the 1320px boxed width instead of the full bleed. */
.bcl-hero > .e-con-inner > .e-con { position: relative; z-index: 2; }

/* 3. Attorney portrait uses the same widget-wrapper pattern. */
.bcl-att-img { position: absolute !important; inset: 0; margin: 0; }
.bcl-att-img .elementor-widget-container,
.bcl-att-img .elementor-image { position: absolute; inset: 0; }


/* Scroll progress. The Pro Progress Tracker widget defaults to a circular
   indicator and its shape control is not reliably addressable from here, so the
   rule is drawn on the header and driven by the custom-code snippet. */
.bcl-header::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px;
  width: var(--bcl-progress, 0%); background: var(--bcl-accent-lt);
  transition: width .12s linear; z-index: 3;
}


/* --- Round 2 corrections ------------------------------------------------- */

/* Accordion: the design is horizontal rules only, not Elementor's boxed items. */
.bcl-faq .elementor-accordion-item {
  border: 0 !important;
  border-bottom: 1px solid var(--bcl-rule) !important;
  background: transparent;
}
.bcl-faq .elementor-accordion-item:first-child { border-top: 1px solid var(--bcl-text) !important; }
.bcl-faq .elementor-accordion-item:last-child  { border-bottom: 1px solid var(--bcl-text) !important; }
.bcl-faq .elementor-tab-title,
.bcl-faq .elementor-tab-content {
  background: transparent !important;
  border: 0 !important;
  padding-left: 0; padding-right: 0;
}
.bcl-faq .elementor-accordion-icon { color: var(--bcl-accent); }

/* Links inherit the theme's default otherwise, which reads pink on this palette. */
.elementor-widget-text-editor a,
.bcl-faq .elementor-tab-content a { color: var(--bcl-accent); }
.elementor-widget-text-editor a:hover,
.bcl-faq .elementor-tab-content a:hover { color: #2A331F; }
.bcl-dark .elementor-widget-text-editor a { color: var(--bcl-accent-lt); }
.bcl-dark .elementor-widget-text-editor a:hover { color: #FDFCF8; }

/* Attorney portrait sits flush to the section edge. */
.bcl-att-sec > .e-con-inner { padding-left: 0; padding-right: 0; max-width: none; }
.bcl-att-media { overflow: hidden; }

/* Elementor flips containers to column at the mobile breakpoint; the header bar
   stays a single row at every width. */
.bcl-header-bar > .e-con-inner {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: space-between;
}
.bcl-header-bar > .e-con-inner > * { width: auto !important; }

/* Header type scales down with the viewport, as in the design. */
.bcl-logo-h .elementor-heading-title {
  font-size: clamp(15px, 4.2vw, 20px) !important;
  white-space: nowrap;
}
.bcl-btn-ghost-h .elementor-button {
  font-size: clamp(10.5px, 2.6vw, 12px) !important;
  white-space: nowrap;
  padding-left: clamp(11px, 3vw, 20px);
  padding-right: clamp(11px, 3vw, 20px);
  min-height: 44px;
}
.bcl-header-bar > .e-con-inner { gap: clamp(10px, 2.5vw, 24px); }
.bcl-nav-h .elementor-menu-toggle { margin-left: 0; }

/* Below the nav breakpoint the menu widget collapses to just its toggle, but it
   still claims flex space and rides over the logo. Order it last and size it to
   its content. */
@media (max-width: 1080px) {
  .bcl-header-bar > .e-con-inner { gap: 10px; }
  /* No min-width:0 here — it lets the logo shrink below its own text,
     which then overflows across the CTA. */
  .bcl-logo-h { flex: 1 1 auto; order: 1; }
  .bcl-header-actions { flex: 0 0 auto; order: 2; }
  .bcl-nav-h { flex: 0 0 auto; order: 3; width: auto !important; }
  .bcl-nav-h .elementor-widget-container { display: flex; justify-content: flex-end; }
  .bcl-nav-h .elementor-menu-toggle { position: static; margin: 0; }
}

/* The logo widget resolves to a ~45px box on mobile and its nowrap text then
   spills across the CTA. Size the widget to its own content instead. */
.bcl-logo-h { width: max-content !important; flex: 0 1 auto !important; }
.bcl-logo-h .elementor-widget-container { width: max-content; }


/* ==========================================================================
   Round 3 — readability + alignment
   Elementor emits per-element rules at `.elementor-NN .elementor-element.
   elementor-element-xxx`, which outranks a single utility class. The layout
   properties below have to win against that, hence !important on them.
   ========================================================================== */

/* 1. Measure. Without this the headline runs the full 1208px column and slides
      under the bright half of the hero photo, which is what made it unreadable. */
.bcl-t-hero .elementor-heading-title,
.bcl-t-hero { max-width: 20ch; }
.bcl-hero-sub .elementor-widget-container { max-width: 36rem; }

/* 2. The §NN gutter was collapsing to 0, so the marker printed over the kicker. */
.bcl-spine { padding-left: var(--bcl-spine) !important; }
.bcl-hero-body {
  padding-top: clamp(52px, 8.5vh, 96px) !important;
  padding-bottom: clamp(30px, 4vh, 48px) !important;
}
@media (max-width: 1080px) {
  .bcl-spine { padding-left: 0 !important; }
}

/* 3. Hero CTAs: flush left with the headline, on one baseline, and the
      secondary link stays sentence case as designed. */
.bcl-hero-cta > .e-con-inner { align-items: center; gap: 12px 28px; }
.bcl-hero-cta .elementor-widget { margin: 0; }
.bcl-hero-cta .elementor-widget-container { padding: 0; }
.bcl-btn-primary .elementor-button,
.bcl-btn-underline .elementor-button {
  display: inline-flex; align-items: center; min-height: 54px;
}
.bcl-btn-underline .elementor-button {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400;
}


/* ==========================================================================
   Round 4 — measure, portrait, header grouping
   NOTE: this install has Elementor's optimized markup on, so widgets have NO
   .elementor-widget-container. Target the widget element itself.
   ========================================================================== */

/* The hero paragraph was running the full column (825px at 1024) straight over
   the brightest part of the photo. The design caps it at 36rem. */
.bcl-hero-sub { max-width: 36rem !important; }
.bcl-t-hero .elementor-heading-title, .bcl-t-hero { max-width: 20ch !important; }

/* Elementor's image rules were squashing the credibility portrait to 39px. */
.bcl-cred-who img {
  width: 46px !important; height: 46px !important;
  max-width: none !important; object-fit: cover; object-position: center top;
}

/* Hero CTAs flush with the headline — the widgets carry a 10px inset. */
.bcl-hero-cta .elementor-widget { padding: 0 !important; margin: 0 !important; }

/* Below the nav breakpoint the CTA and burger group together on the right. */
@media (max-width: 1080px) {
  .bcl-logo-h { margin-right: auto !important; }
  .bcl-header-actions { margin-left: 0 !important; }
}


/* ==========================================================================
   Round 5 — image logo, CTA flush, portrait size
   ========================================================================== */

/* Logo lockups. 3:1 aspect, so height drives the width. */
.bcl-logo-h { width: auto !important; flex: 0 0 auto !important; }
.bcl-logo-h img {
  display: block;
  height: clamp(30px, 3.4vw, 48px);
  width: auto !important;
  max-width: none !important;
  transition: height .35s cubic-bezier(.2, .7, .2, 1);
}
.bcl-header.bcl-scrolled .bcl-logo-h img { height: clamp(26px, 2.8vw, 38px); }
.bcl-logo-f img { display: block; height: 56px; width: auto !important; max-width: 100% !important; }

/* The hero CTA container carries 10px of padding, which pushed the primary
   button 10px right of the headline. */
.bcl-hero-cta { padding: 0 !important; }

/* Elementor's text-editor image rules were still winning over the portrait. */
.bcl-cred .bcl-cred-who img {
  width: 46px !important; height: 46px !important;
  min-width: 46px; max-width: 46px !important;
}


/* Round 6 — the header CTA had min-height but no centring, so the border box
   grew tall with the label pinned to the top and clipped into the burger. */
.bcl-btn-ghost-h .elementor-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  line-height: 1;
}
.bcl-btn-ghost-h { width: auto !important; flex: 0 0 auto !important; }
.bcl-header-actions { width: auto !important; flex: 0 0 auto !important; }
.bcl-header-actions > .e-con-inner { align-items: center; }


/* ==========================================================================
   Round 7 — two systematic gaps against the reference build
   ========================================================================== */

/* 1. Elementor gives every container's inner 10px of block padding. The design
      owns its own vertical rhythm, so that was adding 20px per nesting level
      and pushing every section head down. */
.elementor .e-con > .e-con-inner {
  padding-block-start: 0;
  padding-block-end: 0;
}

/* 2. Elementor emits line-height as an absolute length (17px x 1.6 = 27.2px) on
      the widget. Descendants inherit the *length*, so an 11px label also got a
      27.2px line box — +22px on every case row. A unitless value makes each
      element compute against its own font-size, as the design does. */
.bcl-cases, .bcl-steps, .bcl-sit-list, .bcl-sit-foot, .bcl-res-cols,
.bcl-cred-grid, .bcl-quotes, .bcl-rating, .bcl-tool-inner, .bcl-disclaimer {
  line-height: 1.6;
}


/* ==========================================================================
   Article pages (migrated content)
   The body arrives as semantic HTML in one text-editor widget; everything
   below styles it into the design system.
   ========================================================================== */

/* Interior page hero — one step down from the homepage's display size. */
.bcl-t-page, .bcl-t-page .elementor-heading-title {
  font-size: clamp(32px, 4.4vw, 62px) !important;
  line-height: 1.04; letter-spacing: -.035em; max-width: 24ch;
}
.bcl-page-hero { padding: clamp(44px, 7vh, 82px) 0 clamp(30px, 4vh, 46px); }

.bcl-article { max-width: 74ch; line-height: 1.6; }
.bcl-article > *:first-child { margin-top: 0; }

.bcl-article h2 {
  margin: clamp(38px, 4vw, 58px) 0 14px;
  font-family: 'Archivo', sans-serif; font-weight: 600;
  font-size: clamp(24px, 2.4vw, 34px); line-height: 1.14; letter-spacing: -.03em;
  color: var(--bcl-text);
}
.bcl-article h3 {
  margin: clamp(26px, 3vw, 38px) 0 10px;
  font-family: 'Archivo', sans-serif; font-weight: 600;
  font-size: clamp(19px, 1.7vw, 23px); line-height: 1.2; letter-spacing: -.024em;
}
.bcl-article h4 {
  margin: 24px 0 8px; font-family: 'Archivo', sans-serif; font-weight: 600;
  font-size: 17px; letter-spacing: -.01em;
}
.bcl-article p { margin: 0 0 16px; font-size: 17px; line-height: 1.7; color: #3A3B32; text-wrap: pretty; }
.bcl-article a { color: var(--bcl-accent); text-decoration: underline; text-underline-offset: 3px; }
.bcl-article a:hover { color: #2A331F; }
.bcl-article strong { font-weight: 600; color: var(--bcl-text); }
.bcl-article hr { margin: 40px 0; border: 0; border-top: 1px solid var(--bcl-rule); }

.bcl-article ul, .bcl-article ol { margin: 0 0 18px; padding-left: 0; }
.bcl-article ul li, .bcl-article ol li {
  position: relative; margin: 0 0 9px; padding-left: 26px;
  font-size: 17px; line-height: 1.65; color: #3A3B32;
}
.bcl-article ul li::before {
  content: ""; position: absolute; left: 4px; top: 11px;
  width: 6px; height: 6px; background: var(--bcl-accent-lt);
}
.bcl-article ol { counter-reset: bcl-ol; }
.bcl-article ol li { counter-increment: bcl-ol; }
.bcl-article ol li::before {
  content: counter(bcl-ol); position: absolute; left: 0; top: 0;
  font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 600;
  color: var(--bcl-accent); line-height: 2.2;
}

/* Definition lists carry the glossary. */
.bcl-article dl { margin: 0 0 20px; border-top: 1px solid var(--bcl-rule); }
.bcl-article dt {
  margin-top: 16px; font-family: 'Archivo', sans-serif; font-weight: 600;
  font-size: 17px; color: var(--bcl-text);
}
.bcl-article dd { margin: 4px 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--bcl-rule); color: #3A3B32; }

/* <details> is a native accordion — it keeps working with no JS. */
.bcl-article details {
  border-bottom: 1px solid var(--bcl-rule); padding: 4px 0;
}
.bcl-article details:first-of-type { border-top: 1px solid var(--bcl-text); }
.bcl-article summary {
  cursor: pointer; list-style: none; padding: 18px 34px 18px 0; position: relative;
  font-family: 'Archivo', sans-serif; font-weight: 600;
  font-size: clamp(17px, 1.5vw, 20px); line-height: 1.3; letter-spacing: -.02em;
  color: var(--bcl-text); transition: color .2s;
}
.bcl-article summary::-webkit-details-marker { display: none; }
.bcl-article summary:hover { color: var(--bcl-accent); }
.bcl-article summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px;
  margin-top: -7px; border-right: 1.5px solid var(--bcl-accent);
  border-bottom: 1.5px solid var(--bcl-accent);
  transform: rotate(45deg); transition: transform .25s;
}
.bcl-article details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.bcl-article details > *:not(summary) { padding-bottom: 8px; }

/* Callouts and the legal disclaimers that open several pages. */
.bcl-article aside, .bcl-article .bcl-tool-note {
  display: block; margin: 24px 0; padding: 16px 18px;
  border-left: 2px solid var(--bcl-accent); background: var(--bcl-stone);
  font-size: 15px; line-height: 1.6; color: #43443B;
}
.bcl-article aside p:last-child, .bcl-article .bcl-tool-note p:last-child { margin-bottom: 0; }
.bcl-article footer { margin-top: 28px; font-size: 13px; color: var(--bcl-muted); }

.bcl-article img { max-width: 100%; height: auto; display: block; margin: 20px 0; }
.bcl-article picture { display: block; margin: 20px 0; }


/* ==========================================================================
   Migrated content blocks
   Class names come from the original site; these rules re-home them in the
   design system rather than reproducing the old stylesheet.
   ========================================================================== */

/* Elementor sets width on the widget, so the measure needs to win. */
.bcl-article { max-width: 74ch !important; }

/* Stat strip */
.bcl-article .stat-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 1px; background: var(--bcl-rule); margin: 28px 0;
  border: 1px solid var(--bcl-rule);
}
.bcl-article .stat-box { display: flex; flex-direction: column; gap: 4px; padding: 18px 16px; background: var(--bcl-plaster2); }
.bcl-article .stat-box .num {
  font-family: 'Archivo', sans-serif; font-weight: 600;
  font-size: clamp(26px, 2.6vw, 34px); line-height: 1; letter-spacing: -.03em;
  color: var(--bcl-accent);
}
.bcl-article .stat-box .label { font-size: 12.5px; line-height: 1.4; color: #63635A; }

/* Callouts — three tones from the source, mapped onto the palette. */
.bcl-article .disclaimer-callout,
.bcl-article .baylegal-callout,
.bcl-article .statute-warning,
.bcl-article .key-takeaways {
  display: block; margin: 24px 0; padding: 18px 20px;
  border-left: 2px solid var(--bcl-accent); background: var(--bcl-stone);
  font-size: 15.5px; line-height: 1.62; color: #43443B;
}
.bcl-article .key-takeaways { background: var(--bcl-plaster2); border-left-color: var(--bcl-accent-lt); }
.bcl-article .statute-warning { background: #F7EAE7; border-left-color: #8E2C1F; color: #75241A; }
.bcl-article .baylegal-callout { background: var(--bcl-ink); border-left-color: var(--bcl-accent-lt); color: #DEDCD2; }
.bcl-article .baylegal-callout a { color: var(--bcl-accent-lt); }
.bcl-article .key-takeaways ul { margin-bottom: 0; }
.bcl-article .disclaimer-callout p:last-child,
.bcl-article .baylegal-callout p:last-child,
.bcl-article .key-takeaways p:last-child { margin-bottom: 0; }

/* FAQ blocks wrap a native <details>, so they open with no JS. */
.bcl-article .faq-item { border-bottom: 1px solid var(--bcl-rule); }
.bcl-article .faq-item:first-of-type { border-top: 1px solid var(--bcl-text); }
.bcl-article .faq-item details { border: 0; }
.bcl-article .faq-answer { padding-bottom: 20px; }
.bcl-article .faq-icon { display: none; }   /* <details> supplies its own marker */
.bcl-article .faq-q { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 18px; }
.bcl-article .faq-a { color: #3A3B32; }
.bcl-article .qa-block { margin: 0 0 22px; }

/* Related / deeplink cards */
.bcl-article .deeplinks-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 14px; margin: 26px 0;
}
.bcl-article .related-card,
.bcl-article .deeplink-card {
  display: block; margin: 10px 0; padding: 16px 18px;
  border: 1px solid var(--bcl-rule); background: var(--bcl-plaster2);
  text-decoration: none; color: var(--bcl-text);
  transition: border-color .25s, transform .25s;
}
.bcl-article .related-card:hover,
.bcl-article .deeplink-card:hover { border-color: var(--bcl-accent); transform: translateY(-2px); }
.bcl-article .related-card-label,
.bcl-article .deeplink-tag {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; color: #63635A;
}
.bcl-article .related-card-title,
.bcl-article .deeplink-title {
  margin-top: 4px; font-family: 'Archivo', sans-serif; font-weight: 600;
  font-size: 17px; line-height: 1.25; color: var(--bcl-text);
}

/* Glossary */
.bcl-article .glossary-term {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--bcl-rule);
}
.bcl-article .glossary-term:first-of-type { border-top: 1px solid var(--bcl-text); }

/* Inline link-buttons */
.bcl-article a.btn, .bcl-article a.btn-primary {
  display: inline-flex; align-items: center; min-height: 48px; margin: 6px 10px 6px 0;
  padding: 0 22px; text-decoration: none;
  font-family: 'Archivo', sans-serif; font-size: 12.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--bcl-accent); color: var(--bcl-accent);
  transition: background .25s, color .25s;
}
.bcl-article a.btn-primary { background: var(--bcl-accent); color: var(--bcl-onink, #FDFCF8); }
.bcl-article a.btn:hover { background: var(--bcl-accent); color: #FDFCF8; }
.bcl-article a.btn-primary:hover { background: #4C5A3F; color: #FDFCF8; }

.bcl-article .toc { margin: 0 0 26px; }
.bcl-article .attorney-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 18px; margin: 24px 0;
}


/* ==========================================================================
   Hero legibility — lower band
   The design's fade is purely horizontal (96deg, ending at .42 alpha), which
   is enough behind the display headline but not behind the credibility strip,
   situation list and disclaimer. Those sit at 63-90% of the hero height, span
   the full width, and run at 11-16px over the brightest part of the photo.
   A vertical veil beneath the existing fade darkens only that lower band and
   leaves the headline area exactly as designed.
   ========================================================================== */

:root {
  --bcl-hero-veil: linear-gradient(180deg,
      rgba(20, 21, 15, 0) 42%,
      rgba(20, 21, 15, .48) 64%,
      rgba(20, 21, 15, .80) 100%);
}

.bcl-hero::after {
  background: var(--bcl-hero-veil), var(--bcl-hero-fade);
}

/* Stacked, the photo already sits behind a vertical fade, so the veil would
   double up — keep the design's own gradient there. */
@media (max-width: 760px) {
  .bcl-hero::after { background: var(--bcl-hero-fade); }
}


/* ==========================================================================
   Interactive tools (Dispute Evaluator, Deadline Calculator)
   Markup and logic are ported from the live site unchanged — the statute
   calculations are the firm's own and must not be re-derived. Only the
   presentation is rebuilt here, since the old palette (terracotta/Playfair)
   does not belong to this design system.
   ========================================================================== */

.bcl-tool-ui {
  /* The ported markup carries a couple of inline var() references. */
  --ink: var(--bcl-text);
  --ink-soft: #4B4C42;
  max-width: 780px;
}
.bcl-tool-ui .container { max-width: none; padding: 0; width: auto; }

.bcl-tool-ui .tool-card {
  border: 1px solid var(--bcl-rule); background: var(--bcl-plaster2);
  margin-bottom: 22px;
}
.bcl-tool-ui .tool-card-header {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px; border-bottom: 1px solid var(--bcl-rule);
  background: var(--bcl-stone);
}
.bcl-tool-ui .tool-card-header h2 {
  margin: 0; font-family: 'Archivo', sans-serif; font-weight: 600;
  font-size: clamp(18px, 1.8vw, 23px); letter-spacing: -.02em; line-height: 1.2;
}
.bcl-tool-ui .step-badge {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; background: var(--bcl-accent); color: #FDFCF8;
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 14px;
}
.bcl-tool-ui .tool-body { padding: 22px; }

/* Fields */
.bcl-tool-ui .form-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px;
}
.bcl-tool-ui .form-group { display: flex; flex-direction: column; margin-bottom: 4px; }
.bcl-tool-ui label {
  font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: #6A6A5F; margin-bottom: 7px;
}
.bcl-tool-ui input[type=text], .bcl-tool-ui input[type=email],
.bcl-tool-ui input[type=tel], .bcl-tool-ui input[type=date], .bcl-tool-ui select {
  width: 100%; min-height: 48px; padding: 0 13px; background: #fff;
  border: 1px solid var(--bcl-rule); border-radius: 0; font-size: 16px;
  color: var(--bcl-text); transition: border-color .2s, box-shadow .2s;
}
.bcl-tool-ui input:focus, .bcl-tool-ui select:focus {
  outline: none; border-color: var(--bcl-accent);
  box-shadow: 0 0 0 3px rgba(62, 74, 51, .16);
}
.bcl-tool-ui .field-error-msg { display: none; margin-top: 6px; font-size: 13px; color: #8E2C1F; }
.bcl-tool-ui .field-error-msg.visible { display: block; }
.bcl-tool-ui .label-note { font-size: 12.5px; color: var(--bcl-muted); text-transform: none; letter-spacing: 0; }
.bcl-tool-ui .calc-section-label {
  margin: 24px 0 12px; font-family: 'Archivo', sans-serif; font-size: 11px;
  font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--bcl-accent);
}
.bcl-tool-ui .section-divider { margin: 26px 0; border: 0; border-top: 1px solid var(--bcl-rule); }

/* Buttons */
.bcl-tool-ui .btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.bcl-tool-ui .btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px; cursor: pointer;
  font-family: 'Archivo', sans-serif; font-size: 12.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  background: none; border: 1px solid var(--bcl-accent); color: var(--bcl-accent);
  transition: background .25s, color .25s, opacity .25s;
}
.bcl-tool-ui .btn:hover { background: var(--bcl-accent); color: #FDFCF8; }
.bcl-tool-ui .btn-primary { background: var(--bcl-accent); color: #FDFCF8; }
.bcl-tool-ui .btn-primary:hover { background: #4C5A3F; }
.bcl-tool-ui .btn:disabled { opacity: .55; cursor: default; }
.bcl-tool-ui .btn-back { border-color: var(--bcl-rule); color: var(--bcl-muted); }

/* Progress */
.bcl-tool-ui .progress-wrap { margin-bottom: 20px; }
.bcl-tool-ui .progress-label {
  font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--bcl-muted); margin-bottom: 8px;
}
.bcl-tool-ui .progress-track { height: 3px; background: var(--bcl-rule); }
.bcl-tool-ui .progress-fill { height: 3px; background: var(--bcl-accent); transition: width .3s; }

/* Question options */
.bcl-tool-ui .question-block { margin-bottom: 8px; }
.bcl-tool-ui .question-label {
  font-family: 'Archivo', sans-serif; font-weight: 600;
  font-size: clamp(19px, 1.9vw, 24px); line-height: 1.25; letter-spacing: -.024em;
  margin-bottom: 6px;
}
.bcl-tool-ui .question-sub { font-size: 14.5px; color: var(--bcl-muted); margin-bottom: 18px; }
.bcl-tool-ui .option-group { display: flex; flex-direction: column; gap: 10px; }
.bcl-tool-ui .option-btn {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  padding: 15px 17px; cursor: pointer; background: #fff;
  border: 1px solid var(--bcl-rule); font-size: 16px; color: var(--bcl-text);
  transition: border-color .2s, background .2s;
}
.bcl-tool-ui .option-btn:hover { border-color: var(--bcl-accent-lt); background: var(--bcl-plaster); }
.bcl-tool-ui .option-btn.selected { border-color: var(--bcl-accent); background: var(--bcl-tint, #E9EBE2); }
.bcl-tool-ui .option-radio {
  flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid var(--bcl-rule); position: relative;
}
.bcl-tool-ui .option-btn.selected .option-radio { border-color: var(--bcl-accent); }
.bcl-tool-ui .option-btn.selected .option-radio::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--bcl-accent);
}
.bcl-tool-ui .option-text { flex: 1; }

/* Radios / checkboxes in the calculator */
.bcl-tool-ui .radio-group { display: flex; flex-wrap: wrap; gap: 10px; }
.bcl-tool-ui .radio-option, .bcl-tool-ui .checkbox-option {
  display: flex; align-items: center; gap: 11px; flex: 1 1 220px;
  padding: 14px 16px; cursor: pointer; background: #fff;
  border: 1px solid var(--bcl-rule); transition: border-color .2s, background .2s;
}
.bcl-tool-ui .radio-option:hover, .bcl-tool-ui .checkbox-option:hover { border-color: var(--bcl-accent-lt); }
.bcl-tool-ui .radio-option.selected { border-color: var(--bcl-accent); background: var(--bcl-tint, #E9EBE2); }
.bcl-tool-ui .radio-dot {
  flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid var(--bcl-rule); position: relative;
}
.bcl-tool-ui .radio-option.selected .radio-dot { border-color: var(--bcl-accent); }
.bcl-tool-ui .radio-option.selected .radio-dot::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--bcl-accent);
}
.bcl-tool-ui .radio-label, .bcl-tool-ui .cb-label {
  font-size: 15.5px; color: var(--bcl-text); text-transform: none;
  letter-spacing: 0; margin: 0; font-weight: 400;
}
.bcl-tool-ui input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--bcl-accent); }

/* Results */
.bcl-tool-ui .result-section, .bcl-tool-ui .result-card {
  border: 1px solid var(--bcl-rule); background: var(--bcl-plaster2); padding: 22px; margin-bottom: 20px;
}
.bcl-tool-ui .deadline-display {
  font-family: 'Archivo', sans-serif; font-weight: 600;
  font-size: clamp(30px, 4vw, 48px); line-height: 1.05; letter-spacing: -.035em;
  color: var(--bcl-accent); margin: 8px 0 4px;
}
.bcl-tool-ui .strength-meter-wrap { margin: 14px 0 20px; }
.bcl-tool-ui .strength-meter-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--bcl-muted); margin-bottom: 8px;
}
.bcl-tool-ui .score {
  font-size: clamp(26px, 3vw, 38px); letter-spacing: -.03em;
  color: var(--bcl-accent); text-transform: none;
}
.bcl-tool-ui .factor-row, .bcl-tool-ui .breakdown-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--bcl-rule); font-size: 15.5px;
}
.bcl-tool-ui .factor-icon { flex: 0 0 auto; color: var(--bcl-accent); font-weight: 600; }
.bcl-tool-ui .factor-text { flex: 1; color: #43443B; }
.bcl-tool-ui .bd-label { flex: 1; color: #43443B; }
.bcl-tool-ui .bd-value { font-family: 'Archivo', sans-serif; font-weight: 600; color: var(--bcl-text); }
.bcl-tool-ui .bd-value.highlight { color: var(--bcl-accent); }
.bcl-tool-ui .action-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: 0 0 auto; margin-right: 10px;
  background: var(--bcl-accent); color: #FDFCF8;
  font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 600;
}
.bcl-tool-ui .prefilled-tag {
  display: inline-block; padding: 3px 8px; margin-left: 8px;
  background: var(--bcl-stone); font-family: 'Archivo', sans-serif;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--bcl-muted);
}
.bcl-tool-ui .compliance-block, .bcl-tool-ui .form-disclaimer, .bcl-tool-ui .tcpa-consent {
  margin-top: 18px; padding: 14px 16px; border-left: 2px solid var(--bcl-accent);
  background: var(--bcl-stone); font-size: 13.5px; line-height: 1.6; color: #43443B;
}
.bcl-tool-ui #formSuccess {
  display: none; margin-top: 18px; padding: 16px 18px;
  border-left: 2px solid var(--bcl-accent); background: var(--bcl-tint, #E9EBE2);
  font-size: 15.5px; color: #2A331F;
}
.bcl-tool-ui #formError {
  display: none; margin-top: 18px; padding: 14px 16px;
  border-left: 2px solid #8E2C1F; background: #F7EAE7; font-size: 14.5px; color: #75241A;
}
.bcl-tool-ui ol, .bcl-tool-ui ul { margin: 0; padding: 0; list-style: none; }
.bcl-tool-ui li { margin-bottom: 10px; }


/* Tool corrections found by running the calculator ------------------------- */

/* The result card's header carries an inline background:var(--ink); without a
   matching text colour it rendered dark-on-dark. */
.bcl-tool-ui .tool-card-header[style*="--ink"],
.bcl-tool-ui .tool-card-header[style*="ink"] {
  background: var(--bcl-ink) !important;
  color: #F7F5F0;
}
.bcl-tool-ui .tool-card-header[style*="ink"] h2 { color: #FDFCF8; }
.bcl-tool-ui .tool-card-header[style*="ink"] .step-badge {
  background: var(--bcl-accent-lt); color: var(--bcl-ink);
}

/* .deadline-display wraps three lines; only the date should carry the display
   size, or the eyebrow and the countdown inherit 48px too. */
.bcl-tool-ui .deadline-display { font-size: inherit; margin: 0; }
.bcl-tool-ui .deadline-eyebrow {
  font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--bcl-muted);
  margin-bottom: 8px;
}
.bcl-tool-ui .deadline-date {
  font-family: 'Archivo', sans-serif; font-weight: 600;
  font-size: clamp(30px, 4vw, 48px); line-height: 1.05; letter-spacing: -.035em;
  color: var(--bcl-accent);
}
.bcl-tool-ui .days-remaining {
  margin-top: 8px; font-size: 16px; line-height: 1.5; color: #43443B;
  font-family: 'Archivo', sans-serif; font-weight: 400;
}
.bcl-tool-ui .days-remaining strong { font-weight: 600; color: var(--bcl-text); }


/* Links inside the tools were falling back to the theme's pink. */
.bcl-tool-ui a { color: var(--bcl-accent); text-decoration: underline; text-underline-offset: 3px; }
.bcl-tool-ui a:hover { color: #2A331F; }

/* .statute-box puts the citation and its explanation in one block; separate them. */
.bcl-tool-ui .statute-box {
  margin: 16px 0 22px; padding: 14px 16px;
  border-left: 2px solid var(--bcl-accent); background: var(--bcl-stone);
  font-size: 15px; line-height: 1.6; color: #43443B;
}
.bcl-tool-ui .statute-box strong {
  display: block; margin-bottom: 4px;
  font-family: 'Archivo', sans-serif; font-weight: 600; color: var(--bcl-text);
}


/* The results card was hidden by the old site's stylesheet, not by inline
   style, so after the port all three steps showed at once. Both tools reveal
   it with an inline display:block, which wins over this. */
.bcl-tool-ui #step-results { display: none; }


/* Strength meter — the JS sets width inline and a high/mid/low tier class.
   These are separate elements from .progress-*, and had no styling at all. */
.bcl-tool-ui .strength-track {
  height: 6px; background: var(--bcl-rule); margin-top: 8px; overflow: hidden;
}
.bcl-tool-ui .strength-fill { height: 6px; background: var(--bcl-accent); transition: width .5s ease; }
.bcl-tool-ui .strength-fill.high { background: var(--bcl-accent); }
.bcl-tool-ui .strength-fill.mid  { background: #B8892B; }
.bcl-tool-ui .strength-fill.low  { background: #8E2C1F; }
.bcl-tool-ui #strength-interpretation { margin-top: 12px; font-size: 15.5px; line-height: 1.6; color: #43443B; }


/* ==========================================================================
   Round 9 — vertical rhythm

   Every label/headline/body stack on the site was flush. Elementor emits no
   margin on these widgets and their containers carry row-gap: 0, so a kicker
   sat directly on the headline it labels and the hero standfirst touched both
   the headline above it and the buttons below it. The heading line-boxes hid
   how tight it was: the computed gap really was 0px everywhere.

   Fixed here rather than on the widgets so the whole site — homepage and all
   56 migrated pages — moves together and stays that way when a document is
   regenerated.
   ========================================================================== */

/* Kicker → the thing it labels. */
.bcl-hero-body > .bcl-kicker,
.bcl-page-hero > .bcl-kicker,
.bcl-att-body > .bcl-kicker,
.bcl-contact-left > .bcl-kicker { margin-bottom: clamp(14px, 1.6vw, 20px) !important; }

/* Display headline → standfirst → buttons. */
.bcl-hero-body > .bcl-t-hero,
.bcl-page-hero > .bcl-t-page,
.bcl-att-body > .bcl-t-name,
.bcl-contact-left > .bcl-t-contact { margin-bottom: clamp(18px, 2.2vw, 28px) !important; }

/* Only when something follows — on article pages the standfirst is last, and
   a trailing margin there would just deepen the hero. */
.bcl-hero-sub:not(:last-child) { margin-bottom: clamp(26px, 3.2vw, 40px) !important; }

/* Attorney column. */
.bcl-att-bar { margin-top: 0; }
.bcl-att-bio { margin-top: clamp(22px, 2.6vw, 30px); }
.bcl-att-facts { margin-top: clamp(28px, 3.2vw, 36px); }

/* The heading now carries the gap, so the old top margins would double it. */
.bcl-contact-p { margin-top: 0; }

/* Contact card: the paragraph ran straight into the first field label. */
.bcl-card-p { margin-top: 14px; }
.bcl-card > .bcl-form { margin-top: clamp(22px, 2.6vw, 30px) !important; }

/* Situation list under the hero. The list reset a few hundred lines up —
   `.bcl-hero ol, .bcl-hero ul { margin: 0 }` — is more specific than a single
   class, so the 18px this list was supposed to carry had never applied at any
   width. Matching that specificity is the fix, not another !important. */
.bcl-hero .bcl-sit-list { margin-top: clamp(22px, 2.6vw, 30px); }
.bcl-sit-foot { margin-top: 22px; }

/* Case index: the three-line meta column was set solid. */
.bcl-case-meta { gap: 8px; }
.bcl-case-go { margin-top: 2px; }

/* Article prose. Headings sat closer to the paragraph below them than the
   paragraphs sit to each other, which reads as the heading belonging to the
   wrong block. */
.bcl-article h2 { margin-bottom: clamp(16px, 1.6vw, 20px); }
.bcl-article h3 { margin-bottom: 14px; }
.bcl-article h4 { margin-bottom: 11px; }
.bcl-article p  { margin-bottom: 18px; }
.bcl-article ul li, .bcl-article ol li { margin-bottom: 11px; }
.bcl-article dt { margin-top: 20px; }


/* ==========================================================================
   Round 10 — motion

   Two mechanisms, deliberately different:

   Above the fold, entrances are CSS keyframes with `both` fill. The first
   painted frame is already frame 0 of the animation, so nothing is ever shown
   and then hidden, and it still runs with JavaScript disabled.

   Below the fold, the reveal is JS — but the script marks ONLY elements that
   start off-screen. An element you can already see is never touched, so there
   is no flash and no work done for content that needs none.

   Everything here sits inside prefers-reduced-motion: no-preference, so a
   reader who has asked for stillness gets the page with no motion at all
   rather than a shorter version of it.
   ========================================================================== */

/* Not motion — an anchor must clear the sticky header whether it animates or
   not, so this stays outside the query. */
html { scroll-padding-top: 104px; }

@media (prefers-reduced-motion: no-preference) {

  html { scroll-behavior: smooth; }

  @keyframes bcl-rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
  }

  .bcl-hero-body > .elementor-element,
  .bcl-page-hero > .elementor-element {
    animation: bcl-rise .85s cubic-bezier(.22, .7, .25, 1) both;
  }
  .bcl-hero-body > .elementor-element:nth-child(1),
  .bcl-page-hero > .elementor-element:nth-child(1) { animation-delay: .05s; }
  .bcl-hero-body > .elementor-element:nth-child(2),
  .bcl-page-hero > .elementor-element:nth-child(2) { animation-delay: .14s; }
  .bcl-hero-body > .elementor-element:nth-child(3),
  .bcl-page-hero > .elementor-element:nth-child(3) { animation-delay: .23s; }
  .bcl-hero-body > .elementor-element:nth-child(4),
  .bcl-page-hero > .elementor-element:nth-child(4) { animation-delay: .32s; }

  /* The hero photograph settles rather than rises — a translate would show
     the section's cut edge. */
  .bcl-hero-img { animation: bcl-settle 1s ease-out both; }
  @keyframes bcl-settle { from { opacity: 0; } to { opacity: 1; } }

  /* Applied by the behaviour script, to off-screen elements only. */
  .bcl-reveal { opacity: 0; transform: translateY(14px); }
  .bcl-reveal.bcl-in {
    opacity: 1;
    transform: none;
    transition: opacity .6s cubic-bezier(.22, .7, .25, 1),
                transform .6s cubic-bezier(.22, .7, .25, 1);
    transition-delay: var(--bcl-d, 0ms);
  }
}

/* Hover and focus transitions that were missing. Colour-only, so they cost
   nothing on the compositor. */
.bcl-article a,
.bcl-res-t,
.bcl-res-tag,
.bcl-more,
.bcl-foot-menu a,
.bcl-nav-h a,
.bcl-foot-tel a,
.bcl-rating-link,
.bcl-sit-foot a { transition: color .22s ease, border-color .22s ease; }

.bcl-quote { transition: background .3s ease, border-color .3s ease; }
.bcl-quote:hover { background: var(--bcl-plaster2); }

/* Focus is a design state, not a browser default: it must be visible on both
   grounds and must not be animated away. */
.bcl-article a:focus-visible,
.bcl-sit-list a:focus-visible,
.bcl-case:focus-visible,
.bcl-tool:focus-visible,
.bcl-more:focus-visible,
.bcl-foot-menu a:focus-visible {
  outline: 2px solid var(--bcl-accent);
  outline-offset: 3px;
}
.bcl-dark a:focus-visible,
.bcl-dark .bcl-sit-list a:focus-visible,
.bcl-dark .bcl-tool:focus-visible { outline-color: var(--bcl-accent-lt); }

@media (prefers-reduced-motion: reduce) {
  .bcl-reveal { opacity: 1 !important; transform: none !important; }
}/* End custom CSS */