/* ---- template: base.css ---- */
@layer reset, tokens, base, layout, components, theme, utilities, site;
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, figure { margin: 0; }
  img, svg, video { display: block; max-width: 100%; }
  img, video { height: auto; }
  button, input, textarea, select { font: inherit; }
  button { cursor: pointer; }
  [hidden] { display: none !important; } /* Native hidden must beat component display rules. */
}
@layer base {
  html { scroll-behavior: smooth; scroll-padding-block-start: 7rem; }
  body { font-family: var(--bc-font-body); font-size: var(--bc-font-base); line-height: var(--bc-leading); color: var(--bc-ink); background: var(--bc-surface); }
  h1, h2, h3, h4 { font-family: var(--bc-font-heading); font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
  h1 { font-size: var(--bc-h1); letter-spacing: .1em; line-height: 1.2; }
  h2 { font-size: var(--bc-h2); letter-spacing: .1em; }
  h3 { font-size: var(--bc-h3); letter-spacing: .06em; }
  a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: .08em; }
  a:hover { text-decoration-thickness: .13em; }
  :focus-visible { outline: 3px solid var(--bc-focus); outline-offset: 4px; }
  ::selection { color: var(--bc-on-accent); background: var(--bc-accent); }
  small { font-size: var(--bc-font-sm); }
  address { font-style: normal; }
  summary { cursor: pointer; }
  dialog { color: var(--bc-ink); }
  @media (max-width: 48rem) { body { font-size: 1rem; } }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  }
}

/* ---- template: fonts.css ---- */
/* Poppins, SIL Open Font License. Unmodified Latin subsets; see ../fonts/OFL-Poppins.txt. */
@font-face { font-family: Poppins; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/poppins-latin-400-normal.woff2?v=7d93459d86') format('woff2'); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/poppins-latin-500-normal.woff2?v=cd36de204a') format('woff2'); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/poppins-latin-600-normal.woff2?v=f4e80d9dfd') format('woff2'); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/poppins-latin-700-normal.woff2?v=9338e65fc0') format('woff2'); }

/* ---- template: tokens.css ---- */
@layer tokens {
  :root {
    --bc-font-body: Poppins, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --bc-font-heading: var(--bc-font-body);
    --bc-ink: #000000;
    --bc-muted: #565656;
    --bc-surface: #fff;
    --bc-soft: #f2f2f2;
    --bc-line: #c6c6c6;
    --bc-dark: #49566a;
    --bc-accent: #49566a;
    --bc-on-accent: #ffffff;
    --bc-focus: #1c5dbe;
    --bc-on-dark: #fff;
    --bc-font-sm: .875rem;
    --bc-font-base: 1.125rem;
    --bc-font-lg: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
    --bc-h1: clamp(2.25rem, 5vw, 4.5rem);
    --bc-h2: clamp(1.875rem, 3.34vw, 3rem);
    --bc-h3: clamp(1.25rem, 1.1rem + .6vw, 1.65rem);
    --bc-leading: 1.5;
    --bc-space-1: .25rem;
    --bc-space-2: .5rem;
    --bc-space-3: .75rem;
    --bc-space-4: 1rem;
    --bc-space-5: 1.5rem;
    --bc-space-6: 2rem;
    --bc-space-7: 3rem;
    --bc-space-8: 4.5rem;
    --bc-space-9: 6rem;
    --bc-section: clamp(4rem, 7vw, 6.25rem);
    --bc-gutter: clamp(1.25rem, 7vw, 6.25rem);
    --bc-wrap: 77.5rem;
    --bc-reading: 66ch;
    --bc-radius: 0rem;
    --bc-shadow: 0 .5rem 2rem rgb(0 0 0 / .10);
    --bc-motion: 180ms ease;
  }
}

/* ---- template: layout.css ---- */
@layer layout {
  .bc-wrap { width: min(var(--bc-wrap), 100% - var(--bc-gutter) * 2); margin-inline: auto; }
  .bc-section { padding-block: var(--bc-section); }
  .bc-soft { background: var(--bc-soft); }
  .bc-dark { color: var(--bc-on-dark); background: var(--bc-dark); --bc-focus: #fff; }
  .bc-stack > * + * { margin-block-start: var(--bc-space-5); }
  .bc-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bc-space-4); }
  .bc-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); }
  .bc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--bc-space-6); }
  .bc-section-head { display: flex; align-items: end; justify-content: space-between; gap: var(--bc-space-6); margin-block-end: var(--bc-space-7); }
  .bc-section-head h2 { max-width: 28ch; }
  .bc-section-head p { max-width: 44ch; color: var(--bc-muted); }
  .bc-prose { max-width: var(--bc-reading); }
  .bc-prose > * + * { margin-block-start: var(--bc-space-5); }
  .bc-prose :is(ul, ol) { padding-inline-start: 1.3rem; }
  .bc-prose li + li { margin-block-start: .6rem; }
  .bc-page-intro { padding-block: clamp(3rem, 7vw, 6rem); background: var(--bc-soft); }
  .bc-page-intro h1 { max-width: 20ch; }
  .bc-page-intro p { max-width: 60ch; }
  .bc-aside-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(15rem, 1fr); align-items: start; gap: var(--bc-space-8); }
  .bc-intro-copy { max-width: 50rem; }
  .bc-section--intro { padding-block: clamp(4rem, 10.4vw, 9.375rem); }
  @media (max-width: 48rem) {
    .bc-split, .bc-aside-grid { grid-template-columns: minmax(0, 1fr); }
    .bc-section-head { display: grid; }
  }
}

/* ---- template: components.css ---- */
@layer components {
  .bc-skip { position: absolute; inset: .5rem auto auto .5rem; z-index: 100; padding: .7rem 1rem; background: var(--bc-surface); color: var(--bc-ink); transform: translateY(-200%); }
  .bc-skip:focus { transform: translateY(0); }
  .bc-topbar { block-size: 1.75rem; background: var(--bc-accent); }
  .bc-header { position: absolute; inset: 1.75rem 0 auto; z-index: 10; color: #fff; background: transparent; --bc-focus: #fff; }
  .bc-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.875rem; }
  .bc-brand { flex: 0 0 auto; }
  .bc-brand img { width: 16.875rem; height: auto; }
  .bc-nav { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1rem, 3.3vw, 3rem); }
  .bc-nav a { font-size: 1.125rem; font-weight: 400; text-decoration: none; }
  .bc-menu-toggle { display: none; align-items: center; gap: .5rem; border: 1px solid var(--bc-line); border-radius: var(--bc-radius); padding: .6rem .8rem; background: transparent; color: #fff; min-height: 2.75rem; }
  .bc-button { display: inline-flex; justify-content: center; align-items: center; gap: .75rem; min-height: 3.625rem; min-width: 15rem; padding: 1rem 1.5rem; border: 1px solid transparent; border-radius: var(--bc-radius); background: var(--bc-accent); color: var(--bc-on-accent); font-size: 1.125rem; font-weight: 400; line-height: 22px; text-align: center; text-decoration: none; transition: background var(--bc-motion), box-shadow var(--bc-motion); max-width: 100%; }
  .bc-button:hover { box-shadow: inset 0 0 0 100vmax rgb(0 0 0 / .07); text-decoration: none; }
  .bc-button--outline { border-color: currentColor; background: transparent; color: inherit; }
  .bc-button--dark { background: var(--bc-dark); color: var(--bc-on-dark); }
  .bc-button:disabled { opacity: .55; cursor: not-allowed; }
  .bc-header .bc-button { border: 2px solid #fff; }
  .bc-link { font-weight: 600; display: inline-flex; align-items: center; gap: .5rem; }
  .bc-eyebrow { font-size: 1.125rem; font-weight: 400; text-transform: uppercase; letter-spacing: .2em; }

  .bc-hero { position: relative; isolation: isolate; display: grid; align-items: center; min-height: 33rem; padding-block: 11rem 5rem; color: #fff; background: #49566a; --bc-focus: #fff; }
  .bc-hero__image { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .bc-hero::before { content: ''; position: absolute; z-index: -1; inset: 0; background: rgb(0 0 0 / .46); }
  .bc-hero h1 { max-width: 100%; text-align: center; text-transform: uppercase; }
  .bc-hero--home { min-height: 100svh; }
  .bc-hero--home h1 { max-width: 19ch; margin-inline: auto; }
  .bc-hero .bc-wrap { text-align: center; }
  .bc-hero .bc-cluster { justify-content: center; }
  .bc-hero p:where(:not(.bc-eyebrow)) { max-width: 60ch; margin-inline: auto; font-size: var(--bc-font-lg); }
  .bc-hero__caption { margin-block-start: var(--bc-space-7); font-size: .75rem; }
  .bc-trust { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; padding-block: 1.25rem; border-block-end: 1px solid var(--bc-line); font-size: var(--bc-font-sm); }
  .bc-media { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--bc-soft); }
  .bc-media--contain { object-fit: contain; }
  .bc-card { display: flex; flex-direction: column; gap: var(--bc-space-4); min-width: 0; }
  .bc-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .bc-card p { color: var(--bc-muted); }
  .bc-card .bc-link { margin-block-start: auto; padding-block-start: var(--bc-space-2); }
  .bc-tag { display: inline-block; border: 1px solid var(--bc-line); padding: .35rem .7rem; border-radius: var(--bc-radius); font-size: .75rem; }
  .bc-steps { list-style: none; padding: 0; margin: 0; counter-reset: bc-step; }
  .bc-steps li { counter-increment: bc-step; border-block-start: 1px solid var(--bc-line); padding-block: 1.5rem; display: grid; grid-template-columns: 2.5rem 1fr; gap: 0 1rem; align-content: start; }
  .bc-steps li::before { content: '0' counter(bc-step); grid-row: 1 / span 2; color: var(--bc-muted); font-weight: 500; }
  .bc-steps li > * { grid-column: 2; }
  .bc-steps h3 { font-size: 1.25rem; margin-block-end: .5rem; }
  .bc-faq { border-block-end: 1px solid var(--bc-line); padding-block: 1.25rem; }
  .bc-faq summary { font-weight: 600; padding-inline-end: .5rem; }
  .bc-faq p { margin-block-start: 1rem; max-width: var(--bc-reading); color: var(--bc-muted); }
  .bc-breadcrumb { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1.5rem; font-size: var(--bc-font-sm); }
  .bc-breadcrumb li + li::before { content: '/'; margin-inline-end: .5rem; color: var(--bc-muted); }
  .bc-callout { background: var(--bc-soft); padding: clamp(1.5rem, 3vw, 2.5rem); border-inline-start: 3px solid var(--bc-accent); }
  .bc-callout h2, .bc-callout h3 { font-size: 1.5rem; }
  .bc-gallery { display: grid; gap: var(--bc-space-5); }
  .bc-gallery__row { display: flex; gap: var(--bc-space-5); align-items: flex-start; }
  .bc-gallery figure { flex: var(--r, 1) 1 0; min-width: 0; }
  .bc-gallery a { display: block; cursor: zoom-in; }
  .bc-zoom, .bc-card__media { display: block; }
  .bc-zoom { cursor: zoom-in; }
  .bc-zoom img, .bc-card__media img { transition: opacity .2s; }
  .bc-zoom:hover img, .bc-card__media:hover img { opacity: .9; }
  .bc-gallery img { width: 100%; height: auto; transition: opacity .2s; }
  .bc-gallery a:hover img { opacity: .9; }
  .bc-gallery figcaption { font-size: var(--bc-font-sm); margin-block-start: .75rem; }
  /* Lightbox: close button top right, the photo as large as the screen allows at its own shape, caption under it.
     The box shrinks to the photo, and the caption never widens it (width 0 / min-width 100%). */
  .bc-dialog { width: fit-content; max-width: min(76rem, 94vw); max-height: 94svh; padding: 1rem; border: 0; border-radius: var(--bc-radius); background: var(--bc-surface); }
  .bc-dialog[open] { display: grid; grid-template-areas: 'close' 'photo' 'caption'; gap: .75rem; }
  .bc-dialog::backdrop { background: rgb(0 0 0 / .8); }
  .bc-dialog__bar { display: contents; }
  .bc-dialog [data-gallery-close] { grid-area: close; justify-self: end; min-height: 2.75rem; padding: .5rem 1.25rem; }
  .bc-dialog img { grid-area: photo; margin-inline: auto; max-height: calc(94svh - 9rem); width: auto; height: auto; }
  .bc-dialog [data-gallery-caption] { grid-area: caption; width: 0; min-width: 100%; font-size: var(--bc-font-sm); }
  .bc-field { display: grid; gap: .4rem; font-size: var(--bc-font-sm); font-weight: 500; }
  .bc-field input, .bc-field textarea, .bc-field select { width: 100%; min-height: 3rem; border: 1px solid #777b70; border-radius: var(--bc-radius); padding: .7rem .85rem; color: var(--bc-ink); background: var(--bc-surface); font-size: 1rem; font-weight: 400; }
  .bc-field textarea { min-height: 9rem; resize: vertical; }
  .bc-field__hint { color: var(--bc-muted); font-size: .8125rem; }
  .bc-field [aria-invalid='true'] { border-color: #a11b1b; }
  /* Dark text on its own light box, so form messages stay readable inside dark bands (the inquiry form). */
  .bc-alert { padding: 1rem; border-inline-start: 4px solid var(--bc-focus); color: var(--bc-ink); background: var(--bc-soft); font-weight: 500; }
  .bc-alert.ok { border-inline-start-color: #1e7b34; }
  .bc-alert.err { border-inline-start-color: #b3261e; }
  .bc-footer { padding-block-start: var(--bc-space-8); color: var(--bc-ink); background: #fff; }
  .bc-footer__logo { width: 26rem; margin-inline: auto; }
  .bc-footer__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--bc-space-7); text-align: center; align-items: start; }
  .bc-footer h2 { font-size: 2rem; margin-block-end: 1rem; font-weight: 400; }
  .bc-footer p, .bc-footer address { font-size: 1.125rem; line-height: 2; }
  .bc-footer a, .bc-footer address { overflow-wrap: anywhere; }
  .bc-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; font-size: var(--bc-font-sm); }
  .bc-footer__base { margin-block-start: var(--bc-space-7); padding: 1.5rem; color: #fff; background: var(--bc-accent); text-align: center; font-size: .875rem; }
  .bc-swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem; }
  .bc-swatch { padding: 1.5rem 1rem; border: 1px solid var(--bc-line); }
  .bc-swatch--accent { background: var(--bc-accent); color: var(--bc-on-accent); }
  .bc-swatch--dark { background: var(--bc-dark); color: var(--bc-on-dark); }
  @media (max-width: 76rem) {
    .bc-header__inner { gap: .75rem; }
    .bc-brand img { width: clamp(9rem, 45vw, 12rem); }
    .bc-header__inner { padding-block: 1.25rem; }
    .bc-nav { flex-basis: 100%; justify-content: flex-start; }
    .bc-js .bc-menu-toggle { display: inline-flex; }
    .bc-js .bc-nav:not([data-open]) { display: none; }
    .bc-nav { background: var(--bc-dark); padding: 1rem; }
    html:not(.bc-js) .bc-header { position: relative; inset: auto; background: var(--bc-dark); }
    .bc-js .bc-nav { background: var(--bc-dark); padding-inline: 1rem; align-items: stretch; gap: .4rem; padding-block: .75rem; border-block-start: 1px solid var(--bc-line); }
    .bc-js .bc-nav a { width: 100%; padding: .65rem; }
    .bc-js .bc-nav .bc-button { width: auto; margin-block-start: .5rem; }
  }
  @media (max-width: 62rem) { .bc-footer__grid { grid-template-columns: 1fr; } }
  @media (max-width: 48rem) {  /* phone footer: smaller logo and type, links in one wrapping row */
    .bc-footer { padding-block-start: var(--bc-space-7); }
    .bc-footer__grid { gap: var(--bc-space-6); }
    .bc-footer__logo { width: min(15rem, 70%); }
    .bc-footer h2 { font-size: 1.375rem; margin-block-end: .5rem; }
    .bc-footer p, .bc-footer address { font-size: 1rem; line-height: 1.6; }
    .bc-footer ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.25rem; font-size: 1rem; }
    .bc-footer li a { display: inline-block; padding-block: .35rem; }
    .bc-footer__base { margin-block-start: var(--bc-space-6); padding: 1rem; }
  }
  @media (max-width: 36rem) {
    .bc-footer__grid { grid-template-columns: 1fr; }
    .bc-gallery__row { flex-direction: column; }
    .bc-gallery figure { flex: none; width: 100%; }
    .bc-hero { min-height: 25rem; padding-block: 9rem 4rem; }
    .bc-hero--home { min-height: 85svh; }
    .bc-eyebrow, .bc-button { font-size: 1rem; }
    .bc-button { min-width: min(15rem, 100%); }
    .bc-trust { display: grid; }
  }
  .bc-feature-band { padding-block: var(--bc-section); background: #808080; }
  .bc-feature-panel { width: min(56.25rem, 100%); margin-inline-start: auto; padding: clamp(2rem, 4vw, 4rem); background: var(--bc-soft); text-align: center; }
  .bc-feature-panel .bc-cluster { justify-content: center; }
  .bc-title-light { font-weight: 400; }
  @media print {
    .bc-header, .bc-footer, .bc-menu-toggle, .bc-dialog, .bc-skip { display: none; }
    .bc-hero { min-height: 0; background: white; color: black; }
    .bc-hero::before, .bc-hero__image { display: none; }
    .bc-section { padding-block: 1.5rem; }
    .bc-dark { color: black; background: white; }
  }

  /* ---------- Menu with dropdowns (header on wide screens, drawer below 76rem) ---------- */
  .bc-nav__list { display: flex; align-items: center; gap: clamp(.75rem, 2.4vw, 2.5rem); list-style: none; margin: 0; padding: 0; }
  .bc-nav__item { position: relative; display: flex; align-items: center; }
  .bc-nav__item > a { padding-block: .5rem; white-space: nowrap; }
  .bc-nav__item > a:hover, .bc-nav__item > a[aria-current='page'] { text-decoration: underline; }
  .bc-subnav-toggle { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; background: none; color: inherit; }
  .bc-subnav-toggle span { width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
  .bc-subnav { position: absolute; inset: 100% auto auto 0; min-width: 15rem; margin: 0; padding: .5rem 0; list-style: none; background: #fff; color: var(--bc-ink); box-shadow: var(--bc-shadow); visibility: hidden; opacity: 0; transform: translateY(.25rem); transition: opacity var(--bc-motion), transform var(--bc-motion), visibility var(--bc-motion); z-index: 20; }
  .bc-subnav a { display: block; padding: .55rem 1.25rem; font-size: 1rem; white-space: nowrap; }
  .bc-subnav a:hover, .bc-subnav a[aria-current='page'] { background: var(--bc-soft); text-decoration: none; }
  .bc-nav__item--has-sub:hover > .bc-subnav, .bc-nav__item--has-sub:focus-within > .bc-subnav, .bc-nav__item--has-sub[data-open] > .bc-subnav { visibility: visible; opacity: 1; transform: none; }
  .bc-header__call { min-width: 0; white-space: nowrap; }
  @media (max-width: 76rem) {
    .bc-nav__list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
    .bc-nav__item { flex-wrap: wrap; justify-content: space-between; border-block-end: 1px solid rgb(255 255 255 / .18); }
    .bc-nav__item > a { padding: .75rem .25rem; }
    .bc-subnav { position: static; display: none; width: 100%; min-width: 0; padding: 0 0 .5rem 1rem; background: transparent; color: #fff; box-shadow: none; visibility: visible; opacity: 1; transform: none; }
    .bc-nav__item--has-sub[data-open] > .bc-subnav { display: block; }
    .bc-subnav a { padding: .5rem .25rem; }
    .bc-subnav a:hover, .bc-subnav a[aria-current='page'] { background: transparent; text-decoration: underline; }
    .bc-subnav a[aria-current='page'] { font-weight: 600; }  /* the desktop light box made white drawer text unreadable */
    .bc-subnav-toggle { width: 2.75rem; height: 2.75rem; }
    .bc-js .bc-nav .bc-header__call { margin-block-start: 1rem; width: 100%; }
    .bc-js .bc-nav__item > a { width: auto; flex: 1 1 0; padding: .6rem .25rem; }  /* label and dropdown arrow share one row */
  }

  /* ---------- Hero ---------- */
  .bc-hero { min-height: 34.7rem; padding-block: 9rem 4rem; }
  .bc-hero--full { min-height: 100vh; min-height: 100svh; }
  .bc-hero__inner { display: grid; justify-items: center; gap: var(--bc-space-5); text-align: center; }
  .bc-hero .bc-hero__title { max-width: none; font-size: var(--bc-h1); font-weight: 700; letter-spacing: .1em; line-height: 1.2; text-transform: uppercase; text-shadow: 0 2px 24px rgb(0 0 0 / .35); }
  .bc-hero .bc-hero__h1 { margin: 0; font-size: clamp(1rem, .9rem + .5vw, 1.25rem); font-weight: 400; letter-spacing: normal; line-height: 1.5; text-transform: none; max-width: 40ch; }
  .bc-hero__sub { font-size: var(--bc-font-lg); }
  .bc-hero__video { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
  .bc-hero__video[data-playing], .bc-band__video[data-playing] { opacity: 1; }
  @media (max-width: 36rem) { .bc-hero { min-height: 25rem; padding-block: 8rem 3rem; } .bc-hero--full { min-height: calc(100svh - 1.75rem); } }

  /* ---------- Intro with the page H1 ---------- */
  .bc-intro { padding-block: clamp(4rem, 8vw, 7.5rem); }
  .bc-intro__grid { align-items: center; }
  .bc-intro h1 { font-size: var(--bc-h2); line-height: 1.5; text-transform: uppercase; }
  .bc-intro__image { width: 100%; height: auto; }  /* keeps the photo's own shape, so project photos aren't cropped */
  .bc-copy a, .bc-panel p a, .bc-feature-card p a { text-decoration: underline; }
  .bc-copy > p + p { margin-block-start: var(--bc-space-4); }
  .bc-center { justify-content: center; }
  
  /* ---------- Category band (photo or video with title and buttons) ---------- */
  .bc-band { position: relative; isolation: isolate; display: grid; align-items: center; min-height: clamp(30rem, 60vw, 53.6rem); padding-block: var(--bc-section); color: #fff; background: var(--bc-dark); --bc-focus: #fff; }
  .bc-band::before { content: ''; position: absolute; z-index: -1; inset: 0; background: rgb(0 0 0 / .4); }
  .bc-band__image, .bc-band__video { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .bc-band__video { opacity: 0; transition: opacity .6s ease; }
  .bc-band__inner { display: grid; justify-items: center; gap: var(--bc-space-6); text-align: center; }
  .bc-band__title { font-size: var(--bc-h1); font-weight: 600; line-height: 1.2; text-transform: uppercase; text-shadow: 0 2px 24px rgb(0 0 0 / .35); }
  .bc-band__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--bc-space-4) clamp(1rem, 4vw, 4rem); }
  @media (max-width: 36rem) { .bc-band__buttons { display: grid; width: min(15rem, 100%); } }
  .bc-button--band { border: 2px solid #fff; }

  /* ---------- Cards: equal heights, buttons aligned at the bottom ---------- */
  .bc-cards__heading { text-align: center; font-size: var(--bc-font-lg); letter-spacing: .1em; text-transform: uppercase; margin-block-end: var(--bc-space-6); padding-inline: var(--bc-space-4); }
  .bc-cards__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--bc-space-6); }
  .bc-cards .bc-card { display: flex; flex-direction: column; }
  .bc-cards .bc-card img { border-radius: .6rem; }
  .bc-cards .bc-card h3 { font-size: 1.5rem; letter-spacing: .1em; line-height: 1.3; }
  .bc-cards .bc-card p { color: var(--bc-ink); flex: 1 1 auto; }
  .bc-cards .bc-card .bc-button { align-self: flex-start; min-width: 12.5rem; min-height: 3.125rem; padding: .75rem 1.5rem; font-weight: 600; color: #0c1882; border-width: 2px; white-space: nowrap; }

  /* ---------- Photo backdrop with a light panel (steps, FAQ, form, about) ---------- */
  .bc-panel-band { position: relative; isolation: isolate; padding-block: var(--bc-section); background: #808080; }
  .bc-panel__image { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .bc-panel { width: min(56.25rem, 100%); margin-inline-start: auto; padding: clamp(1.75rem, 4vw, 3.5rem); background: rgb(242 242 242 / .96); }
  .bc-panel--left { margin-inline: 0 auto; }
  .bc-panel-band:not(:has(> .bc-panel__image)) .bc-panel { margin-inline: auto; }  /* no backdrop photo: center the panel */
  .bc-panel > .bc-eyebrow, .bc-panel > h2:first-of-type { text-align: center; }
  .bc-panel h2 { font-weight: 400; }
  .bc-panel__sub { font-size: 1.5rem; letter-spacing: .06em; text-align: left; }
  .bc-panel .bc-steps h3 { font-size: 1.125rem; letter-spacing: normal; }
  .bc-feature-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--bc-space-6); align-items: center; }
  .bc-feature-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .bc-feature-card h3 { font-size: 1.5rem; letter-spacing: .02em; line-height: 1.3; }
  .bc-feature-card h3 a { text-decoration: none; }
  .bc-feature-card h3 a:hover { text-decoration: underline; }
  .bc-meta { font-size: var(--bc-font-sm); color: var(--bc-muted); }
  @media (max-width: 48rem) { .bc-feature-card { grid-template-columns: 1fr; } }

  /* ---------- Inquiry form: white text on a darkened photo ---------- */
  .bc-inquiry { color: #fff; --bc-focus: #fff; }
  .bc-inquiry::before { content: ''; position: absolute; z-index: -1; inset: 0; background: rgb(0 0 0 / .55); }
  .bc-inquiry .bc-panel__image { z-index: -2; }
  .bc-inquiry .bc-panel { margin-inline: auto; background: transparent; padding-inline: 0; }
  .bc-inquiry h2 { text-align: center; text-transform: uppercase; }
  .bc-inquiry .bc-copy { text-align: center; }
  .bc-inquiry a, .bc-inquiry .bc-privacy { color: #fff; }
  .bc-inquiry .bc-form .bc-button { justify-self: center; }
  .bc-inquiry .bc-privacy { text-align: center; }

  /* ---------- About: rounded photo beside the text ---------- */
  .bc-about__image { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: 1.25rem; }
  .bc-about h2 { text-transform: uppercase; }
  .bc-form { display: grid; gap: var(--bc-space-5); }
  .bc-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bc-space-4); }
  .bc-form .bc-button { justify-self: start; }
  .bc-hp { position: absolute; left: -100vw; width: 1px; height: 1px; opacity: 0; }
  .bc-privacy { font-size: var(--bc-font-sm); color: var(--bc-muted); }
  @media (max-width: 36rem) { .bc-form__grid { grid-template-columns: 1fr; } }

  /* ---------- Showroom map ---------- */
  .bc-showroom h2 { text-align: center; }
  .bc-map { position: relative; aspect-ratio: 8 / 3; background: var(--bc-soft); }
  .bc-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .bc-address { text-align: center; }
  @media (max-width: 48rem) { .bc-map { aspect-ratio: 4 / 3; } }

  /* ---------- Document (privacy policy, terms) ---------- */
  .bc-doc { max-width: 46rem; margin-inline: auto; }
  .bc-doc h2 { margin-block: var(--bc-space-7) var(--bc-space-4); font-size: 1.5rem; letter-spacing: .06em; line-height: 1.3; }
  .bc-doc p + p, .bc-doc ul + p { margin-block-start: var(--bc-space-4); }
  .bc-doc ul { margin-block: var(--bc-space-4); padding-inline-start: 1.3rem; }
  .bc-doc li + li { margin-block-start: .5rem; }
  .bc-doc a { text-decoration: underline; }
  .bc-doc__updated { font-size: var(--bc-font-sm); color: var(--bc-muted); }

  /* ---------- Project story ---------- */
  .bc-video video { width: 100%; height: auto; aspect-ratio: 4 / 3; background: #000; }
  .bc-video figcaption { margin-block-start: .5rem; font-size: var(--bc-font-sm); }
  .bc-scope { padding-inline-start: 1.3rem; }
  .bc-scope li + li { margin-block-start: .4rem; }
  .bc-feature__image { width: 100%; height: auto; border-radius: .6rem; }
  .bc-feature figcaption { font-size: var(--bc-font-sm); margin-block-start: .75rem; }
  .bc-footer__license { font-size: var(--bc-font-sm); line-height: 1.6; margin-block-start: var(--bc-space-4); }

  /* ---------- Question (a searched question answered on the page) ---------- */
  .bc-question__top { align-items: center; }
  .bc-question__top--left .bc-question__figure { order: -1; }
  .bc-question__answer { font-size: var(--bc-font-lg); line-height: 1.6; background: var(--bc-soft); border-inline-start: 3px solid var(--bc-accent); padding: 1.25rem 1.5rem; }
  .bc-question--soft .bc-question__answer { background: var(--bc-surface); }
  .bc-question__answer::before { content: attr(data-label); display: block; margin-block-end: .4rem; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--bc-muted); }
  .bc-question__figure { margin: 0; }
  .bc-question__image { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
  .bc-question__figure figcaption { font-size: var(--bc-font-sm); color: var(--bc-muted); margin-block-start: .6rem; }
  .bc-compare { width: 100%; border-collapse: collapse; background: var(--bc-surface); font-size: 1rem; }
  .bc-compare th, .bc-compare td { padding: 1rem 1.25rem; text-align: start; vertical-align: top; border-block-end: 1px solid var(--bc-line); }
  .bc-compare thead th, .bc-compare thead td { background: var(--bc-dark); color: var(--bc-on-dark); font-weight: 600; }
  .bc-compare tbody th { font-weight: 600; width: 24%; }
  .bc-question:not(.bc-question--soft) .bc-compare { border: 1px solid var(--bc-line); }
  .bc-question .bc-compare, .bc-question .bc-points { margin-block-start: var(--bc-space-6); }
  .bc-points { list-style: none; padding: 0; margin-inline: 0; margin-block-end: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; }
  .bc-points li { background: var(--bc-surface); padding: 1.5rem; border-block-start: 3px solid var(--bc-accent); }
  .bc-question:not(.bc-question--soft) .bc-points li { background: var(--bc-soft); }
  .bc-points h3 { font-size: 1.125rem; letter-spacing: normal; margin-block-end: .5rem; }
  .bc-points p { color: var(--bc-muted); }
  .bc-points a { text-decoration: underline; }
  @media (max-width: 48rem) {
    .bc-question__top--left .bc-question__figure { order: 0; }
    .bc-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .bc-compare, .bc-compare tbody, .bc-compare tr, .bc-compare th, .bc-compare td { display: block; width: 100%; }
    .bc-compare tr { padding: 1rem 1.25rem; border-block-end: 1px solid var(--bc-line); }
    .bc-compare tbody th, .bc-compare td { border: 0; padding: .25rem 0; width: auto; }
    .bc-compare tbody th { padding-block-end: .5rem; }
    .bc-compare td::before { content: attr(data-label) ": "; font-weight: 600; }
  }

  /* ---------- Service areas (area_cards, area_list, area_projects) ---------- */
  .bc-area-cards .bc-cards__grid { margin-block-start: var(--bc-space-4); }
  .bc-area-list__places { list-style: none; padding-inline-start: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--bc-space-3) var(--bc-space-6); }
  .bc-prose .bc-area-list__places { padding-inline-start: 0; }
  .bc-area-list__places a { text-decoration: underline; }
}

/* ---- template: utilities.css ---- */
@layer utilities {
  .bc-muted { color: var(--bc-muted); }
  .bc-lead { font-size: var(--bc-font-lg); }
  .bc-measure { max-width: var(--bc-reading); }
  .bc-span-all { grid-column: 1 / -1; }
  .bc-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
}

@layer theme {
  :root {
    --bc-ink: #000000;
    --bc-muted: #565656;
    --bc-surface: #ffffff;
    --bc-soft: #f2f2f2;
    --bc-line: #c6c6c6;
    --bc-dark: #49566a;
    --bc-accent: #49566a;
    --bc-on-accent: #ffffff;
    --bc-focus: #1c5dbe;
    --bc-on-dark: #ffffff;
  }
}
/* ---- site: prelaunch-fixes.css ---- */
@layer site {
/* Pre-launch fixes from the October 26, 2026 audit. Site-only; candidates to move into the template. */

/* Phone numbers stay on one line instead of breaking at a hyphen ("760-682-" / "5027"). */
a[href^="tel:"] { white-space: nowrap; }

/* Two white sections in a row (intro + feature, showroom + about, intro + project story) each added their own
   padding, leaving a double-height empty band. The second one drops its top padding so the gap is one section's. */
.bc-section:not(.bc-soft) + .bc-section:not(.bc-soft) { padding-block-start: 0; }

/* Photo-backed panels on phones and tablets. Stretched behind a 1,500–2,600px-tall panel, a landscape photo was
   blown up 3–7x and looked smeared. Up to 62rem the photo becomes a sharp strip above the panel, with the panel
   overlapping its lower edge so it still reads as a card on a photo. Desktop is unchanged. */
@media (max-width: 62rem) {
  .bc-panel-band:not(.bc-inquiry):has(> .bc-panel__image) { padding-block-start: 0; background: var(--bc-soft); }
  .bc-panel-band:not(.bc-inquiry) > .bc-panel__image { position: static; z-index: auto; display: block; height: auto; aspect-ratio: 16 / 10; }
  .bc-panel-band:not(.bc-inquiry) > .bc-panel__image + .bc-wrap .bc-panel { position: relative; margin-block-start: -2.5rem; background: var(--bc-soft); }

  /* Contact form band: the photo sat under a 55% black overlay and only showed as blur. Solid brand slate instead
     (white text on #49566a passes contrast); the hidden lazy image isn't downloaded. */
  .bc-inquiry { background: var(--bc-dark); }
  .bc-inquiry > .bc-panel__image { display: none; }
  .bc-inquiry::before { display: none; }
  .bc-inquiry .bc-form .bc-button { color: var(--bc-dark); background: #fff; border-color: #fff; }
  .bc-inquiry .bc-form .bc-button:hover { color: #fff; background: transparent; }
}

/* Category band buttons on phones: a slightly wider column keeps longer labels ("Kitchen Remodeling") on one line. */
@media (max-width: 36rem) {
  .bc-band__buttons { width: min(18rem, 100%); }
  .bc-band__buttons > * { white-space: nowrap; }
}

/* Large screens (October 28, 2026: 14- and 16-inch laptops, 1080p and 1440p monitors). The layout was capped at
   1,240px, so on a 16-inch MacBook (1,728px wide) the header and every section sat in a narrow column with wide empty
   margins, and text stayed 16px. From 1,440px up, the content column widens; from 1,680px up, everything scales
   with the root font size (all spacing and type are in rem). Phones, tablets and smaller laptops are unchanged. */
@media (min-width: 90rem) { :root { --bc-wrap: 86rem; } }
@media (min-width: 105rem) { html { font-size: 106.25%; } :root { --bc-wrap: 94rem; } }
@media (min-width: 120rem) { html { font-size: 112.5%; } :root { --bc-wrap: 100rem; } }
@media (min-width: 150rem) { html { font-size: 125%; } :root { --bc-wrap: 108rem; } }

/* Header: less empty space above and below the logo and menu on desktop. */
.bc-header__inner { padding-block: 1.25rem; }

/* Page heroes on desktop (October 28, 2026). The fixed 555px band was about 2.6x wider than tall, so a 4:3 project
   photo showed only half its height and a portrait bathroom photo about a third. From 62rem up, page heroes grow with
   the window width, capped below the fold, so more of each photo shows. The full-height homepage hero is unchanged. */
@media (min-width: 62rem) {
  .bc-hero:not(.bc-hero--full) { min-height: clamp(34.7rem, 45vw, 75svh); }
}

}