/* multi-import:brand-layer:start - managed by Tools > Multi Import; edits inside are replaced on re-import */
/* Railing Experts Ottawa - brand overrides.css
   Only documented tokens (see build-client-zip skill references/style.md) are set.
   Palette is locked to exactly three brand hues per client instruction:
     Deep Navy #14324B · Forest Green #2E7D55 · Warm Gold #D9A441
   !important is added on the root palette/typography tokens as the client
   explicitly requested, as insurance against any legacy theme default (e.g. the
   base theme's stock blue #2563eb) surviving the cascade. */

/* 1. Self-hosted fonts - Manrope 700 for headings, Inter 400/500/600 for everything else */
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/manrope-bold.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/inter-regular.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/inter-medium.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/inter-semibold.woff2') format('woff2');
}

:root{
  /* --- Typography --- */
  --typography-family-heading:'Manrope', 'Segoe UI', Arial, sans-serif !important;
  --typography-family-main:'Inter', system-ui, -apple-system, sans-serif !important;
  --typography-family-paragraph:var(--typography-family-main) !important;
  --typography-weight-heading:700 !important;

  /* --- Brand hues (three colours only) --- */
  /* Primary hue = Warm Gold: drives buttons, links, key fills, CTAs */
  --color-sienna:#D9A441 !important;
  --color-sienna-deep:#B9862F !important; /* darker gold, hover state of the same hue */

  /* Tertiary/slate accent role = Forest Green: badges, checklists, small accents */
  --color-canadian-red:#2E7D55 !important;

  /* Direct semantic-role pins (belt-and-braces per style.md guidance) */
  --color-primary:#D9A441 !important;
  --color-on-primary:#14324B !important; /* navy text/icons read cleanly on gold fills */
  --color-secondary:#2E7D55 !important;
  --color-tertiary:#2E7D55 !important;
  --color-accent:#D9A441 !important;
  --color-accent-hover:#B9862F !important;
  --color-link-text:#14324B !important;
  --color-link-text-hover:#2E7D55 !important;

  /* Ink ramp: Deep Navy drives every heading; a softened (75%-opacity) navy
     keeps long paragraphs readable without introducing a fourth hue. */
  --color-ink:#14324B !important;
  --color-ink-soft:rgba(20,50,75,0.78) !important;
  --color-heading:#14324B !important;
  --color-main:#14324B !important;
  --color-paragraph:rgba(20,50,75,0.78) !important;

  /* Paper/surface ramp: neutral tints of navy, not a new hue, for cards/sections */
  --color-paper:#ffffff !important;
  --color-paper-tint:#F3F6F8 !important;
  --color-paper-deep:#E7ECEF !important;
  --color-rule:#D7DEE3 !important;
  --color-surface-container:#EEF2F4 !important;
  --color-tertiary-dark:#1F5A3E !important; /* deeper forest green */
  --color-tertiary-container:#E3EFE8 !important; /* pale green container tint */

  /* Navigation current-item / hamburger follow the primary gold automatically
     via --color-primary, but pin explicitly for safety. */
  --color-current:#D9A441;
  --color-current-dropdown:#D9A441;
  --hamburger-color:var(--color-primary);
}

/* Page background: pale navy-tinted white instead of the base theme's beige */
body{ background:#F7F9FA !important; }

/* Hero sections (photo backgrounds with a dark overlay) already set their own
   light heading colour locally per the base theme (style.md §7) - left
   untouched here on purpose, since --color-on-primary above is for text on
   *solid gold* fills (buttons), not on a dark photo overlay. The CTA banner
   is a separate case, styled explicitly below (full-width fence + gold panel,
   not a photo overlay), so it is no longer covered by this note. */

/* Kill the process-step connector line rendering as a stray artifact between cards */
.process-step + .process-step::before{ content:none !important; display:none !important; }

/* Cost calculator "Get an exact quote" button: flat brand green instead of the
   theme's default diagonal gradient (client asked to remove the gradient). */
.local-calculator-cta{ background:var(--color-tertiary) !important; }

/* Quote form "Next" step button: white text (theme default was rendering it
   in a low-contrast/dark tone against its own background - client asked for
   white). Covers the literal class plus close theme variants so it still
   applies if the live markup differs slightly from what was inspected. */
.quote-form-next,
.quote-form-next-button,
.quote-form .btn-next,
.quote-form button[class*="next" i],
.quote-form a[class*="next" i]{
  color:#ffffff !important;
}

/* =========================================
   FULL-WIDTH FENCE CTA
   CSS only - no images or extra HTML
   ========================================= */
.block-cta-banner {
  position: relative;
  isolation: isolate;
  left: 50%;
  right: 50%;
  width: 100vw;
  max-width: none;
  min-height: clamp(680px, 48vw, 820px);
  margin-left: -50vw;
  margin-right: -50vw;
  padding: clamp(96px, 8vw, 140px) clamp(18px, 4vw, 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
  background-color: #f5f1e8;
  background-image:
    linear-gradient(
      90deg,
      rgba(20, 50, 75, 0.04) 1px,
      transparent 1px
    ),
    linear-gradient(
      0deg,
      rgba(20, 50, 75, 0.035) 1px,
      transparent 1px
    );
  background-size: 48px 48px;
}
/* Full-width fence structure */
.block-cta-banner::before {
  position: absolute;
  z-index: 0;
  inset: 30px 0 0;
  width: 100%;
  height: calc(100% - 30px);
  content: "";
  pointer-events: none;
  background-image:
    /* Upper rail */
    linear-gradient(
      to bottom,
      transparent 0 24%,
      #244b67 24%,
      #0b2438 calc(24% + 18px),
      transparent calc(24% + 18px)
    ),
    /* Lower rail */
    linear-gradient(
      to bottom,
      transparent 0 72%,
      #244b67 72%,
      #0b2438 calc(72% + 18px),
      transparent calc(72% + 18px)
    ),
    /* Equal fence pickets */
    repeating-linear-gradient(
      90deg,
      transparent 0 34px,
      #0b2438 34px 39px,
      #28536f 39px 47px,
      #0b2438 47px 52px,
      transparent 52px 86px
    );
  filter: drop-shadow(4px 7px 7px rgba(11, 36, 56, 0.2));
}
/* Pointed arrowheads above every picket */
.block-cta-banner::after {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 32px;
  content: "";
  pointer-events: none;
  background-image: conic-gradient(
    from 158deg at 50% 0%,
    #14324d 0deg 44deg,
    transparent 44deg 360deg
  );
  background-position: 0 0;
  background-size: 86px 32px;
  background-repeat: repeat-x;
  filter: drop-shadow(3px 4px 3px rgba(11, 36, 56, 0.2));
}
/* Inner CTA panel */
.cta-banner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1320px;
  min-height: 490px;
  margin-inline: auto;
  padding: clamp(66px, 7vw, 96px) clamp(28px, 7vw, 96px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
  border: 8px solid #14324d;
  border-radius: 12px;
  background-color: #e0aa3e;
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.08) 0 1px,
      transparent 1px 18px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(20, 50, 77, 0.06) 0 1px,
      transparent 1px 25px
    ),
    linear-gradient(
      135deg,
      #edbd5a 0%,
      #e0aa3e 43%,
      #d69a2f 100%
    );
  box-shadow:
    inset 0 0 0 2px rgba(255, 253, 248, 0.48),
    inset 0 13px 26px rgba(255, 255, 255, 0.09),
    0 28px 46px rgba(11, 36, 56, 0.28);
}
/* CTA content */
.cta-banner-heading {
  max-width: 1100px;
  margin: 0 auto;
  color: #14324d;
  font-size: clamp(46px, 6vw, 78px);
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  text-wrap: balance;
}
.cta-banner-description {
  max-width: 820px;
  margin: 24px auto 0;
  color: #fffdf8;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.55;
  text-align: center;
  text-shadow: 0 2px 5px rgba(121, 78, 9, 0.24);
}
/* Buttons */
.cta-banner-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 34px;
}
.cta-banner-button {
  display: inline-flex;
  min-height: 58px;
  padding: 0 36px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 2px solid #14324d;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition:
    transform 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease;
}
.cta-banner-button-primary {
  background-color: #14324d;
  color: #edbd5a;
  box-shadow: 0 8px 16px rgba(11, 36, 56, 0.23);
}
.cta-banner-button-secondary {
  background-color: rgba(255, 255, 255, 0.08);
  color: #14324d;
}
.cta-banner-button:hover {
  transform: translateY(-2px);
}
.cta-banner-button-primary:hover {
  background-color: #0b2438;
  box-shadow: 0 11px 21px rgba(11, 36, 56, 0.28);
}
.cta-banner-button-secondary:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.cta-banner-button:focus-visible {
  outline: 3px solid #fffdf8;
  outline-offset: 4px;
}
/* Responsive layout */
@media (max-width: 768px) {
  .block-cta-banner {
    min-height: auto;
    padding: 70px 12px;
  }
  .block-cta-banner::before {
    background-image:
      linear-gradient(
        to bottom,
        transparent 0 24%,
        #244b67 24%,
        #0b2438 calc(24% + 14px),
        transparent calc(24% + 14px)
      ),
      linear-gradient(
        to bottom,
        transparent 0 72%,
        #244b67 72%,
        #0b2438 calc(72% + 14px),
        transparent calc(72% + 14px)
      ),
      repeating-linear-gradient(
        90deg,
        transparent 0 24px,
        #0b2438 24px 29px,
        #28536f 29px 35px,
        #0b2438 35px 40px,
        transparent 40px 64px
      );
  }
  .cta-banner {
    min-height: 520px;
    padding: 58px 24px;
    border-width: 6px;
    border-radius: 9px;
  }
  .cta-banner-buttons {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .cta-banner-button {
    width: 100%;
  }
}
/* multi-import:brand-layer:end */