/* ==========================================================================
   Reliable Roofing Pros — Custom CSS
   Ported from HTML templates. Supplements theme.json design tokens.
   ========================================================================== */

/* --- CSS VARIABLES (matching original templates) --- */
:root {
  --navy: rgb(22,35,54);
  --navy-deep: rgb(8,14,24);
  --navy-mid: rgb(38,58,88);
  --navy-light: rgb(56,82,120);
  --orange: rgb(188,89,38);
  --orange-brand: rgb(214,102,44);
  --orange-h: rgb(162,72,28);
  --orange-light: rgb(232,140,80);
  --orange-bg: rgb(253,241,233);
  --orange-text: rgb(118,48,8);
  --tband-bg: rgb(168,74,26);
  --offwhite: #f5f3ef;
  --offwhite-dark: #e8e4de;
  --gray-light: #eae7e2;
  --gray-dark: #ccc8c0;
  --text-body: #252220;
  --text-muted: #4e4a46;
  --text-on-navy: #dedad4;
  --text-on-navy-dim: #92908a;
  --border: rgba(26,22,18,0.12);
  --green-check: #2e7d4f;
  --fd: 'Barlow Condensed', sans-serif;
  --fb: 'Barlow', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* --- WORDPRESS BLOCK OVERRIDES --- */
.wp-site-blocks { padding: 0 !important; max-width: none !important; }
.wp-site-blocks > * { margin-block-start: 0 !important; max-width: none !important; }
body { --wp--style--root--padding-left: 0px; --wp--style--root--padding-right: 0px; padding: 0 !important; }
.wp-block-group { margin-block-start: 0; margin-block-end: 0; }
.entry-content.wp-block-post-content { max-width: none !important; width: 100% !important; padding: 0 !important; }
.entry-content.wp-block-post-content > * { max-width: none !important; }

/* --- BLOCK RESET --- */
.wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }
.wp-block-heading { margin-block-start: 0; margin-block-end: 0; }
.wp-block-list { margin-block-start: 0; margin-block-end: 0; padding-left: 0; }

/* --- GLOBAL HELPERS --- */
.w { max-width: 1400px; margin: 0 auto; padding: 0 56px; }
body { font-family: var(--fb); font-size: 18px; background: var(--offwhite); color: var(--text-body); line-height: 1.65; }

/* --- GRID LAYOUT CLASSES (avoid inline styles on blocks) --- */
.grid-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.grid-2col-center { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.grid-gaf { display: grid; grid-template-columns: 160px 1fr; gap: 56px; align-items: start; }
.grid-cta { display: grid; grid-template-columns: 1fr auto; gap: 64px; align-items: center; }
.flex-col-end { display: flex; flex-direction: column; gap: 14px; align-items: flex-end; }
.flex-col-end-sm { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }

/* Responsive overrides for grid classes */
@media (max-width: 1100px) {
  .grid-hero, .grid-2col, .grid-2col-center, .grid-gaf, .grid-cta { grid-template-columns: 1fr; gap: 40px; }
  .flex-col-end, .flex-col-end-sm { align-items: flex-start; }
}

/* Animation classes on list items via parent */
.rr-reveal .intro-list li, .rr-reveal .svc-list li, .rr-reveal .truth-list li, .rr-reveal .nofor-not li, .rr-reveal .nofor-yes li {
  opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease;
}
.intro-list.on li, .svc-list.on li, .truth-list.on li, .nofor-not.on li, .nofor-yes.on li {
  opacity: 1; transform: none;
}
.intro-list.on li:nth-child(1), .svc-list.on li:nth-child(1), .truth-list.on li:nth-child(1), .nofor-not.on li:nth-child(1), .nofor-yes.on li:nth-child(1) { transition-delay: .1s; }
.intro-list.on li:nth-child(2), .svc-list.on li:nth-child(2), .truth-list.on li:nth-child(2), .nofor-not.on li:nth-child(2), .nofor-yes.on li:nth-child(2) { transition-delay: .2s; }
.intro-list.on li:nth-child(3), .svc-list.on li:nth-child(3), .truth-list.on li:nth-child(3), .nofor-not.on li:nth-child(3), .nofor-yes.on li:nth-child(3) { transition-delay: .3s; }
.intro-list.on li:nth-child(4), .svc-list.on li:nth-child(4) { transition-delay: .4s; }
.intro-list.on li:nth-child(5), .svc-list.on li:nth-child(5) { transition-delay: .5s; }

/* Sequential animations via CSS instead of data attributes */
.guar-grid .g-card:nth-child(1) { transition-delay: 0s; }
.guar-grid .g-card:nth-child(2) { transition-delay: .2s; }
.guar-grid .g-card:nth-child(3) { transition-delay: .4s; }
.guar-grid .g-card:nth-child(4) { transition-delay: .6s; }
.guar-grid .g-card:nth-child(5) { transition-delay: .8s; }
.diff-cards .diff-card:nth-child(1) { transition-delay: .2s; }
.diff-cards .diff-card:nth-child(2) { transition-delay: .35s; }
.diff-cards .diff-card:nth-child(3) { transition-delay: .55s; }

/* --- BUTTONS --- */
.btn-p {
  background: var(--orange); color: #fff; padding: 16px 32px; border-radius: 7px;
  font-family: var(--fb); font-size: 18px; font-weight: 600; cursor: pointer;
  border: none; transition: background .2s, transform .15s; display: inline-block; line-height: 1;
  text-decoration: none;
}
.btn-p:hover { background: var(--orange-h); transform: translateY(-2px); color: #fff; }

.btn-g {
  background: transparent; color: #dedad4; border: 2px solid rgba(255,255,255,0.35);
  padding: 14px 28px; border-radius: 7px; font-family: var(--fb); font-size: 18px;
  font-weight: 500; cursor: pointer; transition: all .2s; display: inline-block; line-height: 1;
  text-decoration: none;
}
.btn-g:hover { border-color: rgba(255,255,255,0.7); color: #fff; transform: translateY(-2px); }

.btn-read-more {
  background: transparent; color: var(--navy); border: 2px solid var(--navy);
  padding: 14px 36px; border-radius: 7px; font-family: var(--fb); font-size: 18px;
  font-weight: 600; cursor: pointer; transition: all .2s, transform .15s;
  display: inline-block; line-height: 1; text-decoration: none;
}
.btn-read-more:hover { background: var(--navy); color: #fff; transform: translateY(-2px); }

/* --- EYEBROW --- */
.eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; padding: 5px 13px; border-radius: 4px; margin-bottom: 16px;
  background: var(--orange-bg) !important; color: var(--orange-text) !important;
  font-size: 13px !important;
}
.eyebrow-inv { background: rgba(214,102,44,0.18); color: #f2a070; }

/* --- HEADINGS --- */
.h-title {
  font-family: var(--fd); font-size: 56px; font-weight: 800; line-height: 1.0;
  letter-spacing: -0.5px; margin-bottom: 10px; color: var(--navy);
}
.h-title-inv { color: #fff; }
.body-text { font-size: 19px; color: var(--text-muted); line-height: 1.68; }

/* --- IMAGE PLACEHOLDERS --- */
.ph {
  background: var(--navy-mid); border-radius: 10px; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.ph svg { opacity: 0.35; }

/* Image blocks replacing placeholders */
.hero-ph img, .svc-ph img, .local-ph img, .area-ph img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 10px;
}
.hero-ph.wp-block-image, .svc-ph.wp-block-image, .local-ph.wp-block-image {
  margin: 0;
}
.hero-ph.wp-block-image figure, .hero-ph.wp-block-image img { border-radius: 10px; }
.hero-ph img { height: 440px; object-fit: cover; }
.svc-ph img { height: 460px; object-fit: cover; }
.local-ph img { height: 380px; object-fit: cover; }
.area-ph img { height: 360px; object-fit: cover; border-radius: 10px; }
.area-ph.wp-block-image { margin: 0; }
.ph-label { color: #fff; font-size: 17px; font-weight: 500; font-family: var(--fb); }
.ph-sub { color: rgba(255,255,255,0.6); font-size: 16px; font-family: var(--fb); }

/* --- ANIMATIONS --- */
@keyframes fadeSlideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes fadeLeft { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes fadeRight { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* --- SCROLL REVEAL --- */
.rr-reveal .fu { opacity: 0; transform: translateY(32px); transition: opacity .95s ease, transform .95s ease; }
.rr-reveal .fl { opacity: 0; transform: translateX(-36px); transition: opacity 1s ease, transform 1s ease; }
.rr-reveal .fr { opacity: 0; transform: translateX(36px); transition: opacity 1s ease, transform 1s ease; }
.rr-reveal .fs { opacity: 0; transform: scale(0.9); transition: opacity .95s ease, transform .95s ease; }
.fu.on, .fl.on, .fr.on, .fs.on { opacity: 1; transform: none; }
.rr-reveal .seq-fu { opacity: 0; transform: translateY(32px); transition: opacity .95s ease, transform .95s ease; }
.seq-fu.on { opacity: 1; transform: none; }
.d1 { transition-delay: .1s; } .d2 { transition-delay: .2s; } .d3 { transition-delay: .3s; }
.d4 { transition-delay: .4s; } .d5 { transition-delay: .5s; } .d6 { transition-delay: .6s; }

/* ==========================================================================
   NAV
   ========================================================================== */
nav.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s;
}
nav.site-nav.scrolled {
  background: rgba(22,35,54,0.97); border-bottom: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(8px);
}
.nav-i {
  max-width: 1400px; margin: 0 auto; padding: 0 56px; height: 80px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; overflow: visible; position: relative;
}
.nav-logo { display: flex; align-items: center; gap: 16px; flex-shrink: 0; overflow: visible; text-decoration: none; }
.nav-logo-img {
  width: 124px; height: 124px; border-radius: 0 0 12px 12px;
  position: relative; margin-top: 10px; margin-bottom: -34px; flex-shrink: 0;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5); z-index: 10; transition: transform .22s;
  background: #fff; padding: 8px; overflow: hidden;
}
.nav-logo-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.nav-logo-img:hover { transform: scale(1.04); }
.nav-name { color: #fff; font-family: var(--fd); font-size: 21px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.nav-sub { color: var(--text-on-navy-dim); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; }
/* Legacy .nav-links (kept for reference, overridden by wp:navigation) */
.nav-links { display: flex; gap: 28px; }

/* --- WP NAVIGATION BLOCK STYLING --- */
.nav-main.wp-block-navigation { flex-shrink: 1; }
.nav-main .wp-block-navigation__container { gap: 28px; }
.nav-main .wp-block-navigation-item__content {
  color: #c8c4be !important; text-decoration: none !important; font-size: 16px;
  font-weight: 500; cursor: pointer; transition: color .18s; white-space: nowrap;
  font-family: var(--fb); position: relative; padding: 0;
}
.nav-main .wp-block-navigation-item__content::after {
  content: ''; position: absolute; bottom: -4px; left: 0; width: 0;
  height: 2px; background: var(--orange-brand); transition: width .22s;
}
.nav-main .wp-block-navigation-item__content:hover { color: #fff !important; }
.nav-main .wp-block-navigation-item__content:hover::after { width: 100%; }
.nav-main .current-menu-item > .wp-block-navigation-item__content { color: #fff !important; }
.nav-main .current-menu-item > .wp-block-navigation-item__content::after { width: 100%; }

/* Submenu arrow */
.nav-main .wp-block-navigation__submenu-icon { color: #c8c4be; width: 10px; height: 10px; }
.nav-main .wp-block-navigation-item:hover > .wp-block-navigation__submenu-icon { color: #fff; }
.nav-main .wp-block-navigation__submenu-icon,
.nav-main .wp-block-navigation__submenu-icon svg,
.nav-main .wp-block-navigation-submenu__toggle[aria-expanded=true] + .wp-block-navigation__submenu-icon > svg,
.nav-main .wp-block-navigation-submenu__toggle[aria-expanded=true] > svg,
.nav-main .wp-block-navigation-item:hover > .wp-block-navigation__submenu-icon,
.nav-main .wp-block-navigation-item:hover > .wp-block-navigation__submenu-icon svg {
  transform: none !important;
}

/* Desktop dropdown */
.nav-main .wp-block-navigation__submenu-container {
  background: rgba(22,35,54,0.97) !important; backdrop-filter: blur(8px);
  border-radius: 0 0 8px 8px; padding: 12px 0 8px; min-width: 220px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.08);
  border-top: none; left: 0 !important; right: auto !important;
}
.nav-main .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block; padding: 10px 20px; font-size: 15px; color: #c8c4be !important;
  transition: background .15s, color .15s;
}
.nav-main .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { display: none; }
.nav-main .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: rgba(255,255,255,0.08); color: #fff !important;
}

/* --- HAMBURGER BUTTON --- */
.nav-hamburger {
  display: none; background: none; border: none; cursor: pointer;
  width: 32px; height: 24px; position: relative; z-index: 300; flex-shrink: 0;
}
.nav-hamburger span {
  display: block; width: 100%; height: 2px; background: #fff;
  position: absolute; left: 0; transition: transform .3s, opacity .3s;
}
.nav-hamburger span:nth-child(1) { top: 0; }
.nav-hamburger span:nth-child(2) { top: 11px; }
.nav-hamburger span:nth-child(3) { top: 22px; }
.nav-hamburger.open span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

/* --- CUSTOM MOBILE MENU (wraps wp:navigation) --- */
.nav-links-wrap { display: contents; }
.nav-cta-mobile { display: none; }

@media (max-width: 1325px) {
  .nav-links-wrap {
    display: none; flex-direction: column; position: fixed;
    top: 0; left: 0; right: 0; bottom: 0; z-index: 250;
    background: rgba(22,35,54,0.97); backdrop-filter: blur(12px);
    padding: 120px 40px 40px; gap: 0; align-items: stretch;
    overflow-y: auto;
  }
  .nav-links-wrap.open { display: flex; }

  /* Stack nav items vertically */
  .nav-links-wrap .nav-main .wp-block-navigation__container {
    flex-direction: column; gap: 0; align-items: stretch; width: 100%;
  }
  .nav-links-wrap .nav-main { width: 100%; }
  .nav-links-wrap .wp-block-navigation-item__content {
    font-size: 22px !important; padding: 18px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: block;
  }
  .nav-links-wrap .wp-block-navigation-item__content::after { display: none !important; }

  /* Mobile submenus */
  .nav-links-wrap .wp-block-navigation__submenu-container {
    position: static !important; background: transparent !important;
    box-shadow: none !important; border: none !important;
    padding: 0 0 0 20px !important; backdrop-filter: none !important;
    display: none; border-radius: 0 !important; min-width: 0 !important;
    width: 100% !important; flex-direction: column !important;
  }
  /* Force submenu items to stack vertically */
  .nav-links-wrap .has-child { flex-wrap: wrap; }
  .nav-links-wrap .has-child > .wp-block-navigation__submenu-container { flex-basis: 100%; }
  .nav-links-wrap .wp-block-navigation-item.has-child.mobile-open > .wp-block-navigation__submenu-container {
    display: block;
  }
  .nav-links-wrap .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    font-size: 18px !important; padding: 14px 0 !important;
    color: var(--text-on-navy-dim) !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  }

  /* Disable hover-triggered submenus on mobile — tap only */
  .nav-links-wrap .wp-block-navigation-item:hover > .wp-block-navigation__submenu-container {
    display: none;
  }
  .nav-links-wrap .wp-block-navigation-item.has-child.mobile-open > .wp-block-navigation__submenu-container {
    display: block !important;
  }

  /* Submenu toggle arrow — only rotate on tap (mobile-open), not hover */
  .nav-links-wrap .wp-block-navigation__submenu-icon {
    color: #c8c4be; cursor: pointer; transition: transform .2s;
    transform: none !important;
  }
  .nav-links-wrap .has-child.mobile-open > .wp-block-navigation__submenu-icon {
    transform: rotate(180deg) !important;
  }

  /* Mobile CTA */
  .nav-cta-mobile {
    display: inline-block !important; margin-top: 24px;
    text-align: center; font-size: 18px !important;
    padding: 16px 32px !important;
  }
  .nav-cta-desktop { display: none; }
  .nav-hamburger { display: block; }
}
.btn-nav {
  background: var(--orange); color: #fff; border: none; padding: 11px 24px;
  border-radius: 6px; font-family: var(--fb); font-size: 16px; font-weight: 600;
  cursor: pointer; transition: background .2s, transform .15s; white-space: nowrap;
  text-decoration: none;
}
.btn-nav:hover { background: var(--orange-h); transform: translateY(-1px); color: #fff; }

/* --- NAV DROPDOWNS (desktop) --- */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle { display: flex; align-items: center; gap: 4px; }
.nav-chevron { transition: transform .2s; flex-shrink: 0; }
.nav-dropdown-menu {
  display: none; position: absolute; top: 100%; left: -16px;
  background: rgba(22,35,54,0.97); backdrop-filter: blur(8px);
  border-radius: 0 0 8px 8px; padding: 16px 0 8px; min-width: 220px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.08);
  border-top: none; z-index: 300;
}
.nav-dropdown-menu a {
  display: block; padding: 10px 20px; font-size: 15px; color: #c8c4be;
  text-decoration: none; white-space: nowrap; transition: background .15s, color .15s;
}
.nav-dropdown-menu a::after { display: none; }
.nav-dropdown-menu a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.nav-dropdown:hover .nav-dropdown-menu { display: block; }

/* Desktop CTA button */
.nav-cta-desktop { flex-shrink: 0; }

/* --- NAV PHONE (click-to-call, visible at all sizes incl. mobile) --- */
.nav-phone {
  display: inline-flex; align-items: center; gap: 8px;
  color: #fff; text-decoration: none; font-family: var(--fb);
  font-weight: 700; font-size: 16px; white-space: nowrap;
  flex-shrink: 0; transition: color .18s;
}
.nav-phone:hover { color: var(--orange-light); }
.nav-phone i { color: var(--orange-brand); font-size: 15px; }
@media (max-width: 1325px) {
  .nav-phone { margin-left: auto; margin-right: 16px; font-size: 17px; }
}

/* ==========================================================================
   HERO (Homepage)
   ========================================================================== */
.hero {
  background: linear-gradient(135deg, rgb(8,14,26) 0%, rgb(22,35,54) 50%, rgb(46,66,92) 100%);
  padding: 160px 0 80px; position: relative; overflow: hidden;
}
.hero .w {
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px;
  align-items: center; position: relative; z-index: 1;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(214,102,44,0.16); border: 1px solid rgba(214,102,44,0.35);
  color: #f2a878; font-size: 13px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; padding: 7px 16px; border-radius: 4px;
  margin-bottom: 28px; animation: fadeSlideUp .8s ease both;
}
.hero-eyebrow::before {
  content: ''; width: 7px; height: 7px; background: var(--orange-brand);
  border-radius: 50%; flex-shrink: 0; animation: pulse-dot 2.2s ease infinite;
}
.hero-hl {
  font-family: var(--fd); font-size: 82px; font-weight: 800; line-height: 0.94;
  color: #fff; letter-spacing: -1.5px; margin-bottom: 20px;
  animation: fadeSlideUp .8s .15s ease both;
}
.hero-hl span { color: rgb(214,102,44); }
.hero-lead {
  font-size: 20px; color: var(--text-on-navy); line-height: 1.7;
  margin-bottom: 32px; animation: fadeSlideUp .8s .3s ease both;
}
.hero-lead strong { color: #fff; font-weight: 600; }
.hero-actions {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  animation: fadeSlideUp .8s .45s ease both;
}
.hero-ph { height: 440px; animation: fadeRight .9s .2s ease both; }

/* ==========================================================================
   PAGE HERO (Inner pages)
   ========================================================================== */
.page-hero {
  background: linear-gradient(135deg, rgb(8,14,26) 0%, rgb(22,35,54) 50%, rgb(46,66,92) 100%);
  padding: 160px 0 48px; text-align: center;
}
.page-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(214,102,44,0.16); border: 1px solid rgba(214,102,44,0.35);
  color: #f2a878; font-size: 13px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; padding: 7px 16px; border-radius: 4px;
  margin-bottom: 20px;
}
.page-hl {
  font-family: var(--fd); font-size: 64px; font-weight: 800; color: #fff;
  line-height: 0.96; letter-spacing: -1px; margin-bottom: 16px;
}
.page-hl span { color: rgb(214,102,44); }
.page-lead { font-size: 20px; color: var(--text-on-navy); line-height: 1.7; }

/* Page hero background images */
.page-hero { background-size: cover; background-position: center; }
.page-hero .w { position: relative; z-index: 1; }
.storm-hero { background-image: linear-gradient(135deg, rgba(8,14,26,0.85) 0%, rgba(22,35,54,0.8) 50%, rgba(46,66,92,0.75) 100%), url('/wp-content/uploads/2026/04/WAndrewCox_Aerial_view_of_residential_neighborhood_in_coastal_56c547ce-b7d9-4a68-ad5f-9a79328ce828_0.png'); }
.blog-hero-questions { background-image: linear-gradient(135deg, rgba(8,14,26,0.85) 0%, rgba(22,35,54,0.8) 50%, rgba(46,66,92,0.75) 100%), url('/wp-content/uploads/2026/04/WAndrewCox_Professional_roofer_in_orange_vest_crouching_on_re_fcaef4ce-8cd7-4eff-a819-1da137a5f662_1.png'); }
.blog-hero-why { background-image: linear-gradient(135deg, rgba(8,14,26,0.85) 0%, rgba(22,35,54,0.8) 50%, rgba(46,66,92,0.75) 100%), url('/wp-content/uploads/2026/04/WAndrewCox_Dramatic_split-image_of_a_well-maintained_charcoal_bb31a8b3-837c-43a9-86ec-115434f458ab_3.png'); }
.blog-hero-gaf { background-image: linear-gradient(135deg, rgba(8,14,26,0.85) 0%, rgba(22,35,54,0.8) 50%, rgba(46,66,92,0.75) 100%), url('/wp-content/uploads/2026/04/WAndrewCox_Close-up_of_a_roofing_professional_in_orange_vest__2071a055-552a-493c-9087-b3e6651e4703_1.png'); }
.blog-hero-repair { background-image: linear-gradient(135deg, rgba(8,14,26,0.85) 0%, rgba(22,35,54,0.8) 50%, rgba(46,66,92,0.75) 100%), url('/wp-content/uploads/2026/04/WAndrewCox_Side-by-side_view_of_a_worn_aging_roof_with_curlin_00867fc5-76cc-4e8e-9405-9271e96a1dcc_3.png'); }

/* ==========================================================================
   TRUST BAND
   ========================================================================== */
.tband {
  background: linear-gradient(135deg, rgb(117,51,18) 0%, rgb(168,74,26) 50%, rgb(207,126,75) 100%);
  padding: 0;
}
.tband .w { padding-top: 28px; padding-bottom: 28px; }
.tband-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; }
.tband-cell {
  padding: 12px 28px; display: flex; align-items: center; justify-content: flex-start;
  border-left: 3px solid rgba(255,230,210,0.55); transition: background .2s;
}
.tband-cell:hover { background: rgba(255,255,255,0.07); }
.tband-t { color: #fff; font-family: var(--fd); font-size: 22px; font-weight: 700; line-height: 1.3; }

/* ==========================================================================
   CAROUSEL
   ========================================================================== */
.carousel-sec {
  background: linear-gradient(135deg, rgb(234,234,234) 0%, rgb(255,255,255) 50%, rgb(245,243,239) 100%);
  padding: 40px 0; border-bottom: 1px solid var(--border);
}
.carousel-sec .w { position: relative; padding-left: 80px; padding-right: 80px; }
.carousel-viewport { overflow: hidden; border-radius: 10px; }
.carousel-track { display: flex; transition: transform .42s cubic-bezier(.4,0,.2,1); will-change: transform; }
.carousel-slide { min-width: calc(100% / 3); padding: 10px 8px; box-sizing: border-box; }
.carousel-slide-inner {
  height: 300px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border);
  transition: transform .25s, box-shadow .25s;
}
.carousel-slide-inner:hover { transform: scale(1.025); box-shadow: 0 8px 28px rgba(22,35,54,0.13); }
.carousel-slide-inner .ph { height: 100%; border-radius: 8px; }
.carousel-btn {
  position: absolute; top: 50%; transform: translateY(-56px); background: #fff;
  border: 1px solid var(--border); color: var(--navy); width: 48px; height: 48px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .2s; z-index: 2; box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.carousel-btn:hover { background: var(--orange-brand); border-color: var(--orange-brand); transform: translateY(-56px) scale(1.1); }
.carousel-btn:hover svg { stroke: #fff; }
.carousel-btn svg {
  width: 20px; height: 20px; stroke: var(--navy); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s;
}
.carousel-prev { left: 16px; }
.carousel-next { right: 16px; }
.carousel-slide-inner { cursor: pointer; }

/* --- LIGHTBOX --- */
.lightbox {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 10000; background: rgba(0,0,0,0.92); align-items: center;
  justify-content: center; padding: 40px;
}
.lightbox.open { display: flex; }
.lightbox-img {
  max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.lightbox-close {
  position: absolute; top: 20px; right: 28px; background: none; border: none;
  color: #fff; font-size: 40px; cursor: pointer; line-height: 1; z-index: 2;
  opacity: 0.7; transition: opacity .2s;
}
.lightbox-close:hover { opacity: 1; }
.lightbox-prev, .lightbox-next {
  position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1);
  border: none; border-radius: 50%; width: 52px; height: 52px; display: flex;
  align-items: center; justify-content: center; cursor: pointer; transition: background .2s;
}
.lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,0.2); }
.lightbox-prev svg, .lightbox-next svg { stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.carousel-dots { display: none; }
.carousel-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--border);
  cursor: pointer; transition: background .2s, transform .2s; border: none; padding: 0;
}
.carousel-dot.active { background: var(--navy); transform: scale(1.35); }

/* ==========================================================================
   INTRO SECTION
   ========================================================================== */
.intro-sec {
  background: linear-gradient(135deg, rgb(215,213,210) 0%, rgb(245,243,239) 50%, rgb(255,255,255) 100%);
  padding: 88px 0;
}
.intro-sec .w { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.intro-list { list-style: none; margin: 24px 0 0; padding: 0; }
.intro-list li {
  font-size: 19px; color: var(--text-body); padding: 13px 0; display: flex;
  align-items: center; gap: 12px; border-bottom: 1px solid var(--border); transition: padding-left .18s;
}
.intro-list li:first-child { border-top: 1px solid var(--border); }
.intro-list li:hover { padding-left: 6px; }
.intro-list li::before {
  content: ''; width: 6px; height: 6px; background: var(--orange-brand);
  border-radius: 50%; flex-shrink: 0;
}

/* ==========================================================================
   DIFF SECTION (Our Approach)
   ========================================================================== */
.diff-sec {
  background: linear-gradient(135deg, rgb(8,14,26) 0%, rgb(22,35,54) 50%, rgb(46,66,92) 100%);
  padding: 88px 0; position: relative; overflow: hidden;
}
.diff-sec::before {
  content: ''; position: absolute; top: -80px; right: -80px; width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(214,102,44,0.12) 0%, transparent 65%); pointer-events: none;
}
.diff-sec .w { position: relative; z-index: 1; }
.diff-lead { font-size: 22px; color: var(--text-on-navy); line-height: 1.72; margin-bottom: 52px; max-width: 760px; }
.diff-cards {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px;
  background: rgba(255,255,255,0.08); border-radius: 12px; overflow: hidden; margin-bottom: 52px;
}
.diff-card {
  background: rgba(255,255,255,0.04); padding: 40px 36px;
  border: 1px solid rgba(255,255,255,0.08); transition: background .25s, transform .25s;
}
.diff-card:hover { background: rgba(255,255,255,0.09); transform: translateY(-4px); }
.diff-card-num {
  font-family: var(--fd); font-size: 52px; font-weight: 800;
  color: var(--orange-brand); opacity: 0.6; line-height: 1; margin-bottom: 16px;
}
.diff-card-text { font-family: var(--fd); font-size: 32px; font-weight: 700; color: #fff; line-height: 1.2; }
.diff-tagline { font-family: var(--fd); font-size: 52px; font-weight: 800; color: #fff; line-height: 1.05; }
.diff-tagline span { color: rgb(214,102,44); }

/* ==========================================================================
   GAF SECTION
   ========================================================================== */
.gaf-sec {
  background: #fff; border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border); padding: 64px 0;
}
.gaf-sec .w { display: grid; grid-template-columns: 160px 1fr; gap: 56px; align-items: start; }
.gaf-badge-col { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 4px; }
.gaf-badge {
  width: 150px; height: 150px; display: flex; align-items: center; justify-content: center;
  transition: transform .22s, box-shadow .22s;
}
.gaf-badge:hover { transform: scale(1.06); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.gaf-badge img { width: 150px; height: 150px; object-fit: contain; }
.gaf-text-col h3 { font-family: var(--fd); font-size: 32px; font-weight: 800; color: var(--navy); margin-bottom: 16px; line-height: 1.1; }
.gaf-text-col p { font-size: 18px; color: var(--text-muted); line-height: 1.72; margin-bottom: 12px; }
.gaf-text-col p:last-child { margin-bottom: 0; }
.gaf-tag {
  display: inline-block; background: var(--navy); color: #fff; font-size: 17px;
  font-weight: 600; padding: 10px 20px; border-radius: 6px; margin-top: 20px;
  transition: background .2s;
}
.gaf-tag:hover { background: var(--navy-mid); }

/* ==========================================================================
   SERVICES SECTION
   ========================================================================== */
.svc-sec {
  background: linear-gradient(135deg, rgb(201,198,194) 0%, rgb(234,231,226) 50%, rgb(252,251,249) 100%);
  padding: 96px 0;
}
.svc-sec .w { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.svc-list { list-style: none; margin: 24px 0; padding: 0; }
.svc-list li {
  font-size: 19px; color: var(--text-body); padding: 14px 0; display: flex;
  align-items: center; gap: 12px; border-bottom: 1px solid var(--border); transition: padding-left .18s;
}
.svc-list li:first-child { border-top: 1px solid var(--border); }
.svc-list li:hover { padding-left: 6px; }
.svc-list li::before {
  content: ''; width: 6px; height: 6px; background: var(--orange-brand);
  border-radius: 50%; flex-shrink: 0;
}
.svc-sign { font-size: 19px; color: var(--text-muted); line-height: 1.7; font-style: italic; }
.svc-ph { height: 460px; }

/* ==========================================================================
   TRUTH SECTION
   ========================================================================== */
.truth-sec {
  background: linear-gradient(135deg, rgb(8,14,26) 0%, rgb(22,35,54) 50%, rgb(46,66,92) 100%);
  padding: 96px 0; position: relative; overflow: hidden;
}
.truth-sec::after {
  content: ''; position: absolute; bottom: -100px; left: -60px; width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(214,102,44,0.09) 0%, transparent 65%); pointer-events: none;
}
.truth-sec .w { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; position: relative; z-index: 1; }
.truth-left p { font-size: 19px; color: var(--text-on-navy); line-height: 1.72; margin-bottom: 20px; }
.truth-left strong { color: #fff; font-weight: 600; }
.truth-at { font-size: 19px; color: #fff; font-weight: 600; display: block; margin: 24px 0 4px; }
.truth-list { list-style: none; margin-bottom: 28px; padding: 0; }
.truth-list li {
  font-size: 19px; color: var(--text-on-navy); padding: 12px 0; display: flex;
  align-items: flex-start; gap: 13px; border-bottom: 1px solid rgba(255,255,255,0.07);
}
.truth-list li:last-child { border-bottom: none; }
.truth-list li::before { content: '—'; color: var(--orange-brand); font-weight: 700; flex-shrink: 0; }
.truth-outro { font-size: 18px; color: var(--text-on-navy-dim); font-style: italic; line-height: 1.68; }
.truth-cards { display: flex; flex-direction: column; gap: 14px; }
.t-card {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 10px; padding: 28px 26px; transition: background .22s, transform .22s;
}
.t-card:hover { background: rgba(255,255,255,0.09); transform: translateX(5px); }
.t-card.acc { background: rgba(214,102,44,0.1); border-color: rgba(214,102,44,0.28); }
.t-card.acc:hover { background: rgba(214,102,44,0.17); }
.t-card h3 { font-family: var(--fd); font-size: 24px; font-weight: 700; color: #fff; margin-bottom: 10px; line-height: 1.2; }
.t-card p { font-size: 17px; color: var(--text-on-navy); line-height: 1.65; }

/* ==========================================================================
   NOT-FOR SECTION
   ========================================================================== */
.nofor-sec {
  background: linear-gradient(135deg, rgb(215,213,210) 0%, rgb(245,243,239) 50%, rgb(255,255,255) 100%);
  padding: 96px 0;
}
.nofor-header { margin-bottom: 40px; }
.nofor-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.nofor-panel {
  border-radius: 10px; padding: 36px 32px; border: 1px solid var(--border);
  transition: transform .22s, box-shadow .22s;
}
.nofor-panel:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(22,35,54,0.09); }
.nofor-panel-not { background: #fff; }
.nofor-panel-yes { background: rgba(46,125,79,0.05); border-color: rgba(46,125,79,0.18); }
.nofor-panel h3 { font-family: var(--fd); font-size: 24px; font-weight: 700; color: var(--navy); margin-bottom: 20px; line-height: 1.2; }
.nofor-not { list-style: none; padding: 0; }
.nofor-not li {
  font-size: 19px; color: var(--text-body); padding: 13px 0; display: flex;
  align-items: flex-start; gap: 13px; border-bottom: 1px solid var(--border);
}
.nofor-not li:last-child { border-bottom: none; }
.nofor-not li::before { content: '\2715'; color: var(--orange-brand); font-size: 15px; font-weight: 700; flex-shrink: 0; margin-top: 3px; }
.nofor-yes { list-style: none; padding: 0; }
.nofor-yes li {
  font-size: 19px; color: var(--text-body); padding: 13px 0; display: flex;
  align-items: center; gap: 13px; border-bottom: 1px solid rgba(46,125,79,0.12);
}
.nofor-yes li:last-child { border-bottom: none; }
.check-icon { width: 22px; height: 22px; flex-shrink: 0; }

/* ==========================================================================
   BABYSIT CTA
   ========================================================================== */
.babysit-sec {
  background: linear-gradient(135deg, rgb(8,14,26) 0%, rgb(22,35,54) 50%, rgb(46,66,92) 100%);
  padding: 72px 0; position: relative; overflow: hidden;
}
.babysit-sec::before {
  content: ''; position: absolute; top: -60px; right: -60px; width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(214,102,44,0.12) 0%, transparent 65%); pointer-events: none;
}
.babysit-sec .w { display: grid; grid-template-columns: 1fr auto; gap: 64px; align-items: center; position: relative; z-index: 1; }
.babysit-hl { font-family: var(--fd); font-size: 48px; font-weight: 800; color: #fff; line-height: 1.05; letter-spacing: -0.3px; }
.babysit-sub { font-size: 19px; color: var(--text-on-navy-dim); margin-top: 12px; }
.babysit-r { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; flex-shrink: 0; }
.babysit-note { color: var(--text-on-navy-dim); font-size: 17px; }
.btn-babysit {
  background: var(--orange); color: #fff; border: none; padding: 18px 36px; border-radius: 7px;
  font-family: var(--fb); font-size: 19px; font-weight: 600; cursor: pointer;
  transition: background .2s, transform .15s; display: inline-block; line-height: 1; text-decoration: none;
}
.btn-babysit:hover { background: var(--orange-h); transform: translateY(-2px); }

/* ==========================================================================
   GUARANTEES SECTION
   ========================================================================== */
.guar-sec {
  background: linear-gradient(135deg, rgb(225,223,220) 0%, rgb(255,255,255) 50%, rgb(245,243,239) 100%);
  padding: 96px 0;
}
.guar-note { font-size: 18px; color: var(--text-muted); font-style: italic; margin-bottom: 52px; }
.guar-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 18px; }
.g-card {
  background: #fff; border-radius: 10px; border: 1px solid var(--border);
  padding: 32px 24px; display: flex; flex-direction: column;
  transition: transform .22s, box-shadow .22s;
}
.g-card:hover { transform: translateY(-5px); box-shadow: 0 12px 32px rgba(22,35,54,0.11); }
.g-num { font-family: var(--fd); font-size: 52px; font-weight: 800; color: rgb(80,95,115); line-height: 1; margin-bottom: 14px; }
.g-card h4 { font-family: var(--fd); font-size: 24px; font-weight: 700; color: var(--navy); margin-bottom: 10px; line-height: 1.2; }
.g-card p { font-size: 17px; color: var(--text-muted); line-height: 1.62; }

/* ==========================================================================
   LOCAL SECTION
   ========================================================================== */
.local-sec {
  background: linear-gradient(135deg, rgb(8,14,26) 0%, rgb(22,35,54) 50%, rgb(46,66,92) 100%);
  padding: 96px 0; position: relative; overflow: hidden;
}
.local-sec::before {
  content: ''; position: absolute; top: -60px; right: -60px; width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(214,102,44,0.1) 0%, transparent 65%); pointer-events: none;
}
.local-sec .w { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; z-index: 1; }
.local-copy p { font-size: 19px; color: var(--text-on-navy); line-height: 1.72; margin-bottom: 16px; }
.local-copy p.emph { color: #fff; font-weight: 600; }
.local-ph { height: 380px; }

/* ==========================================================================
   FAQ SECTION
   ========================================================================== */
.faq-sec {
  background: linear-gradient(135deg, rgb(201,198,194) 0%, rgb(234,231,226) 50%, rgb(252,251,249) 100%);
  padding: 96px 0;
}
.faq-grid { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--border); }
.faq-item { padding: 32px 0; border-bottom: 1px solid var(--border); }
.faq-item:nth-child(odd) { padding-right: 56px; border-right: 1px solid var(--border); }
.faq-item:nth-child(even) { padding-left: 56px; }
.faq-q { font-family: var(--fd); font-size: 24px; font-weight: 700; color: var(--navy); margin-bottom: 12px; line-height: 1.2; transition: color .18s; }
.faq-item:hover .faq-q { color: var(--orange-brand); }
.faq-a { font-size: 18px; color: var(--text-muted); line-height: 1.68; }

/* ==========================================================================
   AREA SECTION
   ========================================================================== */
.area-sec {
  background: linear-gradient(135deg, rgb(225,223,220) 0%, rgb(245,243,239) 50%, rgb(255,255,255) 100%);
  padding: 80px 0;
}
.area-sec .w { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.area-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.area-pill {
  background: #fff; border: 1px solid var(--border); color: var(--text-body);
  font-size: 17px; font-weight: 500; padding: 10px 20px; border-radius: 24px;
  cursor: pointer; transition: all .2s;
}
.area-pill:hover { background: var(--orange-bg); border-color: rgba(214,102,44,0.35); color: var(--orange-text); transform: translateY(-2px); }
.area-ph { height: 360px; }

/* ==========================================================================
   CTA SECTION
   ========================================================================== */
.cta-sec {
  background: linear-gradient(135deg, rgb(8,14,26) 0%, rgb(22,35,54) 50%, rgb(46,66,92) 100%);
  padding: 96px 0; position: relative; overflow: hidden;
}
.cta-sec::before {
  content: ''; position: absolute; top: -60px; left: -60px; width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(214,102,44,0.12) 0%, transparent 65%); pointer-events: none;
}
.cta-sec .w { display: grid; grid-template-columns: 1fr auto; gap: 64px; align-items: center; position: relative; z-index: 1; }
.cta-hl { font-family: var(--fd); font-size: 56px; font-weight: 800; color: #fff; line-height: 1.02; letter-spacing: -0.5px; }
.cta-hl span { color: rgb(214,102,44); }
.cta-sub { font-size: 19px; color: var(--text-on-navy-dim); margin-top: 14px; }
.cta-r { display: flex; flex-direction: column; gap: 14px; align-items: flex-end; flex-shrink: 0; }
.cta-note { color: var(--text-on-navy-dim); font-size: 17px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: rgb(22,35,54); padding: 32px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.site-footer .w { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.site-footer p { font-size: 16px; color: rgb(142,140,138); margin: 0; }
.foot-links { display: flex; gap: 28px; }
.foot-links a { color: rgb(142,140,138); text-decoration: none; font-size: 16px; cursor: pointer; transition: color .18s; }
.foot-links a:hover { color: #c8c4be; }

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.contact-wrap {
  display: grid; grid-template-columns: 1fr 380px; gap: 56px;
  align-items: start; padding: 72px 0;
}
.form-card {
  background: #fff; border-radius: 12px; padding: 48px 40px;
  border: 1px solid var(--border); box-shadow: 0 4px 24px rgba(22,35,54,0.06);
}
.form-title { font-family: var(--fd); font-size: 32px; font-weight: 800; color: var(--navy); margin-bottom: 8px; }
.form-sub { font-size: 17px; color: var(--text-muted); margin-bottom: 32px; line-height: 1.6; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block; font-size: 15px; font-weight: 600; color: var(--navy);
  margin-bottom: 6px; letter-spacing: 0.3px;
}
.form-required { color: var(--orange-brand); margin-left: 2px; }
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%; padding: 13px 16px; border: 1px solid var(--border); border-radius: 6px;
  font-family: var(--fb); font-size: 17px; color: var(--text-body); background: #fafaf8;
  transition: border-color .2s, box-shadow .2s;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none; border-color: var(--orange-brand);
  box-shadow: 0 0 0 3px rgba(214,102,44,0.12);
}
.form-group textarea { min-height: 120px; resize: vertical; }
.btn-submit {
  background: var(--orange); color: #fff; border: none; padding: 16px 36px; border-radius: 7px;
  font-family: var(--fb); font-size: 18px; font-weight: 600; cursor: pointer;
  transition: background .2s, transform .15s; width: 100%;
}
.btn-submit:hover { background: var(--orange-h); transform: translateY(-2px); }
.form-disclaimer { font-size: 15px; color: var(--text-muted); margin-top: 14px; text-align: center; }
.success-msg { display: none; background: rgba(46,125,79,0.08); border: 1px solid rgba(46,125,79,0.25); border-radius: 8px; padding: 20px; margin-top: 20px; }
.success-msg p { font-size: 17px; color: var(--green-check); font-weight: 500; margin: 0; }

/* Contact sidebar */
.contact-info { display: flex; flex-direction: column; gap: 24px; }
.info-block {
  background: #fff; border-radius: 10px; padding: 32px 28px;
  border: 1px solid var(--border); box-shadow: 0 2px 12px rgba(22,35,54,0.04);
}
.info-block h3 { font-family: var(--fd); font-size: 22px; font-weight: 700; color: var(--navy); margin-bottom: 20px; }
.info-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.info-row:last-child { border-bottom: none; }
.info-icon {
  width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.info-icon svg { width: 20px; height: 20px; stroke: var(--orange-brand); fill: none; stroke-width: 1.5; }
.info-label { font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.info-value { font-size: 17px; color: var(--text-body); font-weight: 500; }
.info-value a { color: var(--text-body); text-decoration: none; transition: color .18s; }
.info-value a:hover { color: var(--orange-brand); }
.guarantee-strip {
  background: rgba(46,125,79,0.05); border: 1px solid rgba(46,125,79,0.18);
  border-radius: 10px; padding: 28px;
}
.guarantee-strip h3 { font-family: var(--fd); font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 16px; }
.guarantee-strip ul { list-style: none; padding: 0; margin: 0; }
.guarantee-strip li {
  font-size: 17px; color: var(--text-body); padding: 8px 0; display: flex;
  align-items: center; gap: 10px;
}
.guarantee-strip li::before {
  content: '\2713'; color: var(--green-check); font-weight: 700; flex-shrink: 0;
}

/* ==========================================================================
   PROSE / BLOG POST
   ========================================================================== */
.prose-sec { padding: 72px 0; background: linear-gradient(135deg, rgb(215,213,210) 0%, rgb(245,243,239) 50%, rgb(255,255,255) 100%); }
.prose-sec .w { max-width: 1400px; }
.prose-sec h1 { font-family: var(--fd); font-size: 48px; font-weight: 800; color: var(--navy); margin-bottom: 8px; line-height: 1.05; }
.prose-sec .post-meta { font-size: 15px; color: var(--text-muted); margin-bottom: 40px; }
.prose-sec h2 { font-family: var(--fd); font-size: 28px; font-weight: 700; color: var(--navy); margin: 40px 0 16px; line-height: 1.15; }
.prose-sec p { font-size: 18px; color: var(--text-muted); line-height: 1.72; margin-bottom: 18px; }
.prose-sec ul, .prose-sec ol { margin: 0 0 20px 24px; }
.prose-sec li { font-size: 18px; color: var(--text-muted); line-height: 1.72; margin-bottom: 8px; }
.prose-sec strong { color: var(--text-body); font-weight: 600; }
.prose-sec blockquote {
  border-left: 4px solid var(--orange-brand); margin: 28px 0; padding: 16px 24px;
  background: rgba(214,102,44,0.04); border-radius: 0 8px 8px 0;
}
.prose-sec blockquote p { font-style: italic; color: var(--text-body); }
.prose-back { display: inline-block; font-size: 16px; font-weight: 600; color: var(--navy); text-decoration: none; margin-bottom: 28px; transition: color .18s; }
.prose-back:hover { color: var(--orange-brand); }

/* Single post hero with featured image background */
.single-hero { padding: 160px 0 48px !important; margin: 0 !important; }
.single-hero .wp-block-post-title {
  font-family: var(--fd); font-size: 56px; font-weight: 800;
  color: #fff !important; line-height: 1.0; letter-spacing: -0.5px; margin: 0;
}
/* Single hero categories */
.single-hero-cats { margin-bottom: 16px !important; }
.single-hero-cats a {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; background: rgba(214,102,44,0.16); border: 1px solid rgba(214,102,44,0.35);
  color: #f2a878 !important; text-decoration: none !important; padding: 5px 14px;
  border-radius: 4px; margin-right: 8px; transition: background .2s;
}
.single-hero-cats a:hover { background: rgba(214,102,44,0.28); }
.single-hero-cats .wp-block-post-terms__separator { display: none; }

/* Single hero date */
.single-hero-date {
  margin-top: 16px !important; font-size: 16px; color: var(--text-on-navy-dim) !important;
  font-family: var(--fb);
}

@media (max-width: 768px) {
  .single-hero { padding: 120px 0 36px !important; }
  .single-hero .wp-block-post-title { font-size: 36px; }
}

/* ==========================================================================
   BLOG LISTING
   ========================================================================== */
.blog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 40px; }
.blog-card {
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; transition: transform .22s, box-shadow .22s; text-decoration: none;
  display: grid; grid-template-columns: 25% 1fr;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(22,35,54,0.1); }
.blog-card-img { min-height: 180px; overflow: hidden; }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; top: 0; left: 0; }
.blog-card-img { position: relative; }
.blog-card-img .ph { height: 100%; border-radius: 0; }
.blog-card-body { padding: 24px 28px; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 600px) {
  .blog-card { grid-template-columns: 1fr; }
  .blog-card-img { min-height: 160px; }
}
.blog-card-tag {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--orange-text); background: var(--orange-bg);
  padding: 4px 10px; border-radius: 3px; margin-bottom: 12px;
}
.blog-card-title { font-family: var(--fd); font-size: 24px; font-weight: 700; color: var(--navy); line-height: 1.2; margin-bottom: 10px; }
.blog-card-excerpt { font-size: 17px; color: var(--text-muted); line-height: 1.62; }
.blog-grid-sidebar { grid-template-columns: 1fr; }

/* ==========================================================================
   ROOFING TYPES — additional styles
   ========================================================================== */
.roofing-card {
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; transition: transform .22s, box-shadow .22s;
}
.roofing-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(22,35,54,0.1); }
.roofing-card-img { height: 240px; }
.roofing-card-img .ph { height: 100%; border-radius: 0; }
.roofing-card-body { padding: 28px; }
.roofing-card-body h3 { font-family: var(--fd); font-size: 28px; font-weight: 700; color: var(--navy); margin-bottom: 12px; }
.roofing-card-body p { font-size: 17px; color: var(--text-muted); line-height: 1.65; margin-bottom: 10px; }

/* Color swatches for metal roofing */
.color-sec { padding: 72px 0; background: var(--offwhite); }
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; margin-top: 32px; }
.color-swatch {
  border-radius: 8px; overflow: hidden; border: 1px solid var(--border);
  transition: transform .2s;
}
.color-swatch:hover { transform: scale(1.05); }
.color-swatch-block { height: 80px; }
.color-swatch-label { padding: 10px 12px; font-size: 15px; font-weight: 500; color: var(--text-body); text-align: center; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .w { padding: 0 32px; }
  .nav-i { padding: 0 32px; }
  .hero .w { grid-template-columns: 1fr; gap: 40px; }
  .hero-hl { font-size: 56px; }
  .hero-ph { height: 300px; }
  .tband-row { grid-template-columns: 1fr 1fr; }
  .intro-sec .w { grid-template-columns: 1fr; gap: 40px; }
  .diff-cards { grid-template-columns: 1fr; }
  .gaf-sec .w { grid-template-columns: 1fr; }
  .svc-sec .w { grid-template-columns: 1fr; gap: 40px; }
  .truth-sec .w { grid-template-columns: 1fr; gap: 40px; }
  .nofor-panels { grid-template-columns: 1fr; }
  .babysit-sec .w { grid-template-columns: 1fr; gap: 24px; }
  .babysit-r { align-items: flex-start; }
  .guar-grid { grid-template-columns: repeat(3, 1fr); }
  .local-sec .w { grid-template-columns: 1fr; gap: 40px; }
  .faq-grid { grid-template-columns: 1fr; }
  .faq-item:nth-child(odd) { padding-right: 0; border-right: none; }
  .faq-item:nth-child(even) { padding-left: 0; }
  .area-sec .w { grid-template-columns: 1fr; gap: 40px; }
  .cta-sec .w { grid-template-columns: 1fr; gap: 24px; text-align: center; }
  .cta-r { align-items: center; }
  .contact-wrap { grid-template-columns: 1fr; }
  .page-hl { font-size: 48px; }
  .blog-grid { grid-template-columns: 1fr; }
  .carousel-slide { min-width: 50%; }
}

@media (max-width: 768px) {
  .w { padding: 0 20px; }
  .nav-i { padding: 0 20px; height: 64px; }
  .nav-logo-img { width: 80px; height: 80px; margin-bottom: -16px; }
  .hero { padding: 120px 0 60px; }
  .hero-hl { font-size: 42px; }
  .page-hero { padding: 120px 0 36px; }
  .page-hl { font-size: 36px; }
  .h-title { font-size: 36px; }
  .tband-row { grid-template-columns: 1fr; }
  .guar-grid { grid-template-columns: 1fr 1fr; }
  .diff-tagline { font-size: 36px; }
  .carousel-slide { min-width: 100%; }
  .carousel-sec .w { padding-left: 48px; padding-right: 48px; }
  .form-row { grid-template-columns: 1fr; }
}

/* Below 600px: phone moves out of the nav row into a top utility bar
   absolutely positioned at the top of nav.site-nav, with .nav-i padded
   down so the logo + hamburger sit below it. Placed AFTER the 768px rule
   so .nav-i height/padding overrides cascade correctly. */
@media (max-width: 600px) {
  .nav-phone {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 36px;
    margin: 0; padding: 0;
    background: var(--navy-deep);
    color: #fff;
    font-size: 15px; gap: 6px;
    display: flex; align-items: center; justify-content: center;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .nav-phone i { font-size: 14px; color: var(--orange-brand); }
  .nav-i { height: 100px; padding: 36px 20px 0; box-sizing: border-box; }
  .nav-logo-img { margin-top: 4px; margin-bottom: -8px; }
}

@media (max-width: 480px) {
  .guar-grid { grid-template-columns: 1fr; }
  .hero-hl { font-size: 36px; }
}

/* ==========================================================================
   PROSE BODY (2-col with sidebar — storm-damage, blog posts)
   ========================================================================== */
.prose-sec .w {
  display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr);
  gap: 72px; align-items: start;
}
.prose-body h2 { font-family: var(--fd); font-size: 32px; font-weight: 800; color: var(--navy); margin: 40px 0 14px; line-height: 1.1; }
.prose-body h2:first-child { margin-top: 0; }
.prose-body p { font-size: 18px; color: var(--text-muted); line-height: 1.75; margin-bottom: 18px; }
.prose-body p:last-child { margin-bottom: 0; }
.prose-body ul, .prose-body ol { margin: 0 0 18px; padding-left: 0; list-style: none; }
.prose-body ul li, .prose-body ol li {
  font-size: 18px; color: var(--text-body); padding: 10px 0;
  display: flex; align-items: flex-start; gap: 12px; border-bottom: 1px solid var(--border);
}
.prose-body ul li:first-child, .prose-body ol li:first-child { border-top: 1px solid var(--border); }
.prose-body ul li::before {
  content: ''; width: 6px; height: 6px; background: var(--orange-brand);
  border-radius: 50%; flex-shrink: 0; margin-top: 8px;
}
.prose-body ol { counter-reset: ol-c; }
.prose-body ol li { counter-increment: ol-c; }
.prose-body ol li::before {
  content: counter(ol-c); font-family: var(--fd); font-size: 22px;
  font-weight: 800; color: var(--orange-brand); flex-shrink: 0; min-width: 28px; line-height: 1.3;
}
.prose-body strong { font-weight: 600; color: var(--text-body); }
.prose-body .callout {
  background: linear-gradient(135deg, rgb(8,14,26) 0%, rgb(22,35,54) 50%, rgb(46,66,92) 100%);
  border-radius: 10px; padding: 32px 28px; margin: 32px 0;
}
.prose-body .callout p { color: var(--text-on-navy); margin-bottom: 0; }
.prose-body .callout strong { color: #fff; }

/* Sidebar */
.prose-sidebar { position: sticky; top: 100px; }
.sidebar-card {
  background: #fff; border-radius: 10px; border: 1px solid var(--border);
  padding: 28px 24px; margin-bottom: 20px;
}
.sidebar-card h3 { font-family: var(--fd); font-size: 22px; font-weight: 700; color: var(--navy); margin-bottom: 14px; line-height: 1.2; }
.sidebar-card p { font-size: 17px; color: var(--text-muted); line-height: 1.65; margin-bottom: 12px; }
.sidebar-card ul { list-style: none; padding: 0; }
.sidebar-card ul li {
  font-size: 16px; color: var(--text-body); padding: 7px 0;
  display: flex; align-items: center; gap: 9px; border-bottom: 1px solid var(--border);
}
.sidebar-card ul li:last-child { border-bottom: none; }
.sidebar-card ul li::before {
  content: ''; width: 5px; height: 5px; background: var(--orange-brand);
  border-radius: 50%; flex-shrink: 0;
}
.sidebar-cta {
  background: linear-gradient(135deg, rgb(8,14,26) 0%, rgb(22,35,54) 50%, rgb(46,66,92) 100%);
  border-radius: 10px; padding: 28px 24px; margin-bottom: 20px;
}
.sidebar-cta h3 { font-family: var(--fd); font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 12px; line-height: 1.2; }
.sidebar-cta p { font-size: 17px; color: var(--text-on-navy); margin-bottom: 18px; line-height: 1.6; }
.sidebar-cta .btn-p { width: 100%; text-align: center; display: block; box-sizing: border-box; }

/* ==========================================================================
   ROOFING TYPES PAGE
   ========================================================================== */
.types-intro {
  background: linear-gradient(135deg, rgb(8,14,26) 0%, rgb(22,35,54) 50%, rgb(46,66,92) 100%);
  padding: 56px 0;
}
.types-intro .w { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.types-intro p { font-size: 19px; color: var(--text-on-navy); line-height: 1.72; }

.type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 48px; }
.type-card {
  background: #fff; border-radius: 10px; border: 1px solid var(--border);
  overflow: hidden; transition: transform .22s, box-shadow .22s;
}
.type-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(22,35,54,0.09); }
.type-card-img { height: 200px; overflow: hidden; }
.type-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.type-card-body { padding: 28px; }
.type-card-body h3 { font-family: var(--fd); font-size: 26px; font-weight: 800; color: var(--navy); margin-bottom: 12px; line-height: 1.1; }
.type-card-body p { font-size: 17px; color: var(--text-muted); line-height: 1.68; margin-bottom: 14px; }
.type-card-body ul { list-style: none; padding: 0; }
.type-card-body ul li {
  font-size: 16px; color: var(--text-body); padding: 7px 0;
  display: flex; align-items: center; gap: 9px; border-bottom: 1px solid var(--border);
}
.type-card-body ul li:last-child { border-bottom: none; }
.type-card-body ul li::before {
  content: ''; width: 5px; height: 5px; background: var(--orange-brand);
  border-radius: 50%; flex-shrink: 0;
}

/* Color swatches */
.swatch-row { display: flex; gap: 24px; margin-top: 32px; flex-wrap: wrap; }
.swatch { text-align: center; }
.swatch-chip { width: 80px; height: 80px; border-radius: 10px; border: 1px solid var(--border); margin-bottom: 8px; }
.swatch-name { font-size: 15px; color: var(--text-muted); font-weight: 500; }

/* ==========================================================================
   FAQ PAGE
   ========================================================================== */
.faq-page-item { border-bottom: 1px solid var(--border); padding: 28px 0; }
.faq-page-item:first-child { border-top: 1px solid var(--border); }
.faq-page-num {
  font-family: var(--fd); font-size: 40px; font-weight: 800;
  color: var(--orange-brand); opacity: 0.25; line-height: 1; margin-bottom: 8px;
}
.faq-page-q { font-family: var(--fd); font-size: 26px; font-weight: 700; color: var(--navy); margin-bottom: 14px; line-height: 1.2; }
.faq-page-a { font-size: 18px; color: var(--text-muted); line-height: 1.72; }
.faq-page-a p { margin-bottom: 14px; }
.faq-page-a ul { list-style: none; margin: 12px 0; padding: 0; }
.faq-page-a ul li {
  padding: 7px 0; display: flex; align-items: flex-start; gap: 10px;
  border-bottom: 1px solid var(--border); font-size: 17px; color: var(--text-body);
}
.faq-page-a ul li:last-child { border-bottom: none; }
.faq-page-a ul li::before {
  content: ''; width: 5px; height: 5px; background: var(--orange-brand);
  border-radius: 50%; flex-shrink: 0; margin-top: 8px;
}

/* ==========================================================================
   GAF WIDGET PAGES
   ========================================================================== */
.widget-wrap { border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: #fff; box-shadow: 0 4px 20px rgba(22,35,54,0.07); }
.widget-wrap iframe { display: block; border: none; width: 100%; transition: height .3s ease; }
.widget-note { font-size: 17px; color: var(--text-muted); margin-top: 16px; font-style: italic; }

/* ==========================================================================
   RESPONSIVE — Additional pages
   ========================================================================== */
@media (max-width: 1100px) {
  .prose-sec .w { grid-template-columns: 1fr; }
  .prose-sidebar { position: static; }
  .types-intro .w { grid-template-columns: 1fr; gap: 32px; }
  .type-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .page-hero { padding: 120px 0 36px; }
  .page-hero-eyebrow { margin-bottom: 14px; }
}

/* ==========================================================================
   FOOTER NAP (added 2026-04-24)
   ========================================================================== */
.site-footer .w { flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 16px; }
.footer-nap { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.footer-nap-name { font-family: var(--fd); color: #fff; font-size: 22px; font-weight: 700; margin: 0 0 4px 0; letter-spacing: 0.2px; }
.footer-nap-addr, .footer-nap-phone, .footer-nap-email { margin: 0; font-size: 16px; color: rgb(172,170,166); line-height: 1.4; }
.footer-nap-phone a, .footer-nap-email a { color: rgb(212,208,202); text-decoration: none; }
.footer-nap-phone a:hover, .footer-nap-email a:hover { color: var(--orange-light); }
.footer-copy { font-size: 15px; color: rgb(110,108,106); margin-top: 8px; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 0; }
.foot-links a { color: rgb(142,140,138); }

/* ==========================================================================
   404 PAGE (added 2026-04-24)
   ========================================================================== */
.four04-hero { min-height: 55vh; display: flex; align-items: center; justify-content: center; text-align: center; }
.four04-hero .w { max-width: 760px; }
.four04-hero .page-hero-eyebrow { justify-content: center; margin-bottom: 12px; }
.four04-hero .page-hl { font-size: 72px; margin-bottom: 16px; }
.four04-hero .page-lead { margin-bottom: 28px; font-size: 19px; }
.four04-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.four04-actions p { margin: 0; }
@media (max-width: 740px) {
  .four04-hero .page-hl { font-size: 52px; }
}

/* ==========================================================================
   RELATED PAGES BLOCK (added 2026-04-24)
   ========================================================================== */
.related-pages-section { background: var(--offwhite); padding: 48px 0; border-top: 1px solid var(--border); }
.related-pages-section .w { max-width: 900px; }
.related-pages-hl { font-family: var(--fd); font-size: 30px; font-weight: 800; color: var(--navy); margin: 0 0 20px 0; }
.related-link { margin: 8px 0; font-size: 17px; }
.related-link a { color: var(--orange-h); text-decoration: none; font-weight: 500; border-bottom: 1px solid transparent; transition: border-color .18s; }
.related-link a:hover { border-bottom-color: var(--orange-brand); }

/* ==========================================================================
   FORMINATOR — match theme form-card aesthetic (added 2026-04-24)
   Scoped to .form-card so it only affects the contact page card.
   ========================================================================== */

/* Row spacing: replace Forminator's compact row gap with generous vertical rhythm. */
.form-card .forminator-ui .forminator-row { margin-bottom: 24px; display: flex; flex-wrap: wrap; gap: 20px; }
.form-card .forminator-ui .forminator-row-last { margin-top: 32px; margin-bottom: 0; }

/* Column widths override Forminator's percentage math so gap math is clean. */
.form-card .forminator-ui .forminator-col { padding: 0; flex: 1 1 0; min-width: 0; }
.form-card .forminator-ui .forminator-col-6  { flex: 1 1 calc(50% - 10px); max-width: calc(50% - 10px); }
.form-card .forminator-ui .forminator-col-12 { flex: 1 1 100%; max-width: 100%; }

/* Labels: navy, bold, orange asterisk. */
.form-card .forminator-ui .forminator-label {
	display: block; font-family: var(--fb);
	font-size: 15px; font-weight: 700; color: var(--navy);
	margin-bottom: 8px; letter-spacing: 0.3px; text-transform: none;
}
.form-card .forminator-ui .forminator-required { color: var(--orange-brand); margin-left: 4px; }

/* Inputs + textarea: match the theme's .form-group input pattern. */
.form-card .forminator-ui .forminator-input,
.form-card .forminator-ui .forminator-textarea {
	width: 100%; box-sizing: border-box;
	padding: 14px 18px;
	border: 1px solid var(--border); border-radius: 8px;
	font-family: var(--fb); font-size: 16px; color: var(--text-body);
	background: var(--offwhite);
	transition: border-color .18s, box-shadow .18s, background .18s;
	line-height: 1.4;
}
.form-card .forminator-ui .forminator-input::placeholder,
.form-card .forminator-ui .forminator-textarea::placeholder { color: var(--text-muted); opacity: 0.7; }
.form-card .forminator-ui .forminator-input:focus,
.form-card .forminator-ui .forminator-textarea:focus {
	outline: none;
	border-color: var(--orange-brand);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(214,102,44,0.12);
}
.form-card .forminator-ui .forminator-textarea { min-height: 140px; resize: vertical; }

/* Submit button: full-width orange, matches .btn-submit from custom.css. */
.form-card .forminator-ui .forminator-button-submit {
	width: 100%;
	background: var(--orange-brand); color: #fff;
	border: none; border-radius: 8px;
	padding: 18px 28px;
	font-family: var(--fb); font-size: 18px; font-weight: 700;
	letter-spacing: 0.3px;
	cursor: pointer; transition: background .18s, transform .08s;
}
.form-card .forminator-ui .forminator-button-submit:hover { background: var(--orange-h); }
.form-card .forminator-ui .forminator-button-submit:active { transform: translateY(1px); }

/* After submit: disclaimer line. */
.form-card .form-disclaimer {
	margin-top: 16px; text-align: center;
	font-size: 14px; color: var(--text-muted); line-height: 1.5;
}

/* Hide any intl-tel-input remnants (belt + suspenders in case type change misses). */
.form-card .iti { display: block; width: 100%; }
.form-card .iti__flag-container,
.form-card .iti__selected-flag { display: none !important; }
.form-card .iti input { padding-left: 18px !important; }

/* Responsive: stack the 6-col pairs on narrow viewports. */
@media (max-width: 620px) {
	.form-card .forminator-ui .forminator-col-6 { flex: 1 1 100%; max-width: 100%; }
}

/* ==========================================================================
   FOOTER — revert to compact one-line layout (2026-04-24)
   Overrides the earlier vertical-stack NAP block styling.
   ========================================================================== */
.site-footer { padding: 24px 0; }
.site-footer .w {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	text-align: left;
}
.footer-copy { font-size: 15px; color: rgb(142,140,138); margin: 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: 24px; justify-content: flex-end; margin: 0; }
.foot-links a { color: rgb(142,140,138); font-size: 15px; }
.foot-links a:hover { color: #c8c4be; }
@media (max-width: 680px) {
	.site-footer .w { flex-direction: column; align-items: center; text-align: center; }
	.foot-links { justify-content: center; }
}

/* ==========================================================================
   ROUND 4 — mobile menu z-index/opacity + full-width items,
   contact page calendly link, footer tidy (2026-04-24)
   ========================================================================== */

/* Mobile menu: sit above everything, fully opaque */
@media (max-width: 1325px) {
	.nav-links-wrap {
		z-index: 10000 !important;
		background: rgb(22,35,54) !important;        /* fully opaque */
		backdrop-filter: none !important;
	}
	/* Keep the top nav bar below the overlay when open */
	.site-nav, #navbar { z-index: 100; }

	/* Menu items span full width with a full-width divider */
	.nav-links-wrap .nav-main .wp-block-navigation__container { width: 100%; }
	.nav-links-wrap .wp-block-navigation-item { display: block; width: 100%; }
	.nav-links-wrap .wp-block-navigation-item__content {
		display: block; width: 100%; box-sizing: border-box;
	}
	/* Submenu items inherit full width too */
	.nav-links-wrap .wp-block-navigation__submenu-container .wp-block-navigation-item,
	.nav-links-wrap .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: block; width: 100%; box-sizing: border-box;
	}
}

/* Contact page: alt calendar link under the form-sub */
.form-alt-link {
	margin: 4px 0 20px 0;
	font-size: 15px;
	color: var(--text-muted);
}
.form-alt-link a {
	color: var(--orange-h);
	text-decoration: none;
	font-weight: 600;
	border-bottom: 1px solid transparent;
	transition: border-color .18s;
}
.form-alt-link a:hover { border-bottom-color: var(--orange-brand); }

/* ==========================================================================
   ROUND 5 — undo round-4 mobile-menu mistakes, fix properly (2026-04-24)
   Root cause: overlay wasn't reliably 100vh (iOS Safari), not z-index.
   Also: round-4 made items display:block, which broke chevron inline layout.
   ========================================================================== */

/* Revert round-4 z-index overrides so hamburger (z-index:300) stays visible over overlay (z-index:250). */
.site-nav, #navbar { z-index: 200 !important; }

@media (max-width: 1325px) {
	.nav-links-wrap {
		/* Back down from 10000 so the hamburger (z-index:300, in nav's stacking context) shows the X. */
		z-index: 250 !important;
		/* Opaque bg so page content can't bleed through. */
		background: rgb(22,35,54) !important;
		/* Real 100vh even when iOS Safari's URL bar is visible. */
		height: 100vh !important;
		height: 100dvh !important;
		min-height: 100vh;
	}

	/* Items stay flex so the submenu chevron lives on the same row as the link,
	   but span full width so the divider reaches the edges. Border moves to the
	   item (parent) instead of the content (child). */
	.nav-links-wrap .nav-main .wp-block-navigation-item {
		display: flex !important;
		align-items: center !important;
		flex-wrap: wrap !important;
		width: 100%;
		border-bottom: 1px solid rgba(255,255,255,0.08);
	}
	.nav-links-wrap .nav-main .wp-block-navigation-item__content {
		display: block;
		flex: 1 1 auto;
		width: auto !important;          /* override round-4 */
		border-bottom: none !important;  /* border now lives on the parent */
	}

	/* Submenu (dropdown children) — same treatment so the nested dividers also span full width. */
	.nav-links-wrap .wp-block-navigation__submenu-container .wp-block-navigation-item {
		display: flex !important;
		align-items: center !important;
		width: 100%;
		border-bottom: 1px solid rgba(255,255,255,0.05);
	}
	.nav-links-wrap .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		flex: 1 1 auto;
		width: auto !important;
		border-bottom: none !important;
	}
}

/* ==========================================================================
   ROUND 6 — headings in sidebar cards (h2 as well as h3),
   calendly button in contact sidebar (2026-04-24)
   ========================================================================== */

/* Heading hierarchy pass changed many h3s to h2s, so the old sidebar rules
   (that only targeted h3) stopped styling them. Extend to h2 too. */
.sidebar-card h2, .sidebar-card h3 {
	font-family: var(--fd); font-size: 22px; font-weight: 700;
	color: var(--navy); margin: 0 0 14px 0; line-height: 1.2;
}
.sidebar-cta h2, .sidebar-cta h3 {
	font-family: var(--fd); font-size: 22px; font-weight: 700;
	color: #fff; margin: 0 0 12px 0; line-height: 1.2;
}

/* Card with inline white-on-gradient (FAQ "Still Have Questions?") — keep white on h2 */
.sidebar-card[style*="linear-gradient"] h2,
.sidebar-card[style*="linear-gradient"] h3 { color: #fff; }

/* Contact page: calendar button at top of right sidebar */
.contact-info .sidebar-schedule { margin: 0 0 24px 0; }
.contact-info .sidebar-schedule .btn-p {
	width: 100%; box-sizing: border-box;
	text-align: center; display: block;
}

/* ==========================================================================
   ROUND 7 — WCAG AA contrast fixes (2026-04-24)
   - Navbar: give transparent state a dark translucent backdrop so white
     nav text passes contrast regardless of what's behind it.
   - Forminator: darken the required-asterisk and submit button
     (orange-brand = 3.58:1 fails AA → orange-h = 5.98:1 passes AA).
   ========================================================================== */

/* Navbar — always has enough background for white text contrast */
nav.site-nav {
	background: rgba(22,35,54, 0.85) !important;
	backdrop-filter: blur(6px);
	border-bottom: 1px solid rgba(255,255,255,0.06);
}
nav.site-nav.scrolled {
	background: rgba(22,35,54, 0.97) !important;
	border-bottom: 1px solid rgba(255,255,255,0.07);
}

/* Forminator form — darker orange passes AA (white on rgb(162,72,28) ≈ 6:1) */
.form-card .forminator-ui .forminator-required {
	color: var(--orange-h);
}
.form-card .forminator-ui .forminator-button-submit {
	background: var(--orange-h);
}
.form-card .forminator-ui .forminator-button-submit:hover {
	background: rgb(120, 50, 16); /* slightly darker on hover */
}

/* ==========================================================================
   ROUND 8 — animation polish + contact polish + block conversion support
   (2026-04-24)
   ========================================================================== */

/* Moved off inline <section style> during contact page → blocks conversion. */
.contact-section {
	background: linear-gradient(135deg, rgb(215,213,210) 0%, rgb(245,243,239) 50%, rgb(255,255,255) 100%);
}

/* Submit button now matches the Calendly .btn-p button (both orange).
   var(--orange) = rgb(188,89,38) → white on that = ~4.58:1 AA-compliant. */
.form-card .forminator-ui .forminator-button-submit { background: var(--orange); }
.form-card .forminator-ui .forminator-button-submit:hover { background: var(--orange-h); }
/* Keep the required asterisk on the darker variant for extra legibility. */
.form-card .forminator-ui .forminator-required { color: var(--orange-h); }

/* Trim the gap under the calendar button. */
.contact-info .sidebar-schedule { margin: 0 !important; }

/* Five Promises cards: smoother easing + per-card stagger. */
.guar-grid .seq-fu {
	will-change: opacity, transform;
	transition-duration: .7s;
	transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.guar-grid .seq-fu:nth-child(1) { transition-delay: 0ms; }
.guar-grid .seq-fu:nth-child(2) { transition-delay: 90ms; }
.guar-grid .seq-fu:nth-child(3) { transition-delay: 180ms; }
.guar-grid .seq-fu:nth-child(4) { transition-delay: 270ms; }
.guar-grid .seq-fu:nth-child(5) { transition-delay: 360ms; }

/* Extend existing sidebar heading rules to also style h2 (heading-hierarchy pass
   changed these from h3 to h2). */
.info-block h2, .info-block h3 {
	font-family: var(--fd); font-size: 22px; font-weight: 700;
	color: var(--navy); margin: 0 0 20px 0;
}
.guarantee-strip h2, .guarantee-strip h3 {
	font-family: var(--fd); font-size: 20px; font-weight: 700;
	color: var(--navy); margin: 0 0 16px 0;
}

/* Block-converted contact page: wp:group wrappers emit extra classes, ensure
   the flex layout kicks in on info-row and its icon/label/value children. */
.contact-info .info-block.wp-block-group,
.contact-info .guarantee-strip.wp-block-group,
.form-card.wp-block-group,
.contact-info.wp-block-group { display: block; }
.info-row.wp-block-group { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.info-row.wp-block-group:last-child { border-bottom: none; }
/* The inner <div> holding label + value (was a plain <div>, now wp:group). */
.info-row.wp-block-group > .wp-block-group { display: block; flex: 1; }
.info-row .info-label { margin: 0 0 2px 0; }
.info-row .info-value { margin: 0; }

/* ==========================================================================
   ROUND 9 — helpers used by block-converted pages (2026-04-24)
   ========================================================================== */

/* Blog section heading (was an inline-styled div in wp:html) */
.blog-section-title {
	font-family: var(--fd); font-size: 48px; font-weight: 800;
	color: var(--navy); line-height: 1; margin: 0 0 40px 0;
}
@media (max-width: 768px) { .blog-section-title { font-size: 36px; margin-bottom: 28px; } }

/* Sidebar card list links (were inline-styled anchors) */
.sidebar-card ul li a { color: var(--navy); text-decoration: none; }
.sidebar-card ul li a:hover { color: var(--orange-brand); }

/* GAF badge image wrapper (wp:image replaces a styled <img>) */
.gaf-badge-img { max-width: 150px; margin: 0 auto 14px auto; }
.gaf-badge-img img { width: 100%; display: block; }

/* wp:group wrappers get layout classes we don't want to cascade onto the visual
   cards — keep their CSS-defined display modes. */
.blog-grid.wp-block-group,
.prose-sec.wp-block-group,
.prose-sidebar.wp-block-group,
.blog-main.wp-block-group { display: block; }

/* ==========================================================================
   ROUND 9 — sidebar-card-dark variant (replaces inline gradient style)
   ========================================================================== */

/* FAQ "Still Have Questions?" card — was an inline-styled sidebar-card; now a class. */
.sidebar-card.sidebar-card-dark {
	background: linear-gradient(135deg, rgb(8,14,26) 0%, rgb(22,35,54) 50%, rgb(46,66,92) 100%);
	border: none;
}
.sidebar-card.sidebar-card-dark h2,
.sidebar-card.sidebar-card-dark h3 { color: #fff; }
.sidebar-card.sidebar-card-dark p { color: var(--text-on-navy); }
.sidebar-card-cta { margin: 0; }
.sidebar-card-cta .btn-p { display: block; text-align: center; }

/* ==========================================================================
   ROUND 9 — Roofing Types page helpers (replaces inline styles) (2026-04-24)
   ========================================================================== */

/* Section headings (were inline-styled divs) */
.types-intro-hl { font-family: var(--fd); font-size: 44px; font-weight: 800; color: #fff; line-height: 1; margin: 0 0 18px 0; }
.types-sec-hl   { font-family: var(--fd); font-size: 52px; font-weight: 800; color: var(--navy); line-height: 1; margin: 0 0 8px 0; }
.colors-sec-hl  { font-family: var(--fd); font-size: 48px; font-weight: 800; color: var(--navy); line-height: 1; margin: 0 0 14px 0; }
@media (max-width: 768px) {
	.types-intro-hl, .types-sec-hl, .colors-sec-hl { font-size: 36px; }
}

/* Section bg wrappers (were inline-styled <section>s) */
.types-sec  { padding: 72px 0; background: linear-gradient(135deg, rgb(215,213,210) 0%, rgb(245,243,239) 50%, rgb(255,255,255) 100%); }
.colors-sec { padding: 72px 0; background: #fff; }
.colors-inner { text-align: center; }
.colors-sec-lead { font-size: 19px; color: var(--text-muted); max-width: 1100px; line-height: 1.65; margin: 0 auto 24px auto; }
.colors-sec-note { font-size: 17px; color: var(--text-muted); margin-top: 20px; font-style: italic; text-align: center; }

/* Types intro lead paragraphs (were inline-styled) */
.types-intro-lead { font-size: 19px; color: var(--text-on-navy); line-height: 1.72; margin: 0 0 16px 0; }
.types-intro-lead:last-child { margin-bottom: 0; }

.types-sec-lead { font-size: 19px; color: var(--text-muted); max-width: 580px; line-height: 1.65; margin: 0 0 32px 0; }

/* Swatch color chips (were inline background) */
.swatch-chip.swatch-coastal-grays   { background: #8a9099; }
.swatch-chip.swatch-classic-whites  { background: #e8e6e2; }
.swatch-chip.swatch-deep-charcoals  { background: #3a3c3e; }
.swatch-chip.swatch-earth-tones     { background: #7a6a58; }
.swatch-chip.swatch-custom-designer { background: linear-gradient(135deg, #6b8a6b, #8aaa6b, #6b7a8a); }

/* Type-card CTA button (replaces inline-styled <div> wrapper) */
.type-card-cta { padding: 20px 28px; }
.type-card-cta .btn-p.btn-p-sm { font-size: 17px; padding: 12px 24px; }

/* Image in service-area section (replaces inline styles on <img>) */
.area-sec-img img { width: 100%; height: 360px; object-fit: cover; border-radius: 10px; }

/* Ensure type-card-img preserves object-fit on block-converted pages */
.type-card .type-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* wp:group wrappers shouldn't override page-section display on these */
.types-intro.wp-block-group,
.types-sec.wp-block-group,
.colors-sec.wp-block-group,
.area-sec.wp-block-group { display: block; }
.type-grid.wp-block-group { /* keep CSS-grid behavior from .type-grid */ }

/* body-text helper for plain lead/paragraph blocks */
.body-text { font-size: 19px; color: var(--text-body); line-height: 1.65; margin: 0 0 16px 0; }
.body-text:last-child { margin-bottom: 0; }

/* ==========================================================================
   ROUND 10 — contact sidebar gap/FA, widget section for GAF pages,
   type-card-img as wp:image (2026-04-24)
   ========================================================================== */

/* Contact sidebar: restore flex gap that wp-block-group "is-layout-flow" was
   flattening. Use 25px spacing per request. */
.contact-info,
.contact-info.wp-block-group {
	display: flex !important;
	flex-direction: column !important;
	gap: 25px !important;
}
.contact-info > * { margin-top: 0 !important; margin-bottom: 0 !important; }

/* info-icon now renders a Font Awesome <i> directly instead of wrapping a raw SVG.
   Keep the 36px sized circle slot; FA icon inherits font-size for its glyph. */
.info-icon {
	width: 36px; height: 36px; flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 18px; color: var(--orange-brand); line-height: 1;
}
.info-icon::before { line-height: 1; }

/* type-card-img is now a <figure class="wp-block-image type-card-img"> on
   Roofing Types. Preserve the card image slot size/shape. */
.type-card .type-card-img.wp-block-image {
	margin: 0; overflow: hidden;
	/* keep original aspect and fill the card header area */
}
.type-card .type-card-img.wp-block-image img {
	width: 100%; height: 220px; object-fit: cover; display: block;
}

/* GAF pages — replace the inline-styled <section> with a reusable class. */
.widget-section {
	padding: 72px 0;
	background: linear-gradient(135deg, rgb(215,213,210) 0%, rgb(245,243,239) 50%, rgb(255,255,255) 100%);
}
.widget-cta { margin-top: 24px; }

/* ==========================================================================
   ROUND 11 — Blog Query Loop styling (2026-04-24)
   Makes wp:query output look like the old static .blog-card grid.
   ========================================================================== */

/* Query block + post template list: strip default <ul> styling, keep grid. */
.blog-query.wp-block-query { margin: 0; }
.wp-block-post-template.blog-grid,
.wp-block-post-template.blog-grid-sidebar {
	list-style: none; padding: 0; margin: 40px 0 0 0;
}
.wp-block-post-template.blog-grid > li,
.wp-block-post-template.blog-grid-sidebar > li {
	list-style: none; margin: 0; padding: 0;
}

/* Each <li class="wp-block-post"> — let the blog-card group inside it be the
   visible card, neutralize any default padding/margin on the post wrapper. */
.wp-block-post-template.blog-grid > li > .wp-block-group.blog-card {
	/* inherits .blog-card grid styles already defined */
}

/* Post featured image slot — our .blog-card-img position:relative already applies.
   wp-block-post-featured-image wraps in a <figure>; ensure margin:0 so it fills. */
.blog-card .wp-block-post-featured-image.blog-card-img {
	margin: 0; position: relative; overflow: hidden;
	min-height: 180px;
}
.blog-card .wp-block-post-featured-image.blog-card-img a,
.blog-card .wp-block-post-featured-image.blog-card-img img {
	display: block; width: 100%; height: 100%;
}
.blog-card .wp-block-post-featured-image.blog-card-img img {
	object-fit: cover; position: absolute; inset: 0;
}

/* post-terms (category) — render as the orange-tinted pill. */
.blog-card .blog-card-tag { margin: 0 0 12px 0; }
.blog-card .blog-card-tag a {
	display: inline-block;
	font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--orange-text); background: var(--orange-bg);
	padding: 4px 10px; border-radius: 3px;
	text-decoration: none;
}
.blog-card .blog-card-tag a:hover { background: var(--orange-h); color: #fff; }

/* post-title — heading + linked, match .blog-card-title look. */
.blog-card h3.blog-card-title,
.blog-card h2.blog-card-title,
.blog-card .blog-card-title {
	font-family: var(--fd); font-size: 24px; font-weight: 700;
	color: var(--navy); line-height: 1.2; margin: 0 0 10px 0;
}
.blog-card .blog-card-title a {
	color: var(--navy); text-decoration: none; transition: color .18s;
}
.blog-card .blog-card-title a:hover { color: var(--orange-brand); }

/* post-excerpt */
.blog-card .blog-card-excerpt { margin: 0; font-size: 17px; color: var(--text-muted); line-height: 1.62; }
.blog-card .blog-card-excerpt p { margin: 0; }
.blog-card .blog-card-excerpt .wp-block-post-excerpt__more-link { display: none; }

/* Whole-card hover — apply via group instead of the old <a>-wrapped card. */
.blog-card { cursor: default; transition: transform .22s, box-shadow .22s; }
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(22,35,54,0.1); }

/* Pagination */
.blog-pagination.wp-block-query-pagination {
	margin-top: 40px; padding-top: 24px;
	border-top: 1px solid var(--border);
	align-items: center; gap: 20px;
}
.blog-pagination .wp-block-query-pagination-previous,
.blog-pagination .wp-block-query-pagination-next {
	color: var(--orange-h); text-decoration: none; font-weight: 600; font-size: 16px;
}
.blog-pagination .wp-block-query-pagination-previous:hover,
.blog-pagination .wp-block-query-pagination-next:hover { color: var(--orange-brand); }
.blog-pagination .wp-block-query-pagination-numbers { color: var(--text-muted); font-size: 16px; }
.blog-pagination .wp-block-query-pagination-numbers a { color: var(--navy); text-decoration: none; margin: 0 4px; }
.blog-pagination .wp-block-query-pagination-numbers a:hover { color: var(--orange-brand); }
.blog-pagination .wp-block-query-pagination-numbers .page-numbers.current { color: var(--orange-brand); font-weight: 700; }

/* ==========================================================================
   ROUND 12 — Home carousel via wp:gallery (2026-04-24)
   The gallery is the scrolling track; prev/next/dots buttons are siblings
   positioned around it.
   ========================================================================== */

/* Reset wp:gallery defaults so it renders as a flex row carousel. */
.carousel-track.wp-block-gallery,
.carousel-track.wp-block-gallery.has-nested-images {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform;
	grid-template-columns: unset !important;
}
.carousel-track.wp-block-gallery > .wp-block-image {
	flex: 0 0 33.3333%;
	max-width: 33.3333%;
	width: 33.3333% !important;
	margin: 0 !important;
	padding: 0 12px !important;
	box-sizing: border-box !important;
}
.carousel-track.wp-block-gallery > .wp-block-image figcaption { display: none; }
.carousel-track.wp-block-gallery > .wp-block-image img {
	width: 100% !important; height: 260px !important;
	object-fit: cover; display: block;
	border-radius: 8px;
	cursor: pointer;
	transition: transform .25s, box-shadow .25s;
}
.carousel-track.wp-block-gallery > .wp-block-image img:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(22,35,54,0.18);
}

/* Viewport clips overflow so the translated track shows ~3 slides at once. */
.carousel-viewport { overflow: hidden; width: 100%; }

@media (max-width: 1100px) {
	.carousel-track.wp-block-gallery > .wp-block-image {
		flex: 0 0 50%; max-width: 50%; width: 50% !important;
	}
}
@media (max-width: 768px) {
	.carousel-track.wp-block-gallery > .wp-block-image {
		flex: 0 0 100%; max-width: 100%; width: 100% !important;
	}
}

/* ==========================================================================
   ROUND 13 — color !important, remove bullet dividers globally, small
   spacing fixes (2026-04-24)
   ========================================================================== */

/* "The right roof..." was rendering as navy/muted — force white. */
.types-intro-hl { color: #fff !important; }

/* Section spacing tidy — give the types-intro more breathing room. */
.types-intro { padding: 64px 0 !important; }
.types-intro .grid-2col-center {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}
@media (max-width: 860px) {
	.types-intro .grid-2col-center { grid-template-columns: 1fr; gap: 24px; }
}

/* Remove bullet dividers globally on sidebar lists + prose lists — they were
   adding lines between every bullet. */
.sidebar-card ul li,
.sidebar-card ul li:first-child,
.sidebar-card ul li:last-child,
.prose-body ul li,
.prose-body ul li:first-child,
.prose-body ol li,
.prose-body ol li:first-child {
	border-top: none !important;
	border-bottom: none !important;
}

/* Swatches: reinforce with !important so the color can't be swept away by a
   later rule, and bump chip size a touch for prominence. */
.swatch-chip { width: 96px !important; height: 96px !important; }
.swatch-chip.swatch-coastal-grays   { background: #8a9099 !important; }
.swatch-chip.swatch-classic-whites  { background: #e8e6e2 !important; }
.swatch-chip.swatch-deep-charcoals  { background: #3a3c3e !important; }
.swatch-chip.swatch-earth-tones     { background: #7a6a58 !important; }
.swatch-chip.swatch-custom-designer { background: linear-gradient(135deg, #6b8a6b 0%, #8aaa6b 50%, #6b7a8a 100%) !important; }

/* Blog layout: the post-template <ul> needs sensible spacing so cards don't
   look tight against the heading. */
.blog-main .wp-block-post-template.blog-grid { margin: 24px 0 0 0; }
.blog-main .wp-block-post-template.blog-grid-sidebar > li + li { margin-top: 28px; }

/* ==========================================================================
   ROUND 14 — editor padding, carousel CSS specificity, Blog/FAQ/GAF spacing,
   misc polish (2026-04-24)
   ========================================================================== */

/* ---- CAROUSEL: outrank wp-block-gallery.columns-3.is-cropped rules ---- */
.wp-block-gallery.carousel-track,
.wp-block-gallery.carousel-track.has-nested-images,
.wp-block-gallery.carousel-track.is-cropped,
.wp-block-gallery.carousel-track.columns-3,
.wp-block-gallery.carousel-track.columns-3.is-cropped {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 0 !important;
	grid-template-columns: unset !important;
	transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform;
	margin: 0 !important;
	padding: 0 !important;
}

.wp-block-gallery.carousel-track > .wp-block-image,
.wp-block-gallery.carousel-track.has-nested-images > .wp-block-image,
.wp-block-gallery.carousel-track.is-cropped > .wp-block-image,
.wp-block-gallery.carousel-track.columns-3 > .wp-block-image,
.wp-block-gallery.carousel-track.columns-3.is-cropped > .wp-block-image {
	flex: 0 0 33.3333% !important;
	max-width: 33.3333% !important;
	width: 33.3333% !important;
	margin: 0 !important;
	padding: 0 12px !important;
	box-sizing: border-box !important;
}

@media (max-width: 1100px) {
	.wp-block-gallery.carousel-track > .wp-block-image,
	.wp-block-gallery.carousel-track.columns-3.is-cropped > .wp-block-image {
		flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important;
	}
}
@media (max-width: 768px) {
	.wp-block-gallery.carousel-track > .wp-block-image,
	.wp-block-gallery.carousel-track.columns-3.is-cropped > .wp-block-image {
		flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important;
	}
}

/* ---- GAF pages: more breathing room between header + iframe + footer ---- */
.widget-section { padding: 120px 0 !important; }

/* ---- Blog: tighten rhythm in the main column ---- */
.blog-main.wp-block-group { --wp--style--block-gap: 16px; }
.blog-section-title { margin: 8px 0 20px 0 !important; }
.blog-main .eyebrow { margin-bottom: 0 !important; }

/* Blog card titles: navy (the wp-block-heading base style was overriding) */
.blog-card .blog-card-title,
.blog-card h3.blog-card-title,
.blog-card .blog-card-title a {
	color: var(--navy) !important;
}
.blog-card .blog-card-title a:hover { color: var(--orange-brand) !important; }

/* ---- FAQ: nuke bullet dividers more aggressively ---- */
.sidebar-card ul li,
.sidebar-card ul li:first-child,
.sidebar-card ul li:last-child,
.prose-body ul li,
.prose-body ol li,
.prose-body ul li:first-child,
.prose-body ol li:first-child,
.prose-body ul li:last-child,
.prose-body ol li:last-child,
.faq-page-a ul li,
.faq-page-a ol li {
	border-top: none !important;
	border-bottom: none !important;
}

/* ---- Roofing Types: spacing in the intro section ---- */
.types-intro { padding: 80px 0 !important; }
.types-intro .grid-2col-center { gap: 72px; }

/* "The right roof..." — defensive rule in case wp-block-heading beats className */
.types-intro h2,
.types-intro .types-intro-hl,
.types-intro h2.types-intro-hl,
.types-intro h2.wp-block-heading {
	color: #fff !important;
}
.types-intro .types-intro-lead { color: var(--text-on-navy) !important; }

/* ---- Contact sidebar 25px: ensure override wins ---- */
.contact-info,
.contact-info.wp-block-group,
.contact-info.is-layout-flow,
.contact-info.is-layout-flow.wp-block-group {
	display: flex !important;
	flex-direction: column !important;
	gap: 25px !important;
}
.contact-info > * { margin-top: 0 !important; margin-bottom: 0 !important; }

/* ==========================================================================
   ROUND 14b — Carousel layout using only regular blocks (2026-04-24)
   Structure: wp:group.carousel-sec > wp:group.w.carousel-frame
              > wp:buttons.carousel-nav-prev
              > wp:gallery.carousel-track (with built-in lightbox)
              > wp:buttons.carousel-nav-next
              > wp:group.carousel-dots
   ========================================================================== */

/* The carousel frame is a position:relative container so buttons can anchor
   against the gallery without overlapping its content. */
.carousel-frame {
	position: relative;
	padding: 0 56px;
}

/* Prev/Next buttons — wp:button with circular icon styling. */
.carousel-nav-prev,
.carousel-nav-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	margin: 0 !important;
	z-index: 5;
	pointer-events: none; /* wrapper is transparent; child button catches click */
}
.carousel-nav-prev { left: 0; }
.carousel-nav-next { right: 0; }

.carousel-prev .wp-block-button__link,
.carousel-next .wp-block-button__link {
	pointer-events: auto;
	width: 44px; height: 44px;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center; justify-content: center;
	background: rgba(22,35,54,0.85) !important;
	color: #fff !important;
	border-radius: 999px !important;
	border: none !important;
	font-size: 0 !important; /* hide any stray label text */
	transition: background .18s, transform .12s;
}
.carousel-prev .wp-block-button__link:hover,
.carousel-next .wp-block-button__link:hover {
	background: var(--orange-h) !important;
	transform: scale(1.05);
}
.carousel-nav-icon { font-size: 18px; line-height: 1; }

/* Dots — JS populates; keep them inline, centered below. */
.carousel-dots {
	display: flex !important;
	justify-content: center;
	gap: 8px;
	margin-top: 28px !important;
	min-height: 12px;
}
.carousel-dot {
	width: 10px; height: 10px; border-radius: 50%;
	background: rgba(22,35,54,0.2); border: none; padding: 0;
	cursor: pointer; transition: background .18s, transform .18s;
}
.carousel-dot.active { background: var(--orange-brand); transform: scale(1.25); }
.carousel-dot:hover { background: var(--orange-h); }

/* ==========================================================================
   ROUND 15 — carousel contained, dots removed, prev/next chrome (2026-04-24)
   ========================================================================== */

/* Constrain carousel to the .w container (1400px) and clip overflow so the
   translated gallery track only shows ~3 slides at a time. Also forces
   centering in case wp-block-group auto-margins get eaten. */
.carousel-frame {
	max-width: 1400px !important;
	margin: 0 auto !important;
	padding: 0 76px !important;       /* extra side padding to make room for nav buttons */
	position: relative;
	overflow: hidden;
}

/* Prev/Next buttons — now plain <button> elements inside wp:html blocks */
.carousel-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px; height: 44px;
	border-radius: 999px;
	border: none;
	background: rgba(22,35,54,0.85);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	line-height: 1;
	transition: background .18s, transform .12s;
	z-index: 5;
}
.carousel-btn:hover {
	background: var(--orange-h);
	transform: translateY(-50%) scale(1.05);
}
.carousel-btn.carousel-prev { left: 16px; }
.carousel-btn.carousel-next { right: 16px; }

@media (max-width: 600px) {
	.carousel-frame { padding: 0 56px !important; }
	.carousel-btn { width: 38px; height: 38px; font-size: 15px; }
}

/* ==========================================================================
   ROUND 16 — lightbox overlay rendered via wp_footer (2026-04-24)
   ========================================================================== */

.rr-lightbox {
	position: fixed; inset: 0;
	background: rgba(8,14,24,0.92);
	backdrop-filter: blur(4px);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 10000;
}
.rr-lightbox.open { display: flex; }
.rr-lightbox .lightbox-img {
	max-width: 92vw; max-height: 88vh;
	display: block; margin: 0 auto;
	border-radius: 8px;
	box-shadow: 0 24px 72px rgba(0,0,0,0.5);
}
.rr-lightbox button {
	position: absolute;
	background: rgba(255,255,255,0.08);
	color: #fff;
	border: none; border-radius: 999px;
	width: 48px; height: 48px;
	display: flex; align-items: center; justify-content: center;
	font-size: 20px; line-height: 1;
	cursor: pointer;
	transition: background .18s, transform .12s;
}
.rr-lightbox button:hover { background: rgba(255,255,255,0.18); transform: scale(1.05); }
.rr-lightbox .lightbox-close { top: 24px; right: 24px; }
.rr-lightbox .lightbox-prev  { left: 24px; top: 50%; transform: translateY(-50%); }
.rr-lightbox .lightbox-next  { right: 24px; top: 50%; transform: translateY(-50%); }
.rr-lightbox .lightbox-prev:hover,
.rr-lightbox .lightbox-next:hover { transform: translateY(-50%) scale(1.05); }

@media (max-width: 600px) {
	.rr-lightbox button { width: 40px; height: 40px; font-size: 16px; }
	.rr-lightbox .lightbox-close { top: 14px; right: 14px; }
	.rr-lightbox .lightbox-prev  { left: 14px; }
	.rr-lightbox .lightbox-next  { right: 14px; }
}

/* ==========================================================================
   ROUND 17 — diff-cards animation polish (2026-04-24)
   ========================================================================== */

/* Same smooth stagger as guar-grid for the .diff-cards 01/02/03 boxes. */
.diff-cards .seq-fu {
	will-change: opacity, transform;
	transition-duration: .7s !important;
	transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.diff-cards .diff-card:nth-child(1) { transition-delay: 0ms !important; }
.diff-cards .diff-card:nth-child(2) { transition-delay: 110ms !important; }
.diff-cards .diff-card:nth-child(3) { transition-delay: 220ms !important; }

/* ==========================================================================
   Category / archive page — reuse the blog's prose-sec styling
   ========================================================================== */
.archive-page-hero .page-hero-eyebrow { text-transform: uppercase; }
.archive-page-hero .page-hl.wp-block-query-title { font-family: var(--fd); font-size: 64px; font-weight: 800; color: #fff; line-height: 1.05; margin: 0 0 10px 0; }
.archive-page-hero .wp-block-term-description p { font-size: 19px; color: var(--text-on-navy); max-width: 720px; margin: 0; }
@media (max-width: 768px) { .archive-page-hero .page-hl.wp-block-query-title { font-size: 40px; } }

/* ==========================================================================
   ROUND 18 — contact-wrap horizontal padding matches header/footer (2026-04-24)
   ========================================================================== */

/* The shorthand `padding: 72px 0` on .contact-wrap was wiping out .w's 56px
   horizontal padding, so the body boxes reached the 1400px edge while the
   header/footer content stayed 56px inset. Restore symmetric horizontal
   padding so everything lines up. */
.contact-wrap {
	padding: 72px 56px !important;
}
@media (max-width: 768px) {
	.contact-wrap { padding: 48px 20px !important; }
}

/* ==========================================================================
   ROUND 19 — clip horizontal overflow from .fl/.fr translateX reveals on
   mobile so the pre-reveal offset doesn't make the page horizontally
   scrollable (2026-04-24)
   ========================================================================== */

html, body {
	overflow-x: clip;
}

/* Fallback for browsers without overflow: clip support */
@supports not (overflow-x: clip) {
	html, body { overflow-x: hidden; }
}

/* ==========================================================================
   ROUND 20 — contact page mobile bleed fix (2026-04-24)
   ========================================================================== */

@media (max-width: 768px) {
	/* Tighten contact-wrap padding and force single column */
	.contact-wrap {
		padding: 40px 16px !important;
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}

	/* Cards inside: give them breathing room without overflowing */
	.form-card      { padding: 28px 20px !important; }
	.info-block     { padding: 24px 20px !important; }
	.guarantee-strip{ padding: 24px 20px !important; }

	/* Any child must fit its parent — box-sizing + max-width safety net */
	.contact-section,
	.contact-section *,
	.contact-wrap,
	.contact-wrap *,
	.form-card,
	.form-card *,
	.contact-info,
	.contact-info * {
		max-width: 100%;
		box-sizing: border-box;
	}
}

@media (max-width: 480px) {
	.contact-wrap  { padding: 28px 12px !important; gap: 18px !important; }
	.form-card     { padding: 24px 16px !important; }
	.info-block    { padding: 20px 16px !important; }
	.guarantee-strip { padding: 20px 16px !important; }
}

/* ==========================================================================
   ROUND 21 — kill all scroll-reveal + sequential animations on mobile so
   nothing translateX-es off-screen or flickers on touch devices (2026-04-24)
   ========================================================================== */

@media (max-width: 768px) {
	.rr-reveal .fu,
	.rr-reveal .fl,
	.rr-reveal .fr,
	.rr-reveal .fs,
	.rr-reveal .seq-fu,
	.rr-reveal .intro-list li,
	.rr-reveal .svc-list li,
	.rr-reveal .truth-list li,
	.rr-reveal .nofor-not li,
	.rr-reveal .nofor-yes li,
	.guar-grid .seq-fu,
	.guar-grid .g-card,
	.diff-cards .seq-fu,
	.diff-cards .diff-card {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		animation: none !important;
	}
}

/* Accessibility bonus: same treatment for users who've opted out of motion. */
@media (prefers-reduced-motion: reduce) {
	.rr-reveal .fu,
	.rr-reveal .fl,
	.rr-reveal .fr,
	.rr-reveal .fs,
	.rr-reveal .seq-fu,
	.rr-reveal .intro-list li,
	.rr-reveal .svc-list li,
	.rr-reveal .truth-list li,
	.rr-reveal .nofor-not li,
	.rr-reveal .nofor-yes li,
	.guar-grid .seq-fu,
	.diff-cards .seq-fu {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		animation: none !important;
	}
}

/* ==========================================================================
   ROUND 22 — accommodate the WP admin bar on the frontend (2026-04-24)
   When the user is logged in, body gets `.admin-bar` and WP's admin bar sits
   at the top at z-index 99999. Our fixed nav + mobile overlay need to make
   room so the admin bar doesn't clip them.
   ========================================================================== */

/* Desktop admin bar = 32px tall. */
body.admin-bar nav.site-nav { top: 32px; }

/* Admin bar becomes 46px at the WP-defined mobile breakpoint (782px). */
@media screen and (max-width: 782px) {
	body.admin-bar nav.site-nav { top: 46px; }
}

/* Mobile menu overlay — offset + shrink so it fits below the admin bar. */
@media (max-width: 1325px) {
	body.admin-bar .nav-links-wrap {
		top: 32px !important;
		height: calc(100vh - 32px) !important;
		height: calc(100dvh - 32px) !important;
		min-height: calc(100vh - 32px);
	}
}
@media screen and (max-width: 782px) {
	body.admin-bar .nav-links-wrap {
		top: 46px !important;
		height: calc(100vh - 46px) !important;
		height: calc(100dvh - 46px) !important;
		min-height: calc(100vh - 46px);
	}
}

/* ==========================================================================
   ROUND 23 — blog cards with no featured image (2026-08-03)
   .blog-card is a two-column grid (25% image / 1fr body), but
   wp:post-featured-image emits no markup at all for a post with no thumbnail
   (not even an empty figure). The body was therefore left as the only grid
   child, landed in the 25% image column, and the title and excerpt rendered
   in a narrow strip with the rest of the card blank.

   .blog-card-body is only ever :first-child when the image slot is absent, so
   spanning the full card in that case fixes the empty-image layout and leaves
   cards that do have a featured image untouched. 1 / -1 stays correct at the
   600px breakpoint where the card collapses to a single column.
   ========================================================================== */
.blog-card > .blog-card-body:first-child {
	grid-column: 1 / -1;
}