:root {
  --ont-midnight: #152b32;
  --ont-ink: #24363c;
  --ont-sand: #ece8df;
  --ont-cream: #f7f4ee;
  --ont-rust: #bd512f;
  --ont-rust-dark: #953b22;
  --ont-line: rgba(36, 54, 60, .18);
}

html, body { overflow-x: hidden; }

.ontario-header-help {
  align-items: center;
  align-self: center;
  background: var(--ont-rust);
  color: #fff !important;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .07em;
  line-height: 1;
  margin-left: 8px;
  min-height: 44px;
  position: absolute;
  right: 94px;
  top: 13px;
  padding: 0 18px;
  text-decoration: none;
  text-transform: uppercase;
}

.ontario-header-help:hover,
.ontario-header-help:focus { background: var(--ont-rust-dark); color: #fff !important; }

.ontario-home { background: var(--ont-cream); color: var(--ont-ink); }
.ontario-home *, .ontario-contact-card * { box-sizing: border-box; }

.ontario-hero {
  background: var(--ont-midnight);
  color: #fff;
  display: grid;
  min-height: 700px;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
  padding-top: 82px;
}

.ontario-hero-copy {
  align-self: center;
  max-width: 820px;
  padding: clamp(70px, 8vw, 130px) clamp(28px, 7vw, 110px);
}

.ontario-kicker {
  color: #d6a18d;
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .16em;
  margin-bottom: 22px;
  text-transform: uppercase;
}

.ontario-hero h1 {
  color: #fff;
  font-size: clamp(48px, 5vw, 78px);
  letter-spacing: -.035em;
  line-height: 1.01;
  margin: 0 0 28px;
  max-width: 830px;
  text-transform: none;
}

.ontario-hero-copy > p {
  color: rgba(255,255,255,.84);
  font-size: clamp(18px, 1.55vw, 23px);
  line-height: 1.55;
  margin: 0 0 34px;
  max-width: 720px;
}

.ontario-actions, .ontario-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ontario-button {
  align-items: center;
  background: var(--ont-rust);
  border: 2px solid var(--ont-rust);
  color: #fff !important;
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  justify-content: center;
  letter-spacing: .06em;
  min-height: 52px;
  padding: 0 22px;
  text-decoration: none !important;
  text-transform: uppercase;
}

.ontario-button:hover, .ontario-button:focus { background: var(--ont-rust-dark); border-color: var(--ont-rust-dark); }
.ontario-button.ghost { background: transparent; border-color: rgba(255,255,255,.5); }
.ontario-button.ghost:hover, .ontario-button.ghost:focus { background: #fff; border-color: #fff; color: var(--ont-midnight) !important; }
.ontario-button.dark { background: var(--ont-midnight); border-color: var(--ont-midnight); }

.ontario-hero-panel {
  background: linear-gradient(180deg, rgba(21,43,50,.08), rgba(21,43,50,.68)), url('/ours/project-types/distribution-center-roofing-commercial-roofers-ontario-ca.webp') center/cover;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 700px;
  padding: 34px;
}

.ontario-hero-panel-inner {
  background: rgba(21,43,50,.93);
  border-left: 5px solid var(--ont-rust);
  max-width: 500px;
  padding: 28px;
}

.ontario-hero-panel strong { display: block; font-size: 25px; line-height: 1.15; margin-bottom: 11px; }
.ontario-hero-panel p { color: rgba(255,255,255,.8); line-height: 1.55; margin: 0; }

.ontario-needs {
  background: #fff;
  border-bottom: 1px solid var(--ont-line);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.ontario-needs a {
  border-right: 1px solid var(--ont-line);
  color: var(--ont-ink);
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 138px;
  padding: 28px;
  text-decoration: none;
}

.ontario-needs a:last-child { border-right: 0; }
.ontario-needs a:hover { background: var(--ont-sand); }
.ontario-needs strong { font-size: 18px; }
.ontario-needs span { color: #64767c; font-size: 14px; line-height: 1.45; }

.ontario-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 640px;
}

.ontario-story.reverse .ontario-story-image { order: 2; }
.ontario-story.reverse .ontario-story-copy { order: 1; }
.ontario-story-image { min-height: 540px; }
.ontario-story-image img { display: block; height: 100%; object-fit: cover; width: 100%; }
.ontario-story-copy { align-self: center; padding: clamp(55px, 8vw, 120px); }
.ontario-story-copy h2, .ontario-section-head h2, .ontario-form-copy h2 {
  color: var(--ont-midnight);
  font-size: clamp(38px, 4vw, 62px);
  letter-spacing: -.03em;
  line-height: 1.04;
  margin: 0 0 24px;
  text-transform: none;
}
.ontario-story-copy p, .ontario-section-head p, .ontario-form-copy p { font-size: 18px; line-height: 1.7; margin: 0 0 22px; }
.ontario-proof { border-left: 4px solid var(--ont-rust); color: var(--ont-midnight); font-weight: 700; margin: 28px 0 !important; padding-left: 18px; }

.ontario-decision { background: var(--ont-sand); padding: clamp(70px, 8vw, 120px) 24px; }
.ontario-section-head { margin: 0 auto 45px; max-width: 1040px; text-align: center; }
.ontario-section-head p { margin-left: auto; margin-right: auto; max-width: 760px; }
.ontario-decision-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); margin: 0 auto; max-width: 1220px; }
.ontario-decision-card { background: #fff; border-top: 5px solid var(--ont-rust); min-height: 320px; padding: 35px; }
.ontario-decision-card h3 { color: var(--ont-midnight); font-size: 29px; margin: 0 0 14px; }
.ontario-decision-card p { line-height: 1.65; margin: 0 0 20px; }
.ontario-decision-card a { color: var(--ont-rust-dark); font-weight: 800; }

.ontario-market { background: var(--ont-midnight); color: #fff; padding: clamp(75px, 9vw, 130px) 24px; }
.ontario-market .ontario-section-head h2 { color: #fff; }
.ontario-market .ontario-section-head p { color: rgba(255,255,255,.76); }
.ontario-market-grid { display: grid; gap: 1px; grid-template-columns: repeat(4, 1fr); margin: 0 auto; max-width: 1240px; background: rgba(255,255,255,.2); }
.ontario-market-card { background: var(--ont-midnight); min-height: 240px; padding: 30px; }
.ontario-market-card h3 { color: #fff; font-size: 22px; margin: 0 0 13px; }
.ontario-market-card p { color: rgba(255,255,255,.7); line-height: 1.6; margin: 0; }

.ontario-process { background: #fff; padding: clamp(70px, 8vw, 115px) 24px; }
.ontario-process-grid { display: grid; gap: 34px; grid-template-columns: repeat(4, 1fr); margin: 0 auto; max-width: 1220px; }
.ontario-process-step { border-top: 2px solid var(--ont-rust); padding-top: 22px; }
.ontario-process-step h3 { color: var(--ont-midnight); font-size: 21px; margin: 0 0 11px; }
.ontario-process-step p { line-height: 1.6; margin: 0; }

.ontario-faq { background: var(--ont-cream); padding: clamp(70px, 8vw, 115px) 24px; }
.ontario-faq-list { display: grid; gap: 12px; margin: 0 auto; max-width: 960px; }
.ontario-faq details { background: #fff; border: 1px solid var(--ont-line); padding: 0 24px; }
.ontario-faq summary { color: var(--ont-midnight); cursor: pointer; font-size: 19px; font-weight: 800; padding: 22px 34px 22px 0; position: relative; }
.ontario-faq summary::after { color: var(--ont-rust); content: '+'; font-size: 27px; position: absolute; right: 0; top: 15px; }
.ontario-faq details[open] summary::after { content: '−'; }
.ontario-faq details p { line-height: 1.7; margin: 0; padding: 0 0 24px; }

.ontario-lead { background: var(--ont-rust); color: #fff; display: grid; grid-template-columns: .85fr 1.15fr; }
.ontario-form-copy { align-self: center; padding: clamp(55px, 7vw, 105px); }
.ontario-form-copy h2 { color: #fff; }
.ontario-form-copy p { color: rgba(255,255,255,.85); }
.ontario-form-copy a { color: #fff; font-weight: 800; }
.ontario-contact-card { background: #fff; color: var(--ont-ink); margin: clamp(28px, 5vw, 70px); padding: clamp(28px, 4vw, 52px); }
.ontario-contact-card form { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; margin: 0; max-width: none; }
.ontario-contact-card label { color: var(--ont-midnight); display: grid; font-size: 13px; font-weight: 800; gap: 7px; letter-spacing: .04em; text-transform: uppercase; }
.ontario-contact-card label.full, .ontario-contact-card button, .ontario-contact-card .ontario-form-status { grid-column: 1 / -1; }
.ontario-contact-card input, .ontario-contact-card select, .ontario-contact-card textarea {
  background: #f7f5f0; border: 1px solid #d8d5ce; border-radius: 0; color: var(--ont-ink); font: inherit; min-height: 52px; padding: 13px 14px; width: 100%;
}
.ontario-contact-card textarea { min-height: 130px; resize: vertical; }
.ontario-contact-card button { background: var(--ont-midnight); border: 0; color: #fff; cursor: pointer; font-weight: 800; min-height: 54px; padding: 0 22px; text-transform: uppercase; }
.ontario-contact-card button:disabled { cursor: wait; opacity: .7; }
.ontario-form-status { font-weight: 700; margin: 0; }
.ontario-form-status[data-state="success"] { color: #1f6b41; }
.ontario-form-status[data-state="error"] { color: #a12620; }

.ontario-sticky-help { display: none; }

#site-footer .rr-footer-brand-logo { display: block !important; height: auto !important; max-width: 260px !important; opacity: 1 !important; visibility: visible !important; }

@media (max-width: 1180px) {
  #site-header .section-title:nth-of-type(4), #site-header .section-title:nth-of-type(5) { display: none; }
  .ontario-needs { grid-template-columns: repeat(3, 1fr); }
  .ontario-market-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  html body menu#main-menu[data-rr-mobile] {
    background: var(--ont-midnight) !important;
    bottom: 0 !important;
    display: block !important;
    height: 100dvh !important;
    left: auto !important;
    max-width: min(86vw, 340px) !important;
    overflow-y: auto !important;
    padding: 72px 26px 28px !important;
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    width: min(86vw, 340px) !important;
    z-index: 1202 !important;
  }
  html body menu#main-menu[data-rr-mobile] .rr-x {
    color: #fff !important;
    left: auto !important;
    position: absolute !important;
    right: 14px !important;
    top: 14px !important;
  }
  html body.rr-nav-open .rr-scrim { z-index: 1201 !important; }
  .ontario-header-help { display: none; }
  .ontario-hero { grid-template-columns: 1fr; min-height: 0; padding-top: 72px; }
  .ontario-hero-copy { padding: 64px 24px 52px; }
  .ontario-hero h1 { font-size: clamp(43px, 11vw, 62px); }
  .ontario-hero-panel { min-height: 430px; }
  .ontario-needs { grid-template-columns: 1fr 1fr; }
  .ontario-story, .ontario-lead { grid-template-columns: 1fr; }
  .ontario-story.reverse .ontario-story-image, .ontario-story.reverse .ontario-story-copy { order: initial; }
  .ontario-story-copy { padding: 60px 26px; }
  .ontario-story-image { min-height: 390px; }
  .ontario-decision-grid, .ontario-process-grid { grid-template-columns: 1fr 1fr; }
  .ontario-sticky-help { align-items: center; background: var(--ont-rust); bottom: 18px; box-shadow: 0 12px 28px rgba(0,0,0,.28); color: #fff !important; display: flex; font-size: 13px; font-weight: 800; justify-content: center; min-height: 52px; padding: 0 20px; position: fixed; right: 18px; text-decoration: none; text-transform: uppercase; z-index: 1100; }
}

@media (max-width: 620px) {
  .ontario-actions, .ontario-inline-actions { align-items: stretch; flex-direction: column; }
  .ontario-button { width: 100%; }
  .ontario-hero-panel { min-height: 390px; padding: 18px; }
  .ontario-hero-panel-inner { padding: 22px; }
  .ontario-needs { grid-template-columns: 1fr; }
  .ontario-needs a { border-bottom: 1px solid var(--ont-line); border-right: 0; min-height: 0; padding: 22px 24px; }
  .ontario-story-image { min-height: 300px; }
  .ontario-decision-grid, .ontario-market-grid, .ontario-process-grid { grid-template-columns: 1fr; }
  .ontario-contact-card { margin: 0 18px 55px; padding: 25px 20px; }
  .ontario-contact-card form { grid-template-columns: 1fr; }
  .ontario-contact-card label.full, .ontario-contact-card button, .ontario-contact-card .ontario-form-status { grid-column: auto; }
}