/* multi-import:brand-layer:start - managed by Tools > Multi Import; edits inside are replaced on re-import */
/* Capital Wash & Seal — overrides.css — only documented tokens (see style.md). */
/* Palette is locked to exactly three brand hexes: Navy #073168, Cyan #03A1E1,
   Deep Blue #1554A0. No other colors are introduced. */

/* 1. Brand font: Manrope, self-hosted (client-supplied), three weights. */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/Manrope-Regular.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/Manrope-SemiBold.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/Manrope-Bold.woff2') format('woff2');}

:root{
  /* Fonts */
  --typography-family-heading:'Manrope', system-ui, -apple-system, sans-serif !important;
  --typography-family-main:'Manrope', system-ui, -apple-system, sans-serif !important;
  --typography-weight-heading:700 !important;

  /* Brand hues — the three locked brand colors only */
  --color-sienna:#073168 !important;       /* Navy -> primary */
  --color-sienna-deep:#1554A0 !important;  /* Deep Blue -> secondary/hover */
  --color-canadian-red:#03A1E1 !important; /* Cyan -> tertiary accent */

  /* Direct role pins (belt-and-braces so every alias lands on one of the 3 hexes) */
  --color-primary:#073168 !important;
  --color-secondary:#1554A0 !important;
  --color-accent:#1554A0 !important;
  --color-accent-hover:#03A1E1 !important;
  --color-tertiary:#03A1E1 !important;
  --color-link-text:#03A1E1 !important;
  --color-link-text-hover:#073168 !important;
  --color-heading:#073168 !important;
}

/* Dark-section headings (hero, cta-banner) sit on a navy/photo background already;
   force their heading + link color to stay within the palette (white for contrast
   is a structural neutral, not a brand color, so it's left alone by the theme). */
.block-cta-banner :is(h1,h2,h3){ color:var(--color-white) !important; }

/* --- CTA banner: best-effort visual match to the client-supplied "exact CTA"
   design (pressure-washing-cta-exact.html), scoped to .block-cta-banner only.
   This restyles the theme's own cta-banner block (colors, gradient panel feel,
   divider accent, pill buttons, spacing) using ONLY documented tokens, generated
   CSS content, and gradients -- no images, no new markup. It is a visual
   approximation, not the supplied component's literal HTML: the theme's
   cta-banner has one wrapper element, not the supplied design's separate
   full-bleed stone section + centered inner panel, so the coded paver-stone
   background (six rows of individually-shadowed <span> "stones") cannot be
   reproduced without adding that markup, which this content-folder format has
   no block for. See build-notes.md for the full explanation and the exact
   HTML/CSS file kept on hand if a literal Custom HTML embed is wanted later. */
.block-cta-banner{
  background:
    radial-gradient(circle at 50% 0%, rgba(3,161,225,0.20), transparent 55%),
    linear-gradient(180deg, var(--color-sienna-deep) 0%, var(--color-sienna) 100%) !important;
  /* Full-bleed: break the background out of the page's max-width container
     so it runs edge-to-edge, the same breakout technique the client's
     supplied CTA file uses. Only width/position change here -- the block's
     own inner padding is left alone so its centered content doesn't shift. */
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  box-sizing:border-box;
}
.block-cta-banner h2{
  font-size:clamp(32px,4.2vw,48px) !important;
  letter-spacing:-0.03em !important;
}
.block-cta-banner h2::after{
  content:"";
  display:block;
  width:78px;
  height:4px;
  margin:24px auto 0;
  background:var(--color-tertiary);
}
.block-cta-banner p{
  color:rgba(255,255,255,0.90) !important;
}
/* Buttons intentionally left at the theme's original design/markup -- not
   restyled to match the supplied component, per a later request to revert
   the button treatment back to how the site already had it. */
@media (max-width:600px){
  .block-cta-banner h2{ font-size:clamp(26px,8vw,36px) !important; }
}

/* --- Pricing table: the "Most Popular" tier's CTA button ships with a
   linear-gradient background (confirmed via live DevTools inspection,
   2026-09-01: `.is-popular .pricing-card-cta{ background-image:
   linear-gradient(135deg, var(--color-tertiary) 0, var(--color-tertiary-dark)
   100%); }`, on top of a flat background-color fallback of
   var(--color-tertiary)). Client asked for the gradient removed -- flattening
   it here falls back to the theme's own solid --color-tertiary (cyan),
   which still visually distinguishes the popular tier's button from the
   other cards' flat --color-primary (navy) buttons, just without the
   gradient sheen. */
.is-popular .pricing-card-cta{
  background-image:none !important;
}
/* multi-import:brand-layer:end */