/* multi-import:brand-layer:start - managed by Tools > Multi Import; edits inside are replaced on re-import */
/* RoofRoof Ottawa - overrides.css
   Only documented tokens (build-client-zip references/style.md) plus a few safe rules.
   Brand: Archivo (body) + Archivo Black (headings), red palette pulled from the logo SVG
   (brand red #e2151e, deep red #ae0816, charcoal #17110f, white). */

/* 1. Self-hosted fonts (shipped in styles/assets/fonts/, installed to assets/dist/fonts/). */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/archivo-400.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/archivo-500.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/archivo-600.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/archivo-700.woff2') format('woff2');}
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/archivo-black-400.woff2') format('woff2');}

:root{
  /* Fonts - Archivo Black on headings, Archivo on body/UI */
  --typography-family-heading:'Archivo Black', 'Arial Black', system-ui, -apple-system, sans-serif;
  --typography-family-main:'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --typography-family-paragraph:'Archivo', system-ui, -apple-system, sans-serif;
  /* Archivo Black is a single heavy weight - don't synthesize bold on top of it */
  --typography-weight-heading:400;

  /* Brand hues - recolour primary/accent/links via aliases */
  --color-sienna:#e2151e;        /* brand red (logo suspenders + second R) */
  --color-sienna-deep:#ae0816;   /* deep red for hover/emphasis */
  --color-canadian-red:#26211d;  /* warm charcoal for narrow accents/badges */

  /* Direct role pins */
  --color-primary:#e2151e;
  --color-secondary:#ae0816;
  --color-tertiary:#26211d;
  --color-accent:#e2151e;
  --color-accent-hover:#ae0816;
  --color-link-text:#e2151e;
  --color-link-text-hover:#ae0816;

  /* Surfaces and ink - white paper on a soft warm off-white, near-black warm ink */
  --color-paper:#ffffff;
  --color-paper-tint:#faf4f3;
  --color-paper-deep:#f2e7e6;
  --color-rule:#e6dad9;
  --color-ink:#17110f;
  --color-ink-soft:#5c524e;
}

/* Page background - soft warm off-white so the red reads as the accent */
body{background:#faf6f5;}

/* Scrollbars in the brand red (Firefox + WebKit) */
html,*{scrollbar-width:thin;scrollbar-color:#e2151e #f2e7e6;}
::-webkit-scrollbar{width:12px;height:12px;}
::-webkit-scrollbar-track{background:#f2e7e6;}
::-webkit-scrollbar-thumb{
  background:linear-gradient(#e2151e,#ae0816);
  border:3px solid #f2e7e6;
  border-radius:8px;}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(#ae0816,#7a0610);}
::-webkit-scrollbar-corner{background:#f2e7e6;}

/* Keep hero/CTA headings light on the dark brand background */
.block-cta-banner :is(h1,h2,h3){color:var(--color-on-primary);}

/* 4. CTA banner - red bitumen-shingle texture.
   No roof silhouette: the banner stays a clean rectangle, but its surface is a
   seamless staggered asphalt-shingle pattern (inline SVG tile, red over dark red,
   with granule noise) plus a darkening overlay so the white copy stays readable.
   The theme's decorative fringe spans are hidden. */
.cta-banner-fringe{display:none;}
.cta-banner{
  position:relative;
  /* full shorthand so the theme's background-repeat/position/size cannot leak through */
  background:
    linear-gradient(180deg, rgba(22,2,4,.32) 0%, rgba(22,2,4,.16) 45%, rgba(22,2,4,.40) 100%) 0 0/100% 100% no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22336%22%20height%3D%22112%22%3E%3Cfilter%20id%3D%22w%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.9%22%20numOctaves%3D%222%22%20seed%3D%227%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%201%200%200%200%200%200.92%200%200%200%200%200.9%200%200%200%200.26%200%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22d%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.7%22%20numOctaves%3D%222%22%20seed%3D%2231%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.28%200%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22336%22%20height%3D%22112%22%20fill%3D%22%234c040a%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2282%22%20height%3D%2254%22%20fill%3D%22%238e0c13%22%2F%3E%3Crect%20x%3D%2284%22%20y%3D%220%22%20width%3D%2282%22%20height%3D%2254%22%20fill%3D%22%237d080e%22%2F%3E%3Crect%20x%3D%22168%22%20y%3D%220%22%20width%3D%2282%22%20height%3D%2254%22%20fill%3D%22%23960f16%22%2F%3E%3Crect%20x%3D%22252%22%20y%3D%220%22%20width%3D%2282%22%20height%3D%2254%22%20fill%3D%22%23870a10%22%2F%3E%3Crect%20x%3D%2242%22%20y%3D%2256%22%20width%3D%2282%22%20height%3D%2254%22%20fill%3D%22%239d1119%22%2F%3E%3Crect%20x%3D%22126%22%20y%3D%2256%22%20width%3D%2282%22%20height%3D%2254%22%20fill%3D%22%238a0a11%22%2F%3E%3Crect%20x%3D%22210%22%20y%3D%2256%22%20width%3D%2282%22%20height%3D%2254%22%20fill%3D%22%237a070d%22%2F%3E%3Crect%20x%3D%22294%22%20y%3D%2256%22%20width%3D%2282%22%20height%3D%2254%22%20fill%3D%22%23910d14%22%2F%3E%3Crect%20x%3D%22-42%22%20y%3D%2256%22%20width%3D%2282%22%20height%3D%2254%22%20fill%3D%22%23910d14%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22336%22%20height%3D%223%22%20fill%3D%22%23000%22%20opacity%3D%220.15%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2256%22%20width%3D%22336%22%20height%3D%223%22%20fill%3D%22%23000%22%20opacity%3D%220.15%22%2F%3E%3Crect%20width%3D%22336%22%20height%3D%22112%22%20fill-opacity%3D%220%22%20filter%3D%22url%28%23d%29%22%2F%3E%3Crect%20width%3D%22336%22%20height%3D%22112%22%20fill-opacity%3D%220%22%20filter%3D%22url%28%23w%29%22%2F%3E%3C%2Fsvg%3E") 0 0/504px 168px repeat #6e060d;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -3px 10px rgba(0,0,0,.35);
}

/* 5. Remove the connector element drawn between process steps. */
.process-step+.process-step::before{content:none;display:none;}
/* multi-import:brand-layer:end */