/* =============================================================
   CNTC DESIGN SYSTEM -- Marketing 360 Global CSS  (CONSOLIDATED)
   chicagoroofingschool.com
   Last Updated: Sep 15, 2026
   Replace the ENTIRE contents of Developer Tools -> CSS with this file.
   Contents, in order:
     1. Original global CSS (design tokens, buttons, nav, forms) unchanged
     2. Mobile header fix (one-row header, no gutters, slim bars, menu)
     3. Hamburger patch (single centered icon)
     4. Desktop full-bleed (no 53px side frame)
   Every @media block below is closed on its own line. Do not paste
   anything inside a block; add new rules at the very end.
   ============================================================= */

/* =============================================================
   CNTC DESIGN SYSTEM -- Marketing 360 Global CSS
   Contractors Network & Training Center
   chicagoroofingschool.com
   Last Updated: May 5, 2026
   Changes: Added button color overrides to fix washed-out
            text caused by Marketing 360 platform link styles;
            Added background fill to cntc-btn-outline (CNTC blue)
   ============================================================= */

/* -- DESIGN TOKENS -- */
:root {
  --cntc-blue: #022DC1;
  --cntc-blue-dark: #011a75;
  --cntc-blue-mid: #1a47d4;
  --cntc-blue-light: #E8EDF9;
  --cntc-green: #06C633;
  --cntc-green-dark: #036B1A;
  --cntc-green-light: #E6F8EB;
  --cntc-dark: #0D1220;
  --cntc-gray: #6B7280;
  --cntc-off-white: #F5F6FA;
  --cntc-border: #E2E6F0;
  --cntc-radius: 10px;
  --cntc-radius-lg: 16px;
  --cntc-radius-xl: 24px;
  --cntc-shadow: 0 8px 28px rgba(2,45,193,.10);
}

/* -- BLOCK RESETS -- */
.cntc-block * { box-sizing: border-box; margin: 0; padding: 0; }
.cntc-block { font-family: 'DM Sans', sans-serif; color: var(--cntc-dark); line-height: 1.6; }
.cntc-block a { text-decoration: none; }

/* -- TYPOGRAPHY -- */
.cntc-block h1,
.cntc-block h2,
.cntc-block h3,
.cntc-block .cntc-display {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -.01em;
}

/* -- BUTTONS -- */
.cntc-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 24px; border-radius: var(--cntc-radius);
  font-family: 'DM Sans', sans-serif; font-weight: 700;
  font-size: .9rem; cursor: pointer; border: none;
  text-decoration: none; transition: transform .15s, box-shadow .15s;
  white-space: nowrap;
}
.cntc-btn:hover { transform: translateY(-2px); }

.cntc-btn-green {
  background: var(--cntc-green);
  box-shadow: 0 4px 14px rgba(6,198,51,.3);
}
.cntc-btn-green:hover { box-shadow: 0 6px 20px rgba(6,198,51,.45); }

.cntc-btn-blue {
  background: var(--cntc-blue);
  box-shadow: 0 4px 14px rgba(2,45,193,.25);
}
.cntc-btn-blue:hover { box-shadow: 0 6px 20px rgba(2,45,193,.4); }

.cntc-btn-outline {
  background: var(--cntc-blue);
  border: 2px solid var(--cntc-blue);
}
.cntc-btn-outline:hover { background: var(--cntc-blue-dark); }

.cntc-btn-white {
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}

.cntc-btn-ghost {
  background: #0a1a4a;
  border: 1px solid rgba(255,255,255,.2);
}
.cntc-btn-ghost:hover { background: #112266; }

.cntc-btn-lg { padding: 14px 32px; font-size: 1rem; border-radius: 11px; }

/* -- BUTTON COLOR OVERRIDES --
   Marketing 360 applies global a { color } styles that override
   button text. These pseudo-class rules force correct colors
   on every button state, site-wide, without touching page files. */
.cntc-btn-green,
.cntc-btn-green:link,
.cntc-btn-green:visited,
.cntc-btn-green:hover,
.cntc-btn-green:active { color: #ffffff !important; }

.cntc-btn-blue,
.cntc-btn-blue:link,
.cntc-btn-blue:visited,
.cntc-btn-blue:hover,
.cntc-btn-blue:active { color: #ffffff !important; }

.cntc-btn-white,
.cntc-btn-white:link,
.cntc-btn-white:visited,
.cntc-btn-white:hover,
.cntc-btn-white:active { color: #022DC1 !important; }

.cntc-btn-outline,
.cntc-btn-outline:link,
.cntc-btn-outline:visited,
.cntc-btn-outline:hover,
.cntc-btn-outline:active { color: #ffffff !important; }

.cntc-btn-ghost,
.cntc-btn-ghost:link,
.cntc-btn-ghost:visited,
.cntc-btn-ghost:hover,
.cntc-btn-ghost:active { color: #ffffff !important; }

.cntc-aside-cta .a-green,
.cntc-aside-cta .a-green:link,
.cntc-aside-cta .a-green:visited,
.cntc-aside-cta .a-green:hover,
.cntc-aside-cta .a-green:active { color: #ffffff !important; }

.cntc-aside-cta .a-ghost,
.cntc-aside-cta .a-ghost:link,
.cntc-aside-cta .a-ghost:visited,
.cntc-aside-cta .a-ghost:hover,
.cntc-aside-cta .a-ghost:active { color: #ffffff !important; }

.cntc-sidebar-cta a,
.cntc-sidebar-cta a:link,
.cntc-sidebar-cta a:visited,
.cntc-sidebar-cta a:hover,
.cntc-sidebar-cta a:active { color: #ffffff !important; }

/* -- HERO SECTIONS -- */
.cntc-hero {
  position: relative; overflow: hidden;
  padding: 80px 48px 72px;
}
.cntc-hero-blue { background: var(--cntc-blue); }
.cntc-hero-green { background: linear-gradient(145deg, var(--cntc-green-dark) 0%, #027a1a 100%); }
.cntc-hero-orange { background: linear-gradient(145deg, #6b2a00 0%, #c96000 100%); }
.cntc-hero-teal { background: linear-gradient(145deg, #004f66 0%, #0095b6 100%); }
.cntc-hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 52px 52px;
  pointer-events: none;
}
.cntc-hero-glow {
  position: absolute; border-radius: 50%; pointer-events: none;
}
.cntc-hero-inner {
  position: relative; max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 380px; gap: 56px; align-items: start;
}
.cntc-hero-inner-center {
  position: relative; max-width: 760px; margin: 0 auto; text-align: center;
}
.cntc-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(6,198,51,.12); border: 1px solid rgba(6,198,51,.3);
  color: var(--cntc-green); padding: 5px 14px; border-radius: 99px;
  font-size: .75rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; margin-bottom: 16px;
}
.cntc-eyebrow::before {
  display: none;
}
.cntc-hero h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(2.4rem, 4vw, 3.8rem); font-weight: 900;
  color: #fff; line-height: 1.04; margin-bottom: 16px;
}
.cntc-hero h1 em { font-style: normal; color: var(--cntc-green); }
.cntc-hero-sub {
  color: rgba(255,255,255,.75); font-size: 1rem; line-height: 1.75;
  margin-bottom: 28px; max-width: 520px;
}
.cntc-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cntc-hero-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.cntc-pill {
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.8); padding: 5px 13px; border-radius: 99px;
  font-size: .78rem; font-weight: 500;
}
.cntc-pill-urgent {
  background: rgba(255,100,100,.15); border-color: rgba(255,100,100,.3);
  color: #ffaaaa;
}

/* -- ASIDE / SCHEDULE CARD -- */
.cntc-aside-card {
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(12px); border-radius: var(--cntc-radius-xl); padding: 28px;
}
.cntc-aside-title {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 1.05rem; color: #fff; text-transform: uppercase;
  letter-spacing: .07em; margin-bottom: 18px;
  display: flex; align-items: center; gap: 8px;
}
.cntc-aside-title::before {
  content: ''; display: inline-block; width: 8px; height: 8px;
  background: var(--cntc-green); border-radius: 50%;
  box-shadow: 0 0 6px var(--cntc-green);
}
.cntc-aside-row {
  border-bottom: 1px solid rgba(255,255,255,.09);
  padding: 11px 0; display: flex; justify-content: space-between; align-items: center;
}
.cntc-aside-row:last-of-type { border-bottom: none; }
.cntc-aside-label { font-size: .82rem; color: rgba(255,255,255,.5); font-weight: 500; }
.cntc-aside-val { font-size: .88rem; font-weight: 700; color: #fff; text-align: right; }
.cntc-aside-cta { margin-top: 18px; display: flex; flex-direction: column; gap: 9px; }
.cntc-aside-cta a {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px; border-radius: var(--cntc-radius); font-weight: 700;
  font-size: .875rem; text-decoration: none; text-align: center;
}
.cntc-aside-cta .a-green { background: var(--cntc-green); }
.cntc-aside-cta .a-ghost { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.2); }

/* -- ACCENT BAR -- */
.cntc-accent-bar {
  height: 4px;
  background: linear-gradient(90deg, var(--cntc-blue) 0%, var(--cntc-green) 100%);
}

/* -- CONTENT SECTIONS -- */
.cntc-section { padding: 72px 48px; }
.cntc-section-inner { max-width: 1100px; margin: 0 auto; }
.cntc-section-white { background: #fff; }
.cntc-section-off { background: var(--cntc-off-white); }
.cntc-section-blue { background: var(--cntc-blue); }
.cntc-section-eyebrow {
  font-size: .72rem; font-weight: 700; color: var(--cntc-green-dark);
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px;
}
.cntc-section-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 900;
  color: var(--cntc-blue); line-height: 1.1;
}
.cntc-section-sub {
  color: var(--cntc-gray); font-size: .95rem; margin-top: 10px; line-height: 1.75;
}

/* -- TWO-COL LAYOUT -- */
.cntc-two-col { display: grid; grid-template-columns: 2fr 1fr; gap: 48px; align-items: start; }
.cntc-two-col-even { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }

/* -- CONTENT CARDS -- */
.cntc-card {
  background: var(--cntc-off-white); border-radius: var(--cntc-radius-lg);
  padding: 30px; margin-bottom: 22px; border: 1px solid var(--cntc-border);
}
.cntc-card:last-child { margin-bottom: 0; }
.cntc-card-title {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 1.2rem; color: var(--cntc-blue); text-transform: uppercase;
  letter-spacing: .04em; margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.cntc-card-icon {
  width: 36px; height: 36px; background: var(--cntc-blue-light);
  border-radius: 9px; display: flex; align-items: center;
  justify-content: center; font-size: 1rem; flex-shrink: 0;
}
.cntc-card-body { font-size: .9rem; color: var(--cntc-gray); line-height: 1.75; }
.cntc-card-body p { margin-bottom: 12px; }
.cntc-card-body p:last-child { margin-bottom: 0; }
.cntc-card-body strong { color: var(--cntc-dark); }
.cntc-card-body ul { padding-left: 0; list-style: none; }
.cntc-card-body ul li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: .875rem; color: var(--cntc-dark); margin-bottom: 9px;
}
.cntc-card-body ul li::before { content: '\276F'; font-size: .9rem; flex-shrink: 0; }

/* -- CALLOUT BOXES -- */
.cntc-callout {
  border-left: 4px solid; border-radius: 0 var(--cntc-radius) var(--cntc-radius) 0;
  padding: 15px 18px; font-size: .875rem; line-height: 1.65; margin-top: 16px;
}
.cntc-callout-blue { background: var(--cntc-blue-light); border-left-color: var(--cntc-blue); color: var(--cntc-dark); }
.cntc-callout-blue strong { color: var(--cntc-blue); }
.cntc-callout-green { background: var(--cntc-green-light); border-left-color: var(--cntc-green-dark); color: var(--cntc-dark); }
.cntc-callout-green strong { color: var(--cntc-green-dark); }
.cntc-callout-red { background: #fdf0f0; border-left-color: #c0000a; color: var(--cntc-dark); }
.cntc-callout-red strong { color: #c0000a; }
.cntc-callout-orange { background: #FFF3E0; border-left-color: #c96000; color: var(--cntc-dark); }
.cntc-callout-orange strong { color: #c96000; }

/* -- FAQ ACCORDION -- */
.cntc-faq { display: flex; flex-direction: column; gap: 10px; }
.cntc-faq-item {
  border: 1px solid var(--cntc-border); border-radius: var(--cntc-radius);
  overflow: hidden; background: #fff;
}
.cntc-faq-q {
  padding: 16px 20px; font-weight: 700; color: var(--cntc-blue);
  cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  font-size: .9rem; user-select: none;
}
.cntc-faq-q:hover { background: var(--cntc-off-white); }
.cntc-faq-q::after { content: '+'; font-size: 1.2rem; font-weight: 300; color: var(--cntc-gray); }
.cntc-faq-item.open .cntc-faq-q::after { content: '-'; }
.cntc-faq-a {
  max-height: 0; overflow: hidden; transition: max-height .3s ease;
  font-size: .875rem; color: var(--cntc-gray); line-height: 1.7;
}
.cntc-faq-item.open .cntc-faq-a { max-height: 400px; }
.cntc-faq-a-inner { padding: 0 20px 16px; }

/* -- STEPS -- */
.cntc-steps { display: flex; flex-direction: column; gap: 18px; }
.cntc-step { display: flex; gap: 16px; align-items: flex-start; }
.cntc-step-num {
  width: 38px; height: 38px; background: var(--cntc-blue); color: #fff;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 900;
  font-size: 1.1rem; flex-shrink: 0;
}
.cntc-step-title { font-weight: 700; color: var(--cntc-blue); margin-bottom: 4px; font-size: .9rem; }
.cntc-step-body { font-size: .875rem; color: var(--cntc-gray); line-height: 1.65; }

/* -- DEADLINE BOXES -- */
.cntc-deadline-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cntc-deadline-box {
  border-radius: var(--cntc-radius-lg); padding: 24px; text-align: center;
}
.cntc-deadline-blue { background: var(--cntc-blue-light); border: 2px solid var(--cntc-blue); }
.cntc-deadline-red { background: #fdf0f0; border: 2px solid rgba(192,0,10,.3); }
.cntc-deadline-days {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 3rem; font-weight: 900; line-height: 1;
  white-space: nowrap;
}
.cntc-deadline-blue .cntc-deadline-days { color: var(--cntc-blue); }
.cntc-deadline-red .cntc-deadline-days { color: #c0000a; }
.cntc-deadline-type { font-weight: 700; font-size: .9rem; margin: 8px 0 4px; }
.cntc-deadline-desc { font-size: .78rem; color: var(--cntc-gray); line-height: 1.5; }

/* -- SIDEBAR -- */
.cntc-sidebar { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 90px; }
.cntc-sidebar-card {
  background: var(--cntc-off-white); border: 1px solid var(--cntc-border);
  border-radius: var(--cntc-radius-lg); padding: 24px;
}
.cntc-sidebar-card-blue { background: var(--cntc-blue); border-color: var(--cntc-blue); }
.cntc-sidebar-card-red { background: #fdf0f0; border-color: rgba(192,0,10,.2); }
.cntc-sidebar-title {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 1rem; color: var(--cntc-blue); text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 14px;
}
.cntc-sidebar-card-blue .cntc-sidebar-title { color: #fff; }
.cntc-sidebar-card-red .cntc-sidebar-title { color: #c0000a; }
.cntc-sidebar-row {
  display: flex; justify-content: space-between; font-size: .84rem;
  padding: 9px 0; border-bottom: 1px solid var(--cntc-border);
}
.cntc-sidebar-row:last-of-type { border-bottom: none; }
.cntc-sidebar-key { color: var(--cntc-gray); font-weight: 500; }
.cntc-sidebar-val { font-weight: 700; color: var(--cntc-dark); }
.cntc-sidebar-cta { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.cntc-sidebar-cta a {
  display: flex; align-items: center; justify-content: center;
  padding: 12px; border-radius: var(--cntc-radius); font-weight: 700;
  font-size: .875rem; text-decoration: none; width: 100%;
}

/* -- VALUE GRID -- */
.cntc-value-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cntc-value-box {
  background: #fff; border: 1px solid var(--cntc-border);
  border-radius: var(--cntc-radius-lg); padding: 20px;
}
.cntc-value-icon { font-size: 1.5rem; margin-bottom: 10px; }
.cntc-value-title { font-weight: 700; color: var(--cntc-blue); font-size: .875rem; margin-bottom: 5px; }
.cntc-value-body { font-size: .82rem; color: var(--cntc-gray); line-height: 1.6; }

/* -- CURRICULUM LIST -- */
.cntc-curriculum { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.cntc-curriculum li {
  display: flex; align-items: center; gap: 9px;
  font-size: .875rem; color: var(--cntc-dark); list-style: none;
}
.cntc-curriculum li::before { content: '\1F4CC'; font-size: .85rem; }

/* -- TESTIMONIALS -- */
.cntc-tgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.cntc-tcard {
  background: var(--cntc-off-white); border: 1px solid var(--cntc-border);
  border-radius: var(--cntc-radius-lg); padding: 24px;
}
.cntc-tcard-dark {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.11);
}
.cntc-tcard-stars { color: #FFD600; font-size: 1rem; margin-bottom: 12px; letter-spacing: 2px; }
.cntc-tcard-text {
  font-size: .875rem; color: var(--cntc-gray); line-height: 1.72;
  font-style: italic; margin-bottom: 14px;
}
.cntc-tcard-dark .cntc-tcard-text { color: rgba(255,255,255,.75); }
.cntc-tcard-author { font-weight: 700; color: var(--cntc-blue); font-size: .85rem; }
.cntc-tcard-dark .cntc-tcard-author { color: #fff; }
.cntc-tcard-course { font-size: .75rem; color: var(--cntc-green-dark); margin-top: 3px; font-weight: 600; }
.cntc-tcard-dark .cntc-tcard-course { color: var(--cntc-green); }

/* -- CTA BAND -- */
.cntc-cta-band { padding: 72px 48px; text-align: center; }
.cntc-cta-band-green { background: linear-gradient(135deg, var(--cntc-green-dark) 0%, var(--cntc-green) 100%); }
.cntc-cta-band-blue { background: linear-gradient(135deg, var(--cntc-blue) 0%, var(--cntc-blue-mid) 100%); }
.cntc-cta-band-orange { background: linear-gradient(135deg, #6b2a00 0%, #c96000 100%); }
.cntc-cta-band-teal { background: linear-gradient(135deg, #004f66 0%, #0095b6 100%); }
.cntc-cta-inner { max-width: 700px; margin: 0 auto; }
.cntc-cta-band h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; color: #fff; margin-bottom: 12px;
}
.cntc-cta-band p { color: rgba(255,255,255,.82); font-size: 1rem; margin-bottom: 30px; }
.cntc-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* -- STAT BOXES -- */
.cntc-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.cntc-stat-box {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--cntc-radius); padding: 18px; text-align: center;
}
.cntc-stat-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 2rem; font-weight: 900; color: var(--cntc-green);
}
.cntc-stat-label {
  font-size: .72rem; color: rgba(255,255,255,.45);
  text-transform: uppercase; letter-spacing: .04em; margin-top: 4px;
}

/* -- DARK FEATURE CARD -- */
.cntc-dark-card {
  background: linear-gradient(135deg, var(--cntc-blue) 0%, var(--cntc-blue-dark) 100%);
  border-radius: var(--cntc-radius-lg); padding: 28px; color: #fff;
}
.cntc-dark-card-badge {
  display: inline-block; background: var(--cntc-green); color: #fff;
  font-size: .7rem; font-weight: 700; padding: 3px 10px; border-radius: 99px;
  margin-bottom: 12px; letter-spacing: .06em; text-transform: uppercase;
}
.cntc-dark-card h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.5rem; font-weight: 900; margin-bottom: 10px; color: #fff;
}
.cntc-dark-card p { font-size: .875rem; color: rgba(255,255,255,.72); line-height: 1.65; margin-bottom: 16px; }

/* -- TAGS -- */
.cntc-tag {
  display: inline-block; padding: 3px 10px; border-radius: 99px;
  font-size: .72rem; font-weight: 700;
}
.cntc-tag-roofing { background: var(--cntc-blue-light); color: var(--cntc-blue); }
.cntc-tag-pa { background: var(--cntc-green-light); color: var(--cntc-green-dark); }
.cntc-tag-masonry { background: #FFF3E0; color: #7a4900; }
.cntc-tag-xact { background: #E3F2FD; color: #0055a0; }
.cntc-tag-limited { background: rgba(255,180,0,.18); color: #a07000; }

/* -- MISC -- */
.cntc-block-faq-init { display: none; }

/* -- MARKETING 360 NAV OVERRIDES --
   Makes the M360 nav sticky, clean, and on-brand.
   These target M360's native nav classes. ----------------------------------------- */

/* Sticky frosted nav */
header, .site-header, [class*="header"], [class*="Header"] {
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
  background: rgba(255,255,255,.97) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 1px 0 #E2E6F0, 0 4px 16px rgba(2,45,193,.06) !important;
}

/* Nav link styling */
nav a, .nav-link, [class*="nav"] a {
  font-family: 'DM Sans', sans-serif !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  color: #0D1220 !important;
  text-decoration: none !important;
  transition: color .15s !important;
}
nav a:hover, .nav-link:hover, [class*="nav"] a:hover {
  color: #022DC1 !important;
}

/* -- PAGE BACKGROUND + MOBILE HERO FIX --
   Forces white page background and removes green bleed
   around hero sections on mobile. ----------------------------------------- */
body, html,
[class*="page"], [class*="Page"],
[class*="site"], [class*="Site"],
main, .main {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* Remove margin/padding causing hero to not fill full width on mobile */
@media (max-width: 768px) {
  .cntc-hero {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .cntc-hero-inner-center { padding: 0 4px; }
  /* Keep 16px breathing room on sides for content sections */
  .cntc-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .cntc-cta-band {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* -- PAGE TOP GAP FIX --
   Removes whitespace between nav and first HTML block content.
   M360 adds margin/padding to its block containers. ----------------------------------------- */
.page-content > *:first-child,
.page-content-wrapper > *:first-child,
[class*="pageContent"] > *:first-child,
[class*="PageContent"] > *:first-child,
[class*="block"]:first-child,
[class*="Block"]:first-child,
main > *:first-child,
main > section:first-child,
.site-content > *:first-child,
[class*="siteContent"] > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Also zero out any wrapper divs M360 adds above HTML blocks */
[class*="html-block"]:first-child,
[class*="htmlBlock"]:first-child,
[class*="content-block"]:first-child,
[class*="contentBlock"]:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* -- LOGO BOX FIX --
   Removes any background, border, padding or box-shadow
   from the logo container in the nav. ----------------------------------------- */
nav img, header img,
[class*="logo"] img, [class*="Logo"] img,
[class*="logo"], [class*="Logo"],
[class*="brand"], [class*="Brand"],
[class*="logo-wrap"], [class*="logoWrap"],
[class*="logo-container"], [class*="logoContainer"],
[class*="site-logo"], [class*="siteLogo"],
[class*="header-logo"], [class*="headerLogo"] {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Target any div/span wrapping the logo image */
header a img,
header > * img,
[class*="header"] a img {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Remove background from logo link wrapper */
header a[href="/"],
header a[href="https://www.chicagoroofingschool.com"],
header a[href="https://chicagoroofingschool.com"] {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* -- DROPDOWN MENU -- Desktop only
   CNTC Blue background + white text on submenus only.
   Scoped to min-width:769px so mobile menu is not affected. ----------------------------------------- */
@media (min-width: 769px) {
  nav ul ul,
  nav ol ol,
  .dropdown-menu,
  [class*="sub-menu"],
  [class*="submenu"],
  [class*="SubMenu"],
  [class*="subMenu"] {
    background: #022DC1 !important;
    background-color: #022DC1 !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(2,45,193,.3) !important;
    padding: 6px !important;
  }

  nav ul ul a,
  nav ul ul a:link,
  nav ul ul a:visited,
  nav ul ul a:hover,
  nav ul ul a:active,
  nav ol ol a,
  nav ol ol a:link,
  nav ol ol a:visited,
  .dropdown-menu a,
  .dropdown-menu a:link,
  .dropdown-menu a:visited,
  [class*="sub-menu"] a,
  [class*="sub-menu"] a:link,
  [class*="sub-menu"] a:visited,
  [class*="submenu"] a,
  [class*="submenu"] a:link,
  [class*="submenu"] a:visited,
  [class*="SubMenu"] a,
  [class*="subMenu"] a {
    color: #ffffff !important;
    font-size: .875rem !important;
    font-weight: 500 !important;
    padding: 9px 14px !important;
    border-radius: 6px !important;
    display: block !important;
  }

  nav ul ul a:hover,
  nav ol ol a:hover,
  .dropdown-menu a:hover,
  [class*="sub-menu"] a:hover,
  [class*="submenu"] a:hover,
  nav ul ul li:hover,
  nav ul ul li.active,
  nav ul ul a.active,
  [class*="sub-menu"] li:hover,
  [class*="submenu"] li:hover {
    background: #06C633 !important;
    background-color: #06C633 !important;
    color: #ffffff !important;
  }

  /* Remove any platform blue highlight on dropdown items */
  nav ul ul li,
  [class*="sub-menu"] li,
  [class*="submenu"] li,
  nav ul ul a,
  [class*="sub-menu"] a {
    background-color: transparent !important;
  }
  nav ul ul li:hover > a,
  [class*="sub-menu"] li:hover > a {
    background: #06C633 !important;
    color: #ffffff !important;
  }
}

/* -- NAV BUTTON TEXT COLOR FIX --
   Forces white text on Marketing 360's native green nav buttons
   regardless of platform link color overrides. ----------------------------------------- */
a[href*="tel"],
a[href*="contact"],
.btn-primary,
[class*="btn"][style*="background"],
[class*="button"][style*="background"],
nav a[style*="background"],
header a[style*="background:#06C633"],
header a[style*="background: #06C633"],
header a[style*="background:var(--green)"],
header a[style*="background:#022DC1"],
header a[style*="background: #022DC1"] {
  color: #ffffff !important;
}

/* -- MOBILE NAV MENU FIX --
   Green background + white text for the mobile hamburger menu ---- */
@media (max-width: 768px) {
  /* Mobile menu overlay/panel -- CNTC green background */
  [class*="mobile-menu"], [class*="mobileMenu"],
  [class*="mobile-nav"], [class*="mobileNav"],
  [class*="nav-mobile"], [class*="navMobile"],
  [class*="menu-overlay"], [class*="menuOverlay"],
  [class*="nav-overlay"], [class*="navOverlay"],
  [class*="hamburger-menu"], [class*="hamburgerMenu"],
  [class*="slide-menu"], [class*="slideMenu"],
  [class*="drawer"], [class*="Drawer"],
  nav[class*="open"], nav[class*="active"],
  .mobile-open nav, .nav-open nav,
  header nav ul, header nav ol,
  nav > ul, nav > ol {
    background: #06C633 !important;
    background-color: #06C633 !important;
  }

  /* All mobile nav links -- white text */
  header nav a, header nav li a,
  nav > ul > li > a, nav > ol > li > a,
  nav ul a, nav ol a,
  [class*="mobile"] a, [class*="Mobile"] a,
  [class*="nav"] a, [class*="menu"] a {
    color: #ffffff !important;
  }

  /* Mobile nav link hover */
  header nav a:hover, nav ul a:hover, nav ol a:hover {
    color: rgba(255,255,255,.8) !important;
    background: rgba(0,0,0,.1) !important;
  }
}

/* ================================================================
   RESPONSIVE -- Clean mobile rules
   ================================================================ */
@media (max-width: 768px) {

  /* Claim services page - force all grids to respect mobile width */
  .cntc-block { overflow-x: hidden !important; }
  .cntc-block * { max-width: 100%; box-sizing: border-box; }
  .cntc-block p, .cntc-block div { word-break: break-word; }

  /* Services strip -- switch from grid to list on mobile */
  .cntc-services-desktop { display: none !important; }
  .cntc-services-mobile { display: flex !important; }

  /* Logo -- shrink aggressively on mobile so hamburger stays visible */
  header img, [class*="logo"] img, [class*="Logo"] img,
  [class*="brand"] img, [class*="Brand"] img {
    max-height: 48px !important;
    max-width: 120px !important;
    width: auto !important;
    height: auto !important;
  }

  /* Mobile "Menu" bar -- force CNTC blue */
  [class*="mobile-nav"], [class*="mobileNav"],
  [class*="mobile-menu-bar"], [class*="mobileMenuBar"],
  [class*="nav-mobile"], [class*="navMobile"],
  [class*="menu-bar"], [class*="menuBar"],
  [class*="mobile-header"], [class*="mobileHeader"] {
    background: #022DC1 !important;
    background-color: #022DC1 !important;
    color: #ffffff !important;
  }

  /* Target the specific dark navy bar style */
  [style*="background-color: rgb(26, 35, 64)"],
  [style*="background: rgb(26, 35, 64)"],
  [style*="background-color:#1a2340"],
  [style*="background:#1a2340"] {
    background: #022DC1 !important;
    background-color: #022DC1 !important;
  }

  /* Hamburger / mobile menu button -- force visible and push right */
  [class*="hamburger"], [class*="Hamburger"],
  [class*="menu-toggle"], [class*="menuToggle"],
  [class*="nav-toggle"], [class*="navToggle"],
  [class*="mobile-menu"], [class*="mobileMenu"],
  button[class*="menu"], button[class*="nav"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9999 !important;
    position: relative !important;
  }

  /* Hero -- full width, centered, good padding */
  .cntc-hero {
    padding: 48px 24px !important;
    margin: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }
  .cntc-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .cntc-hero-inner-center {
    text-align: center !important;
    padding: 0 !important;
    max-width: 100% !important;
  }

  /* Hide aside card on mobile -- designed for desktop only */
  .cntc-aside-card { display: none !important; }

  /* Stack all grids to single column */
  .cntc-two-col { grid-template-columns: 1fr !important; }
  .cntc-two-col-even { grid-template-columns: 1fr !important; }
  .cntc-curriculum { grid-template-columns: 1fr !important; }
  .cntc-value-grid { grid-template-columns: 1fr !important; }
  .cntc-deadline-grid { grid-template-columns: 1fr !important; }
  .cntc-stat-grid { grid-template-columns: 1fr 1fr !important; }
  .cntc-course-grid { grid-template-columns: 1fr !important; max-width: 100% !important; }
  [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(auto-fit"] { grid-template-columns: 1fr !important; }

  /* Section padding */
  .cntc-section { padding: 40px 20px !important; }
  .cntc-cta-band { padding: 48px 24px !important; }
  .cntc-sidebar { position: static !important; }

  /* Hide course card descriptions */
  .cntc-mobile-hide { display: none !important; }

  /* Calendar */
  .cntc-desktop-calendar { display: none !important; }
  .cntc-mobile-calendar { display: flex !important; }
}

/* ================================================================
   DESKTOP ONLY
   ================================================================ */
@media (min-width: 769px) {
  .cntc-mobile-hide { display: block !important; }
  .cntc-mobile-calendar { display: none !important; }
  .cntc-desktop-calendar { display: block !important; }
  .cntc-aside-card { display: block !important; }
  .cntc-services-desktop { display: grid !important; }
  .cntc-services-mobile { display: none !important; }
}

/* ============================================================
   CNTC -- M360 FORM STYLING (Global Site CSS)
   ============================================================
   Append this to the END of your existing site CSS in
   M360 Developer Tools -> CSS.

   This styles M360 forms embedded via the script-based loader
   (<script src="https://forms.marketing360.com/load.js?id=..." />)
   which render INLINE on the page (not in an iframe).

   The earlier Advanced Styling we put in the form editor will
   still apply to the iframe version of the same form.
   ============================================================ */

/* ----- FORM CONTAINER ----- */
.cntc-block form[id^="5e2b6593"],
.cntc-block .madform,
form[id^="5e2b6593"] {
  background: #FFFFFF !important;
  padding: 28px 24px !important;
  border: 1px solid #E2E6F0 !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 30px rgba(2, 29, 77, 0.08) !important;
  max-width: 600px;
  margin: 0 auto !important;
}

/* ----- FORM TITLE ("Contact Us") ----- */
form[id^="5e2b6593"] h1,
form[id^="5e2b6593"] h2,
form[id^="5e2b6593"] .h1-field-wrapper,
form[id^="5e2b6593"] .h2-field-wrapper {
  font-family: 'Barlow Condensed', 'Inter', sans-serif !important;
  font-size: 1.7rem !important;
  font-weight: 900 !important;
  color: #022DC1 !important;
  line-height: 1.15 !important;
  margin: 0 0 22px !important;
  padding: 0 0 4px !important;
  border: none !important;
  letter-spacing: -0.01em !important;
  background: transparent !important;
}

/* Hide M360's default heading divider/hr */
form[id^="5e2b6593"] hr,
form[id^="5e2b6593"] .h2-field-wrapper hr,
form[id^="5e2b6593"] .h2-field-wrapper::after,
form[id^="5e2b6593"] .h2-field-wrapper::before {
  display: none !important;
  border: none !important;
  height: 0 !important;
  margin: 0 !important;
  content: none !important;
}

/* ----- FIELD LABELS (Full Name*, Email*, Phone*, etc.) ----- */
form[id^="5e2b6593"] label,
form[id^="5e2b6593"] .madform-label-wrapper label,
form[id^="5e2b6593"] .madform-label-wrapper {
  display: block !important;
  font-family: 'DM Sans', 'Inter', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #022DC1 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin: 0 0 6px !important;
  line-height: 1.3 !important;
  padding: 0 !important;
}

/* Required asterisk green */
form[id^="5e2b6593"] .required,
form[id^="5e2b6593"] .required-asterisk,
form[id^="5e2b6593"] label .required {
  color: #06C633 !important;
  font-weight: 900 !important;
  margin-left: 2px !important;
}

/* ----- INPUT FIELDS ----- */
form[id^="5e2b6593"] input[type="text"],
form[id^="5e2b6593"] input[type="email"],
form[id^="5e2b6593"] input[type="tel"],
form[id^="5e2b6593"] input[type="number"],
form[id^="5e2b6593"] input[type="url"],
form[id^="5e2b6593"] textarea,
form[id^="5e2b6593"] select,
form[id^="5e2b6593"] .form-control {
  width: 100% !important;
  display: block !important;
  font-family: 'DM Sans', 'Inter', sans-serif !important;
  font-size: 16px !important;
  color: #1F2937 !important;
  background: #F5F8FF !important;
  background-color: #F5F8FF !important;
  border: 1.5px solid #D1D9E8 !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  box-sizing: border-box !important;
  margin: 0 0 18px 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

form[id^="5e2b6593"] input:focus,
form[id^="5e2b6593"] textarea:focus,
form[id^="5e2b6593"] select:focus,
form[id^="5e2b6593"] .form-control:focus {
  border-color: #022DC1 !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(2, 45, 193, 0.12) !important;
  outline: none !important;
}

/* Textarea */
form[id^="5e2b6593"] textarea {
  min-height: 110px !important;
  resize: vertical !important;
  line-height: 1.5 !important;
}

/* ----- CHECKBOXES ----- */
form[id^="5e2b6593"] input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  margin: 0 12px 0 0 !important;
  accent-color: #06C633 !important;
  cursor: pointer !important;
  flex: 0 0 18px !important;
  vertical-align: middle !important;
}

/* Checkbox row -- flexbox to keep checkbox and label aligned */
form[id^="5e2b6593"] .checkbox-field-wrapper,
form[id^="5e2b6593"] .checkbox-wrapper,
form[id^="5e2b6593"] .checkboxes-field-wrapper > div,
form[id^="5e2b6593"] .websites360.checkboxes-field-wrapper > div {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
}

/* Checkbox option labels (override the global uppercase blue label rule) */
form[id^="5e2b6593"] input[type="checkbox"] + label,
form[id^="5e2b6593"] input[type="checkbox"] ~ label,
form[id^="5e2b6593"] .checkbox-field-wrapper label,
form[id^="5e2b6593"] .checkbox-wrapper label {
  display: inline !important;
  font-family: 'DM Sans', 'Inter', sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  color: #1F2937 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
  flex: 1 1 auto !important;
}

/* ----- SUBMIT BUTTON ----- */
form[id^="5e2b6593"] .madform-submit,
form[id^="5e2b6593"] input[type="submit"],
form[id^="5e2b6593"] button[type="submit"] {
  display: block !important;
  width: 100% !important;
  font-family: 'Barlow Condensed', 'Inter', sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  background: #06C633 !important;
  background-color: #06C633 !important;
  border: none !important;
  border-color: #06C633 !important;
  border-radius: 10px !important;
  padding: 16px 28px !important;
  margin-top: 6px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(6, 198, 51, 0.25) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

form[id^="5e2b6593"] .madform-submit:hover,
form[id^="5e2b6593"] input[type="submit"]:hover,
form[id^="5e2b6593"] button[type="submit"]:hover {
  background: #04a52a !important;
  background-color: #04a52a !important;
  border-color: #04a52a !important;
  box-shadow: 0 6px 18px rgba(6, 198, 51, 0.35) !important;
}

/* ----- ERROR STATES ----- */
form[id^="5e2b6593"] .invalid-input,
form[id^="5e2b6593"] .form-error,
form[id^="5e2b6593"] .error-message {
  color: #DC2626 !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  margin: -12px 0 14px !important;
}

form[id^="5e2b6593"] input.form-error,
form[id^="5e2b6593"] input.invalid {
  border-color: #DC2626 !important;
  background: #FEF2F2 !important;
}

/* ----- PLACEHOLDER ----- */
form[id^="5e2b6593"] input::placeholder,
form[id^="5e2b6593"] textarea::placeholder {
  color: #9CA3AF !important;
  font-style: italic !important;
  opacity: 1 !important;
}

/* ----- MOBILE ----- */
@media (max-width: 600px) {
  form[id^="5e2b6593"] {
    padding: 22px 18px !important;
    border-radius: 12px !important;
  }
  form[id^="5e2b6593"] h2 {
    font-size: 1.45rem !important;
  }
  form[id^="5e2b6593"] input[type="text"],
  form[id^="5e2b6593"] input[type="email"],
  form[id^="5e2b6593"] input[type="tel"],
  form[id^="5e2b6593"] textarea {
    padding: 14px 14px !important;
  }
  form[id^="5e2b6593"] .madform-submit {
    padding: 18px 28px !important;
    font-size: 1.05rem !important;
  }
}

/* =============================================================
   CNTC MOBILE HEADER + FULL-BLEED FIX  --  APPEND to the END of the
   M360 global CSS (Developer Tools -> CSS). Do not replace anything.
   Added: Sep 15, 2026
   What it does at 768px and below:
     - logo and hamburger on one 52px row, no "Menu" band
     - removes the 16px side gutters M360 puts around every block
     - deal bar to one line (button hidden, bottom bar still has it)
     - bottom app bar 80px -> 56px
     - opened menu spans the full width
   Tested against the live roofing and home pages on 2026-09-15.
   Overrides two rules already in this sheet on mobile: the logo
   max-height (48 -> 40px) and the mobile "Menu" bar background,
   which no longer shows because the band is gone.
   ============================================================= */
/* CNTC mobile fix v1 (2026-09-15): paste into M360 site-wide custom CSS, or into each page block */
@media (max-width: 768px){
  .headerAndNavContentInner{display:flex !important;align-items:center;justify-content:space-between;padding:0 12px !important;position:relative !important}
  .headerContainer{padding:0 !important;flex:1;position:static !important}
  .headerContent{height:52px !important;display:flex;align-items:center}
  .headerContent h1.logo{margin:0 !important} .headerContent .logo img{max-height:40px !important;width:auto !important}
  .navContainer{padding:0 !important;background:transparent !important;width:auto !important;flex:0 0 auto;position:static !important}
  .navContent{position:static !important}
  .navContent{width:auto !important}
  #navTrigger{display:flex !important;align-items:center;justify-content:center;width:44px;height:44px;padding:0 !important;background:#06C633;border-radius:4px}
  #navTrigger .navLabel{display:none !important}
  #navTrigger .navIcon{display:block;width:24px;height:20px} #navTrigger .navIcon svg{width:24px;height:20px;fill:#fff}
  #navTopLevel.mobileDropDownNav{position:fixed !important;left:0 !important;right:0 !important;top:52px !important;width:100vw !important;max-width:100vw !important;box-sizing:border-box;z-index:1000;max-height:calc(100vh - 52px);overflow-y:auto}
  .headerAndNavContainer,.headerAndNavContent,.headerAndNavContentInner,.navContainer,.navContent{transform:none !important;will-change:auto !important;filter:none !important}
  .blockContent{padding-left:0 !important;padding-right:0 !important}
  .blockInnerContent, .cntc-v02-body, .cntc-home-body{width:100% !important}
  .cntc-v02-sticky-bar, .cntc-home-sticky-bar{padding:8px 12px !important;font-size:.82rem !important;line-height:1.3 !important}
  .cntc-v02-sticky-bar a.cta, .cntc-home-sticky-bar a.cta{display:none !important}
  .mobileFooterContainer{height:56px !important} .primaryAndSecondaryContainer{padding-bottom:56px !important}

  /* hamburger: kill M360's own round icon background so only one icon draws */
  #navTrigger .navIcon{background:none !important;background-color:transparent !important;border-radius:0 !important;box-shadow:none !important;padding:0 !important;margin:0 !important;width:24px !important;height:20px !important;display:block !important;line-height:0}
  #navTrigger .navIcon svg{position:static !important;display:block !important;width:24px !important;height:20px !important;fill:#fff !important;top:auto !important;left:auto !important;transform:none !important}
  #navTrigger .navIcon svg path{fill:#fff !important}
  #navTrigger{margin-right:4px !important}
  #navTrigger{display:flex !important;align-items:center !important;justify-content:center !important;padding:0 !important;line-height:0 !important;box-sizing:border-box}
  #navTrigger .navIcon{position:absolute !important;top:50% !important;left:50% !important;right:auto !important;bottom:auto !important;transform:translate(-50%,-50%) !important;margin:0 !important}
}

/* desktop full-bleed: remove the page frame so blocks run edge to edge */
@media (min-width: 769px){
  .primaryAndSecondaryContainer, .primaryContent, .primaryContentContainer, .blockContainer, .blockContent, .blockInnerContent{max-width:none !important;width:100% !important;padding-left:0 !important;padding-right:0 !important;margin-left:0 !important;margin-right:0 !important;box-shadow:none !important}
  body, .pageContainer, .siteContainer, .contentContainer{max-width:none !important;padding-left:0 !important;padding-right:0 !important}
}