/* Kangaroof brand tokens + Tungsten webfont — Kadence port (2026-04-22) */

/* --- Tungsten @font-face (self-hosted) --- */
@font-face {
  font-family: 'Tungsten';
  src: url('/wp-content/uploads/fonts/Tungsten-Book.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tungsten';
  src: url('/wp-content/uploads/fonts/Tungsten-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tungsten';
  src: url('/wp-content/uploads/fonts/Tungsten-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tungsten';
  src: url('/wp-content/uploads/fonts/Tungsten-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tungsten';
  src: url('/wp-content/uploads/fonts/Tungsten-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* --- Brand tokens --- */
:root {
  --kr-orange: #D14513;
  --kr-orange-dark: #A83310;
  --kr-ink: #262824;
  --kr-bg: #FFFFFF;
  --kr-muted: #6B6D6A;
  --kr-display: 'Tungsten', 'Oswald', 'Impact', sans-serif;
  --kr-body: 'Montserrat', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

/* --- Typography: display headings in Tungsten, body in Montserrat --- */
body,
p,
li,
input,
textarea,
button,
.wp-block-button__link {
  font-family: var(--kr-body);
  color: var(--kr-ink);
}
body {
  font-size: 18px;
  line-height: 1.6;
}
/* Session 8 — heading defaults scoped with :where()/:not() so Elementor
   (and ElementsKit) headings keep their per-page font-size / letter-spacing /
   text-transform rules. Specificity of :where(...) is 0, so Elementor's
   `.elementor-<id> .elementor-element.elementor-element-<hash> .elementor-heading-title`
   always wins. The :not() clauses additionally strip our transforms off any
   heading rendered through Elementor / ElementsKit / swiper slide titles so the
   hero subtitle isn't force-uppercased. */
:where(h1, h2, h3, h4, h5, h6, .wp-block-heading, .has-display-font-family) {
  font-family: var(--kr-display);
  line-height: 1.05;
}
body :where(h1, h2, h3, h4, h5, h6):not(.elementor-heading-title):not(.ekit-heading--title):not(.slide-title) {
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--kr-ink);
}
:where(h1):not(.elementor-heading-title):not(.ekit-heading--title) { font-size: clamp(2.6rem, 5vw, 4.5rem); font-weight: 900; }
:where(h2):not(.elementor-heading-title):not(.ekit-heading--title) { font-size: clamp(2.1rem, 3.6vw, 3.2rem); font-weight: 700; }
:where(h3):not(.elementor-heading-title):not(.ekit-heading--title) { font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 600; }

a { color: var(--kr-orange); text-decoration: none; }
a:hover { color: var(--kr-orange-dark); text-decoration: underline; }

/* --- Buttons --- */
.wp-block-button__link,
.kb-button,
.kadence-advanced-btn-link,
button:not([class*='wp-']):not(.components-button) {
  background: var(--kr-orange) !important;
  color: #fff !important;
  border-radius: 2px;
  padding: 14px 28px;
  font-family: var(--kr-display);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background 0.15s ease;
}
.wp-block-button__link:hover,
.kb-button:hover,
.kadence-advanced-btn-link:hover {
  background: var(--kr-orange-dark) !important;
  color: #fff !important;
}

/* --- Helpers --- */
.kr-ink { color: var(--kr-ink) !important; }
.kr-orange { color: var(--kr-orange) !important; }
.kr-bg-ink { background-color: var(--kr-ink) !important; color: #fff !important; }
.kr-bg-orange { background-color: var(--kr-orange) !important; color: #fff !important; }

/* =========================================================================
   Session 6 — P1 visual-parity patches for the HTML-injected mirror pages
   ========================================================================= */

/* P1.1 — Kill Kadence's default page-title hero. Live site (Jupiter X) never
   showed it; pages flow straight into their own hero. */
.entry-hero.page-hero-section,
.site .entry-hero,
.site .page-title-style-hero {
  display: none !important;
}

/* P1.3 — Stop our brand-token global `color: var(--kr-ink)` from overriding
   per-page Elementor widget colors. Elementor widgets set their own color on
   .elementor-widget-* / .elementor-widget-container (often white inside dark
   hero containers). We were forcing every <p>/<li> back to #262824 because the
   typography rule above is too broad. Restore inheritance inside Elementor. */
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li,
.elementor-widget-heading,
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-icon-list .elementor-icon-list-text,
.elementor-widget-icon-box .elementor-icon-box-content *,
.elementor-widget-image-box .elementor-image-box-content *,
.elementor-widget-button .elementor-button-text {
  color: inherit;
}

/* P1.4 — The mirror's embedded contact / consultation forms are WPForms
   instances. WPForms' own stylesheet (which contains
   `.wpforms-label-hide { display: none }`) isn't loaded because WPForms
   isn't installed on this site. Replicate the one rule that matters so the
   imported labels stop overlapping their placeholders. */
.wpforms-label-hide,
.wpforms-field-label.wpforms-label-hide,
.wpforms-field .wpforms-label-hide {
  display: none !important;
}
/* Visual hygiene for the un-styled imported WPForms inputs */
.wpforms-form .wpforms-field input[type="text"],
.wpforms-form .wpforms-field input[type="email"],
.wpforms-form .wpforms-field input[type="tel"],
.wpforms-form .wpforms-field textarea,
.wpforms-form .wpforms-field select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-family: var(--kr-body);
  font-size: 16px;
  border-radius: 2px;
}
.wpforms-form .wpforms-field input::placeholder,
.wpforms-form .wpforms-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

/* Description / HTML / consent paragraphs inside WPForms render in white so
   they're legible on the dark form backgrounds the mirror uses. */
.wpforms-form .wpforms-field-html,
.wpforms-form .wpforms-field-html *,
.wpforms-form .wpforms-field-description,
.wpforms-form .gform-description,
.wpforms-form .wpforms-field-label-description {
  color: #fff !important;
}
/* The form's submit container is also our brand orange */
.wpforms-form .wpforms-submit {
  background: var(--kr-orange) !important;
  color: #fff !important;
  border: none;
  padding: 14px 28px;
  font-family: var(--kr-display);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.wpforms-form .wpforms-submit:hover {
  background: var(--kr-orange-dark) !important;
}

/* =========================================================================
   Session 6 — P3: Let injected Elementor content break out to viewport width
   =========================================================================
   Kadence wraps post_content in `.content-container.site-container` with
   max-width: 1290px + 24px horizontal padding. On the live site the sections
   are edge-to-edge because Jupiter X used a full-width template.

   Every one of our 51 pages is HTML-injected Elementor content, so we simply
   uncap the wrapper for the `.page` body class (WP always adds that to pages;
   blog posts get `.single .post` instead, so they're unaffected).

   Inside the uncapped wrapper, Elementor's own `.e-con-boxed` containers still
   cap themselves at ~1140px and center with auto margins, and `.e-con-full`
   sections go edge-to-edge — which is exactly the behavior on the live site. */
body.page .content-container.site-container,
body.page-template-default .content-container.site-container {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}
/* A handful of Kadence stylesheet rules pad .entry-content by default;
   zero them so Elementor's own section padding controls the inner gutter. */
body.page .entry-content,
body.page .entry-content-wrap,
body.page .content-wrap,
body.page .site-main,
body.page article.entry.content-bg {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* The Gutenberg core/html block wrapper doesn't need its default margin either. */
body.page .wp-block-html { margin: 0 !important; }


/* P1.2 (paths) — see copy-elementor-css.sh, which now also stages the Tungsten
   .woff2 files into uploads/2025/11/ and uploads/2025/12/ where the imported
   per-page Elementor CSS expects them via url(../../2025/12/Tungsten-*.woff2).
   No CSS change needed here; our @font-face block above already points at
   uploads/fonts/ (correct), and the per-page CSS will resolve once the date
   folders contain the fonts. */

/* -------------------------------------------------------------------------
   Home trust-badge / logo marquee strip (Elementor + Kadence)
   Live site used Jupiter X Raven "Content Marquee" with side fade overlays.
   Rebuilds often clip edges when a parent uses overflow:hidden or the strip
   is flush to the viewport with no gutter.

   In Elementor: select the SECTION that wraps the badge row → Advanced →
   CSS Classes → add: kr-trust-strip
   ------------------------------------------------------------------------- */
body.page .kr-trust-strip,
body.page .kr-trust-strip .e-con-inner,
body.page .kr-trust-strip .elementor-widget-wrap,
body.page .kr-trust-strip .elementor-widget-container {
  overflow-x: visible !important;
  overflow-y: visible !important;
}

body.page .kr-trust-strip {
  padding-left: clamp(12px, 3vw, 40px) !important;
  padding-right: clamp(12px, 3vw, 40px) !important;
}

body.page .kr-trust-strip img {
  max-height: 88px;
  width: auto;
  height: auto;
  object-fit: contain;
  vertical-align: middle;
}

/* If the strip uses Swiper / nested carousel, align slides vertically only.
   Do not set .swiper { overflow: visible } here — it often breaks loop marquees. */
body.page .kr-trust-strip .swiper-wrapper {
  align-items: center;
}

/* -------------------------------------------------------------------------
   Session 7 — OUR ROOFING PROCESS step-number circle.

   Mirror markup is <h4><span class="count">1</span>CONSULTATION</h4>. The
   live site defines .process .heading .count as an inline <style> in <head>,
   which our import-mirror-html.py discards when extracting <main>. Port the
   rule here so the number renders as an orange circle beside (not mashed
   against) the label.
   ------------------------------------------------------------------------- */
.process .heading .count {
  background: var(--kr-orange);
  width: 40px;
  height: 40px;
  border-radius: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 21px;
  margin-right: 15px;
}

/* -------------------------------------------------------------------------
   Session 7 — Hero "WE H(O)P TO IT" kangaroo bounce animation.

   Mirror markup (preserved when we extracted <main>):
     <h1 class="elementor-heading-title">WE H<span>O</span>P TO IT</h1>
   inside section.hero.

   On the live site the <span> gets:
     - an orange letter O (z-index 1),
     - a black horizontal mask over the middle of the O (:after, z-index 2),
     - the kangaroo image-161.webp on top, bouncing 10px every 0.7s (:before,
       z-index 3, animation: jump1).

   Image source: mirror file at wp-content/uploads/2025/12/image-161.webp is
   staged into the container by stage-missing-mirror-assets.sh (the script
   now scans this kadence CSS file for url() refs, so any file referenced
   here by basename and present in the mirror gets staged automatically).

   Without this block the "O" just shows as a plain letter, the title looks
   wider than the live version, and there's no mascot animation.
   ------------------------------------------------------------------------- */
.hero .main-heading span {
  color: var(--kr-orange);
  position: relative;
  z-index: 1;
}
.hero .main-heading span:before {
  content: "";
  position: absolute;
  top: 35px;
  width: 90%;
  background-image: url("/wp-content/uploads/2025/12/image-161.webp");
  background-repeat: no-repeat;
  height: 100%;
  background-size: 100%;
  animation: jump1 .7s ease-in-out alternate infinite;
  transform-origin: 50% 50%;
  z-index: 3;
}
.hero .main-heading span:after {
  content: "";
  background: #000;
  width: 60%;
  position: absolute;
  top: 50%;
  height: 47%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
}
@keyframes jump1 {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-10px); }
}

/* ---------------------------------------------------------------------------
   Session 8 — 2-row header typography (matches live divisionkangaroof.com)
   --------------------------------------------------------------------------- */
.site-bottom-header-wrap {
  /* Iter 4: Live is pure #000. Override the brand --kr-ink (#262824). */
  background: #000000;
}
.site-bottom-header-wrap .header-navigation .menu > li > a {
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 13px 11px;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 0;
}
.site-bottom-header-wrap .header-navigation .menu > li.current-menu-item > a,
.site-bottom-header-wrap .header-navigation .menu > li > a:hover {
  color: var(--kr-orange);
}

/* ---------------------------------------------------------------------------
   Session 8 — U5: Hide duplicate Kadence entry-title H1
   (Elementor pages supply their own H1 — Kadence entry-title is redundant)
   --------------------------------------------------------------------------- */
body.page .entry-hero .entry-header h1.entry-title,
body.page h1.entry-title,
body.page .entry-title-wrap {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   Session 8 — U6: Kadence Custom-Colors palette-14 leaks green onto brand-orange
   eyebrows / H2 rows. Force Kangaroof orange on any .has-palette-14-color target.
   --------------------------------------------------------------------------- */
.has-palette-14-color,
.wp-block-kadence-advancedheading.has-palette-14-color,
.kadence-heading-content.has-palette-14-color,
.elementor-widget .has-palette-14-color {
  color: var(--kr-orange) !important;
}
.has-palette-14-background-color {
  background-color: var(--kr-orange) !important;
}

/* ---------------------------------------------------------------------------
   Session 8 — U4 polish: orange active pill on current menu item (matches live's
   HOME orange background). Applies to bottom-row nav only.
   --------------------------------------------------------------------------- */
.site-bottom-header-wrap .header-navigation .menu > li.current-menu-item > a,
.site-bottom-header-wrap .header-navigation .menu > li.current-page-ancestor > a {
  background: var(--kr-orange);
  color: #fff !important;
}
.site-bottom-header-wrap .header-navigation .menu > li > a:hover {
  color: var(--kr-orange);
  background: transparent;
}

/* Social icons on black top strip */
.site-top-header-wrap .social-show-label-false .social-button {
  color: #fff;
}
/* Ensure main-header phone text is white on black bg */
.site-main-header-wrap .header-html {
  color: #fff;
}

/* ---------------------------------------------------------------------------
   Session 9 — Max Mega Menu brand polish (RESIDENTIAL + COMMERCIAL mega panels).
   MM's default theme is light grey; override to match brand: black bar with
   Tungsten white text, orange hover, dark panel with Montserrat sub-items +
   Tungsten column headings in brand orange.
   --------------------------------------------------------------------------- */

/* Nav bar items (top-level) — Iter 4: match live's Montserrat 14/600 (was Tungsten 18/700). */
#mega-menu-wrap-primary,
#mega-menu-wrap-primary .mega-menu {
  background: #000000 !important;
}
#mega-menu-wrap-primary .mega-menu > li.mega-menu-item > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  background: transparent !important;
  padding: 13px 11px !important;
  /* Iter 4: Max Mega Menu plugin DB-generated rule sets line-height 40px with
     higher specificity (2 IDs). Force 18px to cancel the 66px row stretch and
     yield the live 44px bottom row (13+18+13=44). */
  line-height: 18px !important;
  height: auto !important;
}
#mega-menu-wrap-primary .mega-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
#mega-menu-wrap-primary .mega-menu > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link,
#mega-menu-wrap-primary .mega-menu > li.mega-menu-item > a.mega-menu-link:hover {
  background: var(--kr-orange) !important;
  color: #ffffff !important;
}

/* Mega panel — Iter 4: pure #000 to match the rest of the header. */
#mega-menu-wrap-primary .mega-menu > li.mega-menu-megamenu > ul.mega-sub-menu {
  background: #000000 !important;
  border-top: 2px solid var(--kr-orange);
  padding: 26px 32px !important;
}

/* Column headings (Roofing Services / Roofing Material) — Tungsten orange. */
#mega-menu-wrap-primary .mega-sub-menu li.mega-menu-column > a.mega-menu-link,
#mega-menu-wrap-primary .mega-sub-menu li.mega-menu-item.mega-disable-link > a.mega-menu-link {
  font-family: var(--kr-display, 'Tungsten', 'Oswald', sans-serif) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--kr-orange) !important;
  padding: 0 0 12px 0 !important;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(209, 69, 19, 0.35);
  cursor: default;
}

/* Sub-item links (Roof Inspection / Metal Roofs / etc.) — Montserrat white. */
#mega-menu-wrap-primary .mega-sub-menu li.mega-menu-item:not(.mega-menu-column):not(.mega-disable-link) > a.mega-menu-link,
#mega-menu-wrap-primary .mega-sub-menu ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link {
  font-family: var(--kr-body, 'Montserrat', sans-serif) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  background: transparent !important;
  padding: 8px 0 !important;
  letter-spacing: 0;
  text-transform: none;
}
#mega-menu-wrap-primary .mega-sub-menu li.mega-menu-item > a.mega-menu-link:hover {
  color: var(--kr-orange) !important;
  background: transparent !important;
}

/* Standard (non-mega) dropdown panels for EMERGENCY + EXTERIORS — dark + tight. */
#mega-menu-wrap-primary .mega-menu > li.mega-menu-flyout > ul.mega-sub-menu {
  background: var(--kr-ink) !important;
  border-top: 2px solid var(--kr-orange);
  min-width: 200px;
}
#mega-menu-wrap-primary .mega-menu > li.mega-menu-flyout > ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link {
  color: #ffffff !important;
  font-family: var(--kr-body, 'Montserrat', sans-serif) !important;
  font-size: 14px !important;
}
#mega-menu-wrap-primary .mega-menu > li.mega-menu-flyout > ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:hover {
  color: var(--kr-orange) !important;
  background: transparent !important;
}

/* Caret indicator on parents — keep visible but subtle. */
#mega-menu-wrap-primary .mega-menu > li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator:after {
  color: rgba(255, 255, 255, 0.7);
}
#mega-menu-wrap-primary .mega-menu > li.mega-menu-item-has-children > a.mega-menu-link:hover > span.mega-indicator:after {
  color: #ffffff;
}

/* ---------------------------------------------------------------------------
   Session 9 / D6 — Gravity Forms Orbital → WPForms-live visual parity.

   Evidence basis:
   - Sub-task A (label/button text): GF form 2 already has button="REQUEST FREE
     ESTIMATE" and textarea label="Message" — matching Drew's progress-log intent.
     Live WPForms mirror uses "Submit" / "Comment or Message" but Drew's note
     explicitly overrides qa-auditor's direction. No DB change needed.
   - Sub-task B (CSS): GF 2.10 ships the Orbital theme (markupVersion=2), which
     injects an inline <style> block setting --gf-color-primary:#204ce5 (blue)
     and --gf-radius:3px onto #gform_wrapper_2. Live WPForms form used:
       border: 1px solid rgba(0,0,0,0.25), border-radius:3px, bg:#fff,
       text: rgba(0,0,0,0.7), font-size:16px, height:43px, padding-h:14px.
       Button: #D14513 bg, border-radius:3px, font-size:17px, height:41px.
     Session 9's original block had border:rgba(255,255,255,0.2) — nearly
     invisible on white. Corrected to rgba(0,0,0,0.25) matching live spec.
     Also added --gf-color-primary override so focus rings + Orbital accent
     states render orange not blue.
   --------------------------------------------------------------------------- */

/* D6: Override Orbital's blue primary color CSS variables with brand orange.
   These vars drive focus rings, checked states, and any Orbital accent.
   Specificity: matches the inline style block's own selector form, so we
   need !important or a more specific selector. Using the wrapper ID selector. */
#gform_wrapper_2.gform-theme,
.gform_wrapper.gform-theme--orbital {
  --gf-color-primary: #D14513 !important;
  --gf-color-primary-rgb: 209, 69, 19 !important;
  --gf-color-primary-contrast: #ffffff !important;
  --gf-color-primary-darker: #A83310 !important;
  --gf-color-primary-lighter: #E5693A !important;
  --gf-color-in-ctrl-primary: #D14513 !important;
  --gf-color-in-ctrl-primary-rgb: 209, 69, 19 !important;
  --gf-color-in-ctrl-primary-contrast: #ffffff !important;
  --gf-color-in-ctrl-primary-darker: #A83310 !important;
  --gf-color-in-ctrl-primary-lighter: #E5693A !important;
  --gf-ctrl-border-color-focus: #D14513 !important;
  --gf-radius: 3px !important;
}

/* Hide GF's own title/description rows (we render "Schedule Consultation"
   as an Elementor heading just above the shortcode). */
.gform_wrapper .gform_heading,
.gform_wrapper .gfield_description.gfield_validation_message_nocontain {
  display: none;
}

/* Hide label + required asterisks universally on our forms (all fields use
   hidden_label placement — belt and suspenders so GF update doesn't flip
   individual fields back to visible labels). */
.gform_wrapper .gfield_label,
.gform_wrapper .gfield_required,
.gform_wrapper .gfield_label .gfield_required {
  display: none !important;
}

/* D6: Input / textarea / select — match live WPForms spec:
   border: 1px solid rgba(0,0,0,0.25), border-radius:3px, bg:#fff,
   text:rgba(0,0,0,0.7), font-size:16px, height:43px, padding-h:14px.
   Corrected from the Session 9 error (border was rgba(255,255,255,0.2) —
   invisible on white backgrounds). */
.gform_wrapper .gfield input[type="text"],
.gform_wrapper .gfield input[type="email"],
.gform_wrapper .gfield input[type="tel"],
.gform_wrapper .gfield input[type="number"],
.gform_wrapper .gfield textarea,
.gform_wrapper .gfield select,
.gform_wrapper .ginput_container_select select,
.gform_wrapper .gfield .choices__inner {
  width: 100% !important;
  background: #ffffff !important;
  color: rgba(0, 0, 0, 0.7) !important;
  border: 1px solid rgba(0, 0, 0, 0.25) !important;
  border-radius: 3px !important;
  padding: 12px 14px !important;
  font-family: var(--kr-body, 'Montserrat', sans-serif) !important;
  font-size: 16px !important;
  line-height: 1.3;
  box-shadow: none !important;
  margin: 0;
  min-height: 43px;
}
.gform_wrapper .gfield textarea {
  min-height: 120px !important;
  resize: vertical;
}
/* D6: Focus state — orange ring matching brand instead of Orbital blue. */
.gform_wrapper .gfield input[type="text"]:focus,
.gform_wrapper .gfield input[type="email"]:focus,
.gform_wrapper .gfield input[type="tel"]:focus,
.gform_wrapper .gfield textarea:focus,
.gform_wrapper .gfield select:focus {
  border-color: #D14513 !important;
  outline: 0 !important;
  box-shadow: 0 0 0 2px rgba(209, 69, 19, 0.2) !important;
}
/* D6: Placeholder color matching live form rgba(0,0,0,0.7) but slightly
   lighter so it reads as placeholder context. */
.gform_wrapper .gfield input::placeholder,
.gform_wrapper .gfield textarea::placeholder {
  color: rgba(0, 0, 0, 0.45) !important;
  opacity: 1;
}
.gform_wrapper .gfield select option[value=""][disabled] {
  color: rgba(0, 0, 0, 0.45);
}

/* Spacing between field rows (live form has ~12-14px gap). */
.gform_wrapper .gform_fields {
  gap: 14px !important;
}
.gform_wrapper .gfield {
  margin: 0 !important;
  padding: 0 !important;
}

/* Consent paragraph (HTML field id=6) — white text on the dark hero bg.
 * Earlier rule was being overridden by Kadence's inherited heading color
 * (rgb 38,40,36 = #262824) because the .gfield_html itself didn't have
 * a direct color and inherited from body. Adding !important forces white
 * regardless of inheritance. (Drew flagged 2026-04-30 09:40 — disclaimer
 * rendered black on dark photo, unreadable.) */
.gform_wrapper .gfield.gfield--type-html .gfield_html,
.gform_wrapper .gfield_html.gfield_html_formatted {
  color: #ffffff !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  margin-top: 6px;
}
/* On pages where the form sits on a light background the consent text
   needs to be legible too — scope by ancestor section to keep both cases. */
.entry-content :where(.e-con-full, .site-container):not(.hero) .gform_wrapper
  .gfield.gfield--type-html .gfield_html {
  color: #262824;
}

/* D6: Submit button — match live WPForms: #D14513 bg, 3px radius,
   Tungsten display font, uppercase, full-width, ~41px height.
   Live used font-size:17px on WPForms; we keep 20px for Tungsten's
   proportions (Tungsten reads smaller at same px than sans-serif). */
.gform_wrapper .gform_footer {
  padding: 10px 0 0 0 !important;
  margin: 0 !important;
}
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_footer button[type="submit"],
.gform_wrapper .gform_footer .gform_button {
  width: 100% !important;
  display: block;
  background: #D14513 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 3px !important;
  padding: 12px 20px !important;
  font-family: var(--kr-display, 'Tungsten', 'Oswald', sans-serif) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 41px;
  transition: background-color 0.15s ease;
  box-shadow: none !important;
}
.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_footer button[type="submit"]:hover,
.gform_wrapper .gform_footer .gform_button:hover {
  background: #A83310 !important;
}

/* D6: Suppress Orbital's own button theming that may leak through via
   CSS vars — ensure our explicit rules win. */
.gform_wrapper .gform-theme--orbital .gform_footer .gform_button,
.gform-theme--orbital .gform_wrapper .gform_footer .gform_button {
  background-color: #D14513 !important;
  border-color: #D14513 !important;
}

/* Validation error states — keep tight, don't blow out the form width. */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
  border-color: #D14513 !important;
  background-color: #fff5f0 !important;
}
.gform_wrapper .gfield_validation_message {
  background: transparent !important;
  border: none !important;
  color: #D14513 !important;
  font-size: 12px;
  padding: 4px 0 0 0 !important;
}

/* Phase 2 deferrals for D6:
   - Choices.js dropdown (select-service) custom styling: Orbital's choicesjs
     theme may still show blue on hover; full override requires targeting
     .choices__list .choices__item--highlighted which needs per-theme work.
   - Mobile touch target audit: button height at 41px may be marginal at
     390px viewport — defer to Phase 2 a11y pass.
   - The consent text color rule above uses a complex :not() selector that
     may not function in older Safari; Phase 2 should test and simplify.
*/

/* ---------------------------------------------------------------------------
   Session 10 — D1/D11: Suppress Kadence entry-header on home page (page-id-6).
   Kadence outputs <header class="entry-header"><h1 class="entry-title">Home</h1></header>
   above the Elementor hero. JupiterX suppressed all page titles on the live site.
   The existing body.page rule in Session 8 covers all pages at the H1 level;
   this rule suppresses the wrapper element on home specifically so no empty gap
   remains above the hero. Scoped to page-id-6 so other pages are unaffected.
   --------------------------------------------------------------------------- */
body.page-id-6 .entry-header {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   Session 10 — D4: Fix header CTA button padding to match live site.
   Live site renders the FREE ESTIMATE button at padding: 10px 15px.
   Local Kadence default for button-size-medium is 6.4px 16px (from the
   Kadence stylesheet button-size-medium rule). The button class on the
   header element is .button.header-button.button-size-medium. Scoped to
   #main-header to avoid touching Elementor content buttons.
   --------------------------------------------------------------------------- */
#main-header .header-button.button-size-medium {
  padding: 10px 15px !important;
}

/* ---------------------------------------------------------------------------
   Session 10 — D10: Un-uppercase four H2 raven-cta__title cards.
   The per-page Elementor CSS (post-15476.css) sets
   .raven-cta__title { text-transform: uppercase } site-wide.
   On the live site the four H2 card titles render in title case:
     - "Experienced Roofers You Can Count On"
     - "How to Choose Between Roofing Companies"
     - "Trusted Roofing Contractor in Cornelia, GA"
     - "Additional Services Available in Cornelia"
   The other 5 raven-cta__title elements on this page are H3s (roofing
   material cards: Asphalt Shingles, Metal Roofs, Wood Shakes, Modified
   Bitumen, Roof Coating) which are already uppercase on the live site and
   are correctly styled by the per-page CSS — they are NOT affected by this
   h2-scoped rule.
   Selector targets exactly these four H2s with no element-ID dependency.
   --------------------------------------------------------------------------- */
h2.raven-cta__title {
  text-transform: none !important;
}

/* ---------------------------------------------------------------------------
   Session 10 (Iter 1) — NEW-1/NEW-2: Dark top-bar row with "FOLLOW US ON"
   and four social icon links (Instagram, Facebook, YouTube, Google Maps).
   Rendered via Kadence "html2" widget in the top header row.
   Sourced from live mirror JetMenu afterTemplateData block id=15281.
   Social URLs: instagram.com/divisionkangaroof/, facebook.com/DivisionKangaroof/,
   youtube.com/channel/UCn8XmE1PcV1bVXwZiOCGFNQ, google.com/maps/Division+Kangaroof.
   --------------------------------------------------------------------------- */
.kr-topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0;
  width: 100%;
  /* Top strip bg now set via Kadence Customizer (#000000) — no CSS override. */
}
/* Iter 4: Live FOLLOW US ON heading is Tungsten 21px 600 white. The earlier
   32px/500 was from the Tungsten Semibold default theme_mods; size it down.
   !important on color because a late-loaded Kadence h4 rule sets rgb(38,40,36)
   at equal specificity and wins in source order otherwise. */
.kr-topbar__heading {
  font-family: 'Tungsten', 'Oswald', 'Impact', sans-serif !important;
  font-size: 21px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  color: #ffffff !important;
  border-left: 4px solid #D14513;
  padding-left: 10px;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.kr-topbar__socials {
  display: flex;
  gap: 5px;
}
/* Iter 4: Live social icons — 24x24 black squares with 10% rounded corners,
   gray FA glyphs, NO border (was dotted orange in Session 8; removed to match live). */
.kr-topbar__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #000000;
  border: none;
  border-radius: 10%;
  color: #69727d;
  text-decoration: none;
  font-size: 12px;
  transition: color 0.15s ease, background 0.15s ease;
}
.kr-topbar__socials a:hover {
  background: #D14513;
  color: #ffffff;
  text-decoration: none;
}
/* Iter 4: All three header rows share #000 bg. Values also set via Kadence
   Customizer, but we add these selectors (without !important) so any stray
   theme default is overridden predictably. */
.site-header-row-container-inner,
.site-header-inner-wrap,
.site-top-header-wrap,
.site-main-header-wrap,
.site-bottom-header-wrap {
  background: #000000;
}

/* ---------------------------------------------------------------------------
   Session 10 (Iter 2) — Phone block via Kadence native social element.
   The "html" slot is now in top_center (topbar). Main_right uses Kadence's
   native "social" element (id="phone", show_label:true, source:"svg").
   Kadence renders: <a class="social-button social-link-phone">
                      <svg>...</svg>
                      <span class="social-label">(706) 768-8491</span>
                    </a>
   Style to match live: orange SVG icon, Tungsten font for number, no underline.
   --------------------------------------------------------------------------- */
.site-main-header-wrap .header-social-wrap {
  display: inline-flex;
  align-items: center;
}
.site-main-header-wrap .header-social-inner-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.site-main-header-wrap .social-link-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  /* Iter 4c: Kadence's default .social-button sets a rgb(237,242,247) pill bg
     that looked like a gray rectangle behind the phone on our black header.
     Force transparent to match live. */
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.site-main-header-wrap .social-link-phone svg,
.site-main-header-wrap .social-link-phone .social-icon-custom-svg {
  fill: #ffffff;
  width: 25px;
  height: 25px;
  flex-shrink: 0;
}
/* Iter 4: Live phone label is Montserrat 28/600 white (not Tungsten). */
.site-main-header-wrap .social-link-phone .social-label {
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0;
  color: #ffffff;
  white-space: nowrap;
}
.site-main-header-wrap .social-link-phone:hover .social-label {
  color: #D14513;
}

/* ---------------------------------------------------------------------------
   Session 10 (Iter 1) → Session 14: Kill 112px gap above hero AND 80px gap
   below content (above the footer) on ALL pages.
   Root cause: #primary.content-area carries Kadence defaults
     margin-top: 80px + margin-bottom: 80px,
     plus .entry-content-wrap has padding-top: 32px.
   That's 112px above the hero and 80px white strip between content and
   footer. Originally scoped to body.page-id-6 (home only); broadened to
   body.page in Session 14 after Drew confirmed every subpage shows the
   same gaps both above and below.
   --------------------------------------------------------------------------- */
body.page #primary { margin-top: 0 !important; margin-bottom: 0 !important; }
body.page .entry-content-wrap { padding-top: 0 !important; }

/* ---------------------------------------------------------------------------
   Iter 4 — "FEEL FREE TO CONTACT US" section (e67dcce) layout rules.

   Root cause: The section lives in a Jupiter-X footer template (post-5118)
   on live, so post-5118.css scopes all its layout rules with
   `.elementor-5118 .elementor-element.elementor-element-e67dcce`. On our
   rebuild the section renders inside the home page wrapper (.elementor-15476),
   so those scope-prefixed rules never match. Re-declare the critical
   custom-property + dimension rules without the scope prefix so they apply
   wherever the section is rendered.

   Before this fix: image 44d57c8 rendered at its natural 1080x1440, making
   the whole section 2078px tall. After: image constrained to 350px wide,
   b2c518d (image column) 35%, 295146f (form column) 65%, 03b3772 flex-row,
   section collapses to ~700-800px matching live.
   --------------------------------------------------------------------------- */
.elementor-element.elementor-element-e67dcce {
  --display: flex;
  --flex-direction: column;
  --padding-top: 50px;
  --padding-bottom: 50px;
  --padding-left: 0px;
  --padding-right: 0px;
  /* Iter 4d: bg image that creates the layered brown/tan footer look on live.
     The live CSS rule for this is scoped `.elementor-5118 ... e67dcce` which
     doesn't match because our rebuild renders the section inside elementor-15476.
     Re-apply unscoped. */
  background-image: url('/wp-content/uploads/2025/12/Group-884369.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
.elementor-element.elementor-element-03b3772 {
  --display: flex;
  --flex-direction: row;
  --gap: 30px 30px;
  --row-gap: 30px;
  --column-gap: 30px;
  --width: 100%;
}
.elementor-element.elementor-element-b2c518d {
  --display: flex;
  --justify-content: center;
  --width: 35%;
  --padding-top: 0rem;
  --padding-bottom: 0rem;
  --padding-left: 0rem;
  --padding-right: 0rem;
}
.elementor-element.elementor-element-295146f {
  --display: flex;
  --justify-content: center;
  --width: 65%;
}
.elementor-element.elementor-element-44d57c8 { text-align: start; }
.elementor-element.elementor-element-44d57c8 img { width: 350px; height: auto; }

/* ---------------------------------------------------------------------------
   Iter 4c — Accreditation marquee (bd7ce53): allow badges to render at their
   natural aspect ratio so "BBB Rating: A+" and "FIVE STAR CUSTOMER RATING"
   captions don't clip off the bottom. Per-page CSS locks the row to 101px
   but the tallest badge (image-46.svg) is 219x124 natural — FIVE STAR text
   sits in the bottom ~23px which gets cropped at 101px. This clipping exists
   on live too (same per-page CSS); we fix it on local as an improvement over
   live. object-fit:contain keeps each badge at its natural aspect ratio.
   --------------------------------------------------------------------------- */
.elementor-element.elementor-element-bd7ce53 .raven-content-marquee-container,
.elementor-element.elementor-element-bd7ce53 .raven-content-marquee,
.elementor-element.elementor-element-bd7ce53 .raven-content-marquee-items-wrapper,
.elementor-element.elementor-element-bd7ce53 .raven-marquee-item {
  height: auto !important;
  min-height: 124px;
  overflow: visible !important;
}
.elementor-element.elementor-element-bd7ce53 .raven-marquee-item img {
  height: auto !important;
  max-height: 124px;
  width: auto !important;
  max-width: 250px;
  object-fit: contain !important;
}
/* Give the parent e-con that hosts the marquee room to grow too. */
.elementor-element.elementor-element-ec3fe06 {
  min-height: 144px;
  height: auto !important;
}

/* ---------------------------------------------------------------------------
   Iter 4 — Raven Lottie widget sizing.

   The 5 lottie widgets in the "our roofing process" section (49bb011) are
   initialized by kr-force-elementor-assets.php via the lottie-web CDN lib.
   Raven's per-page CSS constrains the widget + SVG to ~61x107 on live, but
   without the Raven frontend JS (not captured in the mirror) the widgets
   render at the Lottie SVG's natural viewBox (~184x217). Constrain here so
   the process section matches live's 553 px height.
   --------------------------------------------------------------------------- */
/* Iter 4b: SCALE the lottie SVG (don't clip with overflow:hidden). The SVG
   has an internal viewBox 100x100 set by Lottie, but we size the container
   so the browser scales the SVG proportionally. */
[data-widget_type="raven-lottie.default"] {
  margin-left: auto;
  margin-right: auto;
}
[data-widget_type="raven-lottie.default"] .elementor-widget-container,
[data-widget_type="raven-lottie.default"] .raven-lottie-animation {
  width: 80px;
  height: 80px;
  margin: 0 auto;
}
[data-widget_type="raven-lottie.default"] svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* ---------------------------------------------------------------------------
   Iter 4d — "Your Safety" section (82eeb70): decorative frame around the
   team-member photo. Live page head has an inline <style> block with these
   rules; we re-declare them in Additional CSS since the inline block doesn't
   get injected on our rebuild. Creates two layers:
     1. Tan/gold background rectangle on the image's widget-container (the
        visible frame)
     2. Animated orange ::before rectangle behind the image that pulses
        between 80% and 90% size (decorative accent)
   --------------------------------------------------------------------------- */
.safety .inner {
  position: relative;
}
.safety .inner::before {
  content: "";
  background-color: #d14513;
  width: 80%;
  height: 80%;
  position: absolute;
  z-index: 1;
  bottom: -10px;
  left: -10px;
  animation: kr-safety-slide 2s linear infinite alternate;
}
.safety .inner img {
  display: block;
  width: 80%;
  margin-left: auto;
  margin-right: -50px;
}
.safety .inner .elementor-widget-container {
  background-color: #ca8c2e;
  padding-top: 100px;
  z-index: 1;
  position: relative;
}
@keyframes kr-safety-slide {
  0%   { width: 80%; height: 80%; }
  100% { width: 90%; height: 90%; }
}

/* === pattern: trust-pillars-row v1.0.1 === */
/* Trust-pillars-row: 3-col horizontal strip on dark brown bg.
   Each item: 80×80 orange-square icon + H3 + body paragraph side-by-side.
   On mobile (<768px) columns stack, icon centers above text.
   v1.0.1: fix icon selector — .kr-trust-pillars__icon IS the <figure>;
   the prior selector (.kr-trust-pillars__icon figure) targeted a non-existent
   child figure inside the icon figure. Split into figure (background/border/size)
   and img (object-fit) selectors. */

/* Dark wood-texture bg override — pattern uses inline bg-color #4a2210
   but we also ensure no conflicting Kadence content-container padding. */
.kr-trust-pillars {
  width: 100% !important;
}

/* Icon wrapper: the <figure class="kr-trust-pillars__icon"> itself is the
   orange filled square. Live site uses Elementor "stacked + square" view
   which wraps the icon in an orange filled square with a dashed white border
   accent. Reproduce here with background, fixed dimensions, padding, and border.
   box-sizing: border-box so padding is inside the 80×80 boundary. */
.kr-trust-pillars__icon {
  background-color: var(--kr-orange) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 80px !important;
  height: 80px !important;
  padding: 12px !important;
  flex-shrink: 0 !important;
  border: 2px dashed rgba(255,255,255,0.35) !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

/* Icon image: fill the padded interior of the orange square */
.kr-trust-pillars__icon img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: transparent !important;
}

/* Heading: Tungsten display, white, uppercase — reinforces block attr */
.kr-trust-pillars__heading {
  color: #ffffff !important;
  font-family: var(--kr-display) !important;
  font-size: clamp(20px, 2vw, 26px) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  line-height: 1.1 !important;
  margin-bottom: 8px !important;
}

/* Body: white Montserrat, slightly smaller than global 18px default */
.kr-trust-pillars__body {
  color: #ffffff !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* Column gaps on desktop */
.kr-trust-pillars__columns {
  column-gap: 40px !important;
}

/* Mobile: stack icon above text block, center both */
@media (max-width: 767px) {
  .kr-trust-pillars__item {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .kr-trust-pillars__item .wp-block-group {
    padding-left: 0 !important;
    align-items: center !important;
  }
}
/* === /pattern: trust-pillars-row v1.0.1 === */
/* === pattern: process-steps v1.0.1 === */
/* Process-steps: 5-col row on dark (#1a1a1a) background.
   Numbered orange circle (kr-process-step-number) above H3 heading + body.
   NOTE: The existing .process .heading .count rule (Session 7) targets the
   Elementor DOM (.process .heading .count). The new .kr-process-step-number
   rule below targets the Gutenberg-native DOM for this pattern. Both can coexist
   without conflict — different selectors, different markup contexts.
   v1.0.1: Added !important on color, font-size, background; changed
   display from inline-flex to flex so width/height are respected as
   a block-level flex container. Added explicit width/height !important
   so global typography resets cannot shrink the circle. */

/* Step number circle: orange, 54×54px, Tungsten display font, centered.
   display: flex (not inline-flex) ensures the circle is block-level so
   width + height apply reliably. !important on all visual properties so
   global body/p color and font-size rules cannot override them. */
.kr-process-step-number {
  background: var(--kr-orange) !important;
  width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-family: var(--kr-display) !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  margin-bottom: 14px !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

/* Step container: left-align content, vertical flow, equal-height columns */
.kr-process__step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* Step title: Tungsten display, white, uppercase — reinforces block attr */
.kr-process__step-title {
  color: #ffffff !important;
  font-family: var(--kr-display) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  line-height: 1.15 !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

/* Step body: near-white Montserrat */
.kr-process__step-body {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* Section eyebrow label */
.kr-process__eyebrow {
/* === pattern: safety-callout v1.0.1 === */
/* Safety callout: light cream (#f5f0ec) bg, 2-col (photo left, content right).
   Photo column has amber/gold bg rectangle behind the person photo.
   Existing .safety .inner CSS targets Elementor DOM (HTML-injection era).
   These .kr-safety-* selectors target the Gutenberg-native DOM for this pattern.
   v1.0.1: fixed desktop-only inline subtitle bug — heading-wrap forced to
   flex column so H2 and H6 always stack vertically at all viewports. */

/* Outer section: full-width, cream bg */
.kr-safety {
  width: 100% !important;
  overflow: hidden;
}

/* Photo column: amber/gold background behind image, plus orange decorative rectangle */
.kr-safety__photo-col {
  position: relative;
  background-color: #ca8c2e; /* amber/gold */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
  min-height: 400px;
}

/* Decorative orange rectangle behind the photo column (animated, behind the amber bg) */
.kr-safety__photo-col::before {
  content: "";
  background-color: var(--kr-orange);
  width: 80%;
  height: 80%;
  position: absolute;
  z-index: 1;
  bottom: -10px;
  left: -10px;
  animation: kr-safety-slide 2s linear infinite alternate;
}

/* Photo image: pushed right, overlapping content column on desktop */
.kr-safety__photo img {
  display: block;
  width: 85%;
  margin-left: auto;
  margin-right: -40px;
  position: relative;
  z-index: 2;
  object-fit: cover;
  object-position: top center;
  max-height: 500px;
}

/* Heading group: orange left-border accent line (matches live site).
   display: flex + flex-direction: column forces H2 and H6 to stack
   vertically at all viewports — without this, Kadence's flex layout
   context can place them inline at desktop. */
.kr-safety__heading-wrap {
  border-left: 4px solid var(--kr-orange);
  padding-left: 16px;
  margin-bottom: 20px;
  display: flex !important;
  flex-direction: column !important;
}

/* H2 headline */
.kr-safety__headline {
  color: var(--kr-ink) !important;
  font-family: var(--kr-display) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.01em !important;
  line-height: 1.0 !important;
}

/* Subtitle H6: belt-and-suspenders display: block ensures it never
   renders inline next to the H2 regardless of parent flex context */
.kr-safety__subtitle {  color: var(--kr-orange) !important;
  font-family: var(--kr-display) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  margin-bottom: 8px !important;
}

/* Section H2 heading: Tungsten white, large */
.kr-process__heading {
  color: #ffffff !important;
  font-family: var(--kr-display) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  margin-top: 0 !important;
}

/* Column dividers: subtle vertical separator between steps on desktop */
.kr-process__columns .wp-block-column + .wp-block-column {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  padding-left: 20px;
}

/* Mobile: remove dividers, center step content */
@media (max-width: 767px) {
  .kr-process__columns .wp-block-column + .wp-block-column {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: 0;
    padding-top: 20px;
  }
  .kr-process__step {
    align-items: center;
    text-align: center;
  }
}
/* === /pattern: process-steps v1.0.1 === */
  letter-spacing: 0.1em !important;
  display: block !important;
  width: 100% !important;
}

/* Body paragraph */
.kr-safety__body {
  color: var(--kr-ink) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}

/* Trust items column: vertical stack */
.kr-safety__trust-items {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Individual trust item row */
.kr-safety__trust-item {
  align-items: center !important;
}

/* Trust icon: checkmark image, fixed small size */
.kr-safety__trust-icon img {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain;
  flex-shrink: 0;
}

/* Trust label: Tungsten bold, dark, uppercase */
.kr-safety__trust-label {
  color: var(--kr-ink) !important;
  font-family: var(--kr-display) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 18px !important;
  margin: 0 !important;
}

/* Badge image: centered within its column */
.kr-safety__badge img {
  max-width: 140px;
  width: 100%;
  height: auto;
}

/* Mobile: stack columns, remove photo overlap effect */
@media (max-width: 767px) {
  .kr-safety__columns {
    flex-direction: column !important;
  }
  .kr-safety__photo-col {
    width: 100% !important;
    min-height: 300px;
  }
  .kr-safety__photo img {
    margin-right: 0;
    width: 90%;
  }
  .kr-safety__content-col {
    padding: 40px 20px !important;
  }
  .kr-safety__credentials {
    flex-direction: column !important;
  }
}
/* === /pattern: safety-callout v1.0.1 === */

/* === infra: header pixel-perfect v1.0.1 ===
 * Closes the visual gap between the local Kadence header and live
 * https://divisionkangaroof.com/ at desktop 1440. Targets verified live
 * computed values (see rebuild-plan/qa-evidence/home/header-spec-20260427-1451.md).
 *
 * Three groups of rules:
 *   1. Top tier — gradient (288deg orange/black hard split)
 *   2. Main row — phone size + weight bump, CTA uppercase + bold + white border
 *   3. Nav row — orange default items, black active item ("void" pattern)
 *
 * Selectors are scoped to .site-{top|main|bottom}-header-wrap so they cannot
 * bleed into Pattern blocks or page content.
 */

/* 1. Top tier: 288deg hard-split gradient (orange right / black left).
   Live uses linear-gradient(288deg, rgb(202,140,46) 51%, rgb(0,0,0) 50%) —
   the 51%/50% creates a sharp diagonal cut, not a smooth blend.
   IMPORTANT: Kadence renders the inner .site-header-row-container-inner
   with the wrap's background-color, which by default is opaque black per
   our theme_mods header_top_background. The opaque inner covers any
   gradient on the outer wrap. We move the gradient to the inner element
   AND keep the outer black so the off-canvas areas (left/right of the
   boxed content) stay solid black, matching live's full-width-black-with-
   center-gold-cut pattern. */
.site-top-header-wrap {
  background: rgb(0, 0, 0) !important;
}

.site-top-header-wrap .site-header-row-container-inner {
  background: linear-gradient(288deg, rgb(202, 140, 46) 51%, rgb(0, 0, 0) 50%) !important;
  background-color: transparent !important;
}

/* 2. Main row phone — Kadence renders the phone as a social-link-phone item.
   Live: Montserrat 28px / 600 / white inside a 1px solid rgb(245,245,245)
   white outline wrapper (live's elementskit-infobox border). Local default
   was 25px / 400 / no outline. The outline goes on the .social-link-phone
   anchor (which is the Kadence wrapper element corresponding to live's
   infobox). */
.site-main-header-wrap .social-link-phone .social-label,
.site-main-header-wrap .social-link-phone {
  font-family: Montserrat, sans-serif !important;
  font-size: 28px !important;
  font-weight: 600 !important;
}

.site-main-header-wrap .social-link-phone {
  border: 1px solid rgb(245, 245, 245) !important;
  padding: 8px 18px !important;
  border-radius: 0 !important;
}

/* 3. CTA button — match live's FREE ESTIMATE styling.
   Live: Montserrat 16px / 700 / uppercase / white text on rgb(209,69,19) /
   2px solid white border / 10px 15px padding.
   Note: the left SVG paper-icon is not handled here — it requires either a
   custom HTML widget swap in Customizer or a ::before content swap. Tracked
   for follow-up after the broad-stroke styling is in place. */
.site-main-header-wrap .header-button.button,
.site-main-header-wrap .header-button-inner-wrap > a.button {
  font-family: Montserrat, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  border: 2px solid #ffffff !important;
  padding: 10px 15px !important;
}

/* 4. Nav row — Max Mega Menu's transform replaces .menu with .mega-menu.
   Default items get orange bg; active item gets black bg, creating the
   "dark void" pattern that matches live exactly. Both standard
   current-menu-item and MMM's per-page item classes are covered for
   forward-compat across pages.
   Specificity note: MMM ships its own auto-generated CSS using
   #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item
   a.mega-menu-link selectors (ID + ID + class chain). Our rules must
   match that specificity to win — hence the ID-scoped selectors below.
   Direct-child note (>): we MUST use `>` between #mega-menu-primary and
   the top-level li and between the li and its <a>, otherwise these
   nav-row colors leak into nested flyout/mega panels (Emergency,
   Exteriors, About Us submenus get orange-over-orange items inside the
   white panel without the strict child combinator). */
#mega-menu-wrap-primary > #mega-menu-primary > li.mega-menu-item > a.mega-menu-link,
.site-bottom-header-wrap .header-navigation .menu > li > a {
  background: rgb(202, 140, 46) !important;
  background-color: rgb(202, 140, 46) !important;
  color: #ffffff !important;
  font-family: Montserrat, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  padding: 13px 11px !important;
}

#mega-menu-wrap-primary > #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
#mega-menu-wrap-primary > #mega-menu-primary > li.mega-menu-item.mega-current_page_item > a.mega-menu-link,
#mega-menu-wrap-primary > #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
.site-bottom-header-wrap .header-navigation .menu > li.current-menu-item > a {
  background: rgb(0, 0, 0) !important;
  background-color: rgb(0, 0, 0) !important;
}

/* Flyout submenu items (Emergency, Exteriors, About Us) — these are
   simple dropdowns (no column structure). Style each link as a clean
   black-on-white row to match the mega-menu panel look. Specificity
   higher than MMM's defaults via the wrap+primary ID chain. */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-flyout > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
  background: transparent !important;
  background-color: transparent !important;
  color: #000000 !important;
  font-family: Montserrat, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  padding: 6px 0 !important;
}

#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-flyout > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-flyout > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:focus {
  color: rgb(209, 69, 19) !important;
  background: transparent !important;
}

/* 5. CTA left-icon SVG (live's paper/quote-document icon, 28×28).
   Embedded as encoded SVG data URL on a ::before pseudo so the icon
   travels with the CSS rather than requiring a custom HTML widget swap
   in Customizer. The SVG itself is verbatim from live (extracted via
   DevTools MCP). */
.site-main-header-wrap .header-button.button::before,
.site-main-header-wrap .header-button-inner-wrap > a.button::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 10px;
  vertical-align: middle;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%20viewBox='0%200%2028%2028'%20fill='none'%3E%3Cpath%20d='M3.10572%207.85288H18.7686C19.0315%207.85288%2019.2064%207.67805%2019.2064%207.41382C19.2064%207.15091%2019.0315%206.97607%2018.7686%206.97607H3.10572C2.8428%206.97607%202.66797%207.15091%202.66797%207.41382C2.66797%207.67805%202.8428%207.85288%203.10572%207.85288Z'%20fill='white'/%3E%3Cpath%20d='M3.10572%203.55342H14.0875C14.3491%203.55342%2014.5239%203.37726%2014.5239%203.11435C14.5239%202.85144%2014.3491%202.67529%2014.0875%202.67529H3.10572C2.8428%202.67529%202.66797%202.85144%202.66797%203.11435C2.66797%203.33388%202.8428%203.55342%203.10572%203.55342Z'%20fill='white'/%3E%3Cpath%20d='M25.7692%2010.3092H21.8755V5.22058C21.8755%205.08913%2021.7874%204.95767%2021.744%204.91298C13.9119%20-2.45641%2017.7623%201.1849%2016.6252%200.131944C16.5818%200.087249%2016.5371%200.0872488%2016.4937%200.0438686C16.4503%200.0438686%2016.3623%200.000488281%2016.3189%200.000488281H2.2308C1.00563%200.000488281%200%201.00875%200%202.23786V25.5318C0%2026.7596%201.00563%2027.7691%202.2308%2027.7691C6.73709%2027.7691%2021.2195%2027.7691%2025.7692%2027.7691C26.9944%2027.7691%2028%2026.7596%2028%2025.5318V12.59C28%2011.3175%2026.9944%2010.3092%2025.7692%2010.3092ZM16.8%201.44781L20.344%204.78152H17.2377C16.9748%204.78152%2016.8%204.56199%2016.8%204.34246V1.44781ZM2.2308%2026.8476C1.48676%2026.8476%200.874178%2026.2337%200.874178%2025.4871V2.23786C0.874178%201.49119%201.48676%200.877296%202.2308%200.877296H15.9245V4.34246C15.9245%205.08913%2016.5371%205.65964%2017.2377%205.65964H21V10.3092H15.1818C14.5245%2010.3092%2013.7818%2010.6155%2013.344%2011.2741H3.10629C2.84338%2011.2741%202.66854%2011.4503%202.66854%2011.7132C2.66854%2011.9761%202.84338%2012.1509%203.10629%2012.1509H12.9944C12.9944%2012.1509%2012.9944%2012.1509%2012.9944%2012.1956C12.9497%2012.3271%2012.9497%2012.4585%2012.9497%2012.59V15.5727H3.10629C2.84338%2015.5727%202.66854%2015.7488%202.66854%2016.0118C2.66854%2016.2747%202.84338%2016.4508%203.10629%2016.4508H12.9497V19.8726H3.10629C2.84338%2019.8726%202.66854%2020.0474%202.66854%2020.3117C2.66854%2020.5746%202.84338%2020.7494%203.10629%2020.7494H12.9497V24.1712H3.10629C2.84338%2024.1712%202.66854%2024.3473%202.66854%2024.6103C2.66854%2024.8732%202.84338%2025.0493%203.10629%2025.0493H12.9497C12.9497%2025.0927%2012.9497%2025.4871%2012.9497%2025.4437C12.9497%2025.9261%2013.1692%2026.4519%2013.4308%2026.8029H2.2308V26.8476ZM27.1258%2025.4437C27.1258%2026.189%2026.5132%2026.8029%2025.7692%2026.8029H15.1818C14.4377%2026.8029%2013.8252%2026.189%2013.8252%2025.4437V12.59C13.8252%2011.888%2014.3944%2011.186%2015.1818%2011.186H25.7258C26.4685%2011.186%2027.0811%2011.7999%2027.0811%2012.5466V25.4437H27.1258Z'%20fill='white'/%3E%3Cpath%20d='M17.5005%2018.688H16.0124C15.5313%2018.688%2015.1816%2019.0824%2015.1816%2019.5214V20.6178C15.1816%2021.1002%2015.5747%2021.4512%2016.0124%2021.4512H17.5005C17.9816%2021.4512%2018.3313%2021.0568%2018.3313%2020.6178V19.5214C18.3313%2019.0824%2017.9816%2018.688%2017.5005%2018.688ZM16.0124%2020.6178V19.5648L17.5005%2019.5214L17.5439%2020.6178H16.0124Z'%20fill='white'/%3E%3Cpath%20d='M21.2193%2018.688H19.7312C19.2501%2018.688%2018.9004%2019.0824%2018.9004%2019.5214V20.6178C18.9004%2021.1002%2019.2934%2021.4512%2019.7312%2021.4512H21.2193C21.7004%2021.4512%2022.0501%2021.0568%2022.0501%2020.6178V19.5214C22.0501%2019.0824%2021.7004%2018.688%2021.2193%2018.688ZM19.7312%2020.6178V19.5648L21.2193%2019.5214L21.2626%2020.6178H19.7312Z'%20fill='white'/%3E%3Cpath%20d='M17.5005%2022.6353H16.0124C15.5313%2022.6353%2015.1816%2023.0309%2015.1816%2023.4687V24.5663C15.1816%2025.0488%2015.5747%2025.3998%2016.0124%2025.3998H17.5005C17.9816%2025.3998%2018.3313%2025.0041%2018.3313%2024.5663V23.5134C18.3313%2023.0309%2017.9816%2022.6353%2017.5005%2022.6353ZM16.0124%2024.5663V23.5134L17.5005%2023.4687L17.5439%2024.5663H16.0124Z'%20fill='white'/%3E%3Cpath%20d='M21.2193%2022.6353H19.7312C19.2501%2022.6353%2018.9004%2023.0309%2018.9004%2023.4687V24.5663C18.9004%2025.0488%2019.2934%2025.3998%2019.7312%2025.3998H21.2193C21.7004%2025.3998%2022.0501%2025.0041%2022.0501%2024.5663V23.5134C22.0501%2023.0309%2021.7004%2022.6353%2021.2193%2022.6353ZM19.7312%2024.5663V23.5134L21.2193%2023.4687L21.2626%2024.5663H19.7312Z'%20fill='white'/%3E%3Cpath%20d='M24.938%2018.688H23.4499C22.9688%2018.688%2022.6191%2019.0824%2022.6191%2019.5214V24.6101C22.6191%2025.0925%2023.0122%2025.4435%2023.4499%2025.4435H24.938C25.4191%2025.4435%2025.7688%2025.0491%2025.7688%2024.6101V19.5214C25.7688%2019.0824%2025.4191%2018.688%2024.938%2018.688ZM23.4499%2024.5667V19.5648L24.938%2019.5214V24.5667H23.4499Z'%20fill='white'/%3E%3Cpath%20d='M25.3311%2012.5903H15.5745C15.3129%2012.5903%2015.1367%2012.7665%2015.1367%2013.0294V16.977C15.1367%2017.2412%2015.3129%2017.4161%2015.5745%2017.4161H25.3311C25.594%2017.4161%2025.7688%2017.2412%2025.7688%2016.977V13.0294C25.7688%2012.7665%2025.594%2012.5903%2025.3311%2012.5903ZM24.8933%2016.4946H16.0122V13.4238H24.8933V16.4946Z'%20fill='white'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 6. Mega-menu panels (Residential / Commercial / Service Areas).
   Live's panels render as Elementor sections (~500px wide, white bg,
   orange section headers, black uppercase links). MMM's default panel
   is full-width (~1065px) with orange bg and white text. We restyle to
   match live's compact, white-bg, orange-heading look.
   Live measurements (verified via DevTools MCP):
     panel:           ~500×291, bg #fff, padding 0 10px
     section header:  Montserrat 14px / 600 / rgb(209,69,19) / uppercase
     child link:      Montserrat 14px / 600 / black / uppercase / 18px tall */

/* Constrain panel width and switch to white bg. MMM's outer wrap is
   the .mega-sub-menu directly under each top-level li. */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-menu-megamenu > ul.mega-sub-menu,
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-menu-flyout > ul.mega-sub-menu {
  background: #ffffff !important;
  background-color: #ffffff !important;
  padding: 18px 22px !important;
  width: auto !important;
  max-width: 540px !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18) !important;
}

/* Service Areas: a flat list of 16 cities, no nested column-headers.
   Live renders as 2 columns × 8. Use CSS multi-column on the panel
   when it has the per-menu-item-193 class (Service Areas db_id). */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-193 > ul.mega-sub-menu {
  column-count: 2 !important;
  column-gap: 24px !important;
  min-width: 360px !important;
  max-width: 480px !important;
}

#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-193 > ul.mega-sub-menu > li.mega-menu-item {
  break-inside: avoid !important;
}

#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-193 > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
  background: transparent !important;
  background-color: transparent !important;
  color: #000000 !important;
  font-family: Montserrat, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  padding: 6px 0 !important;
}

#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-193 > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover {
  color: rgb(209, 69, 19) !important;
}

/* Section heading — MMM renders the column parent as
   li.mega-menu-item-has-children > a.mega-menu-link (the parent's own
   <a> doubles as the section header text). Targeted depth-2 to avoid
   matching nested grandchildren. */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item-has-children > a.mega-menu-link {
  background: transparent !important;
  background-color: transparent !important;
  color: rgb(209, 69, 19) !important;
  font-family: Montserrat, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  padding: 0 0 8px 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  margin-bottom: 8px !important;
}

/* Child link items — depth-3 (panel > parent-li > child-ul > child-li > a) */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > ul.mega-sub-menu > li > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
  background: transparent !important;
  background-color: transparent !important;
  color: #000000 !important;
  font-family: Montserrat, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  padding: 6px 0 !important;
}

/* Child link hover — orange to mirror live's interaction color */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > ul.mega-sub-menu > li > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > ul.mega-sub-menu > li > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:focus {
  color: rgb(209, 69, 19) !important;
}

/* Hide column-arrow indicators on the parent (mega-hide-arrow class is
   already there but MMM still renders the .mega-indicator span). */
#mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu .mega-indicator {
  display: none !important;
}

/* === /infra: header pixel-perfect v1.0.1 === */

/* === pattern: insurance-claim-callout v1.0.1 === */
/* Insurance-claim-callout: 2-col section (light bg).
   Left: H2 + orange left-border accent + intro + CTA.
   Right: Kadence Accordion with 6 numbered steps.
   Gold numbered badge achieved via CSS counter (number removed from pane title slot). */

/* Section wrapper: full width, very light blue-grey background */
.kr-insurance {
  width: 100% !important;
}

/* Left column heading wrap: orange left-border accent */
.kr-insurance__heading-wrap {
  border-left: 4px solid var(--kr-orange);
  padding-left: 16px;
  margin-bottom: 24px;
}

/* H2 headline: dark ink, Tungsten display font, uppercase */
.kr-insurance__headline {
  color: var(--kr-ink) !important;
  font-family: var(--kr-display) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.01em !important;
  line-height: 1.0 !important;
  margin-top: 0 !important;
}

/* Intro paragraph: standard body text */
.kr-insurance__intro {
  color: var(--kr-ink) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  margin-bottom: 28px !important;
}

/* CTA button: uses global .wp-block-button__link styles (orange, Tungsten) */
.kr-insurance__cta {
  margin-top: 8px !important;
}

/* Accordion container: left dotted timeline line on desktop */
.kr-insurance__accordion .kt-accordion-inner-wrap {
  position: relative;
  padding-left: 0;
}

/* Individual accordion pane: white card with border and rounded corners */
.kr-insurance__accordion .kt-accordion-pane {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  overflow: hidden;
}

/* Accordion header button: flex row, align items.
   Include element type (button) to beat the global button:not(...) rule
   which also uses !important at specificity 0,2,1. Our selector matches
   0,2,1 and loads later in the cascade, so we win. */
.kr-insurance__accordion button.kt-blocks-accordion-header {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 18px !important;
  background: #ffffff !important;
  color: var(--kr-ink) !important;
  border: none !important;
  cursor: pointer;
}

/* Title wrap: flex row with gold number badge and title text */
.kr-insurance__accordion .kt-blocks-accordion-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex: 1;
}

/* Title text: Montserrat, dark, medium weight — NOT uppercase per live site */
.kr-insurance__accordion .kt-blocks-accordion-title {
  font-family: var(--kr-body) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #2d6a6a !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Gold number badge: first word of title is the step number.
   Since the number is embedded in the title text we use the pane's
   data-nth approach via CSS counter on the inner-wrap. Counter renders
   the gold badge as a ::before pseudo-element on each pane. */
.kr-insurance__accordion .kt-accordion-inner-wrap {
  counter-reset: kr-ins-step;
}

.kr-insurance__accordion .kt-accordion-pane {
  counter-increment: kr-ins-step;
}

/* Hide the text-embedded step number from visual display — CSS counter
   provides the badge so we suppress the text number. Since number and title
   are concatenated in the same text node we use a CSS trick: the title's
   first word is hidden via the counter approach. This requires block-builder
   to NOT include the number in the pane title if CSS counter is used.
   Decision for block-builder: put ONLY the step title text in the slot
   (e.g., "Inspection") — the CSS counter generates "1", "2", etc. as
   the gold badge. The {{STEP_N_NUMBER}} slot is retained in spec for
   reference/override use in non-CSS contexts (e.g., RSS, plain-text). */
.kr-insurance__accordion .kt-blocks-accordion-header::before {
  content: counter(kr-ins-step) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  background: #ca8c2e !important;
  color: #ffffff !important;
  font-family: var(--kr-display) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  flex-shrink: 0 !important;
  margin-right: 2px !important;
}

/* Expand/collapse icon: "+" style using Kadence's default trigger or override */
.kr-insurance__accordion .kt-blocks-accordion-icon-trigger {
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0;
  color: #ca8c2e !important;
  border: 2px solid #ca8c2e !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
}

/* Active/open pane header: orange background (inherits from global button rule),
   white title text for contrast. Kadence adds kt-accordion-panel-active directly
   to the button element itself, so target button.kt-accordion-panel-active.
   We keep the orange bg (it matches the live reference) and ensure the title
   and counter badge text are both white for readability. */
.kr-insurance__accordion button.kt-blocks-accordion-header.kt-accordion-panel-active {
  background: var(--kr-orange) !important;
}
.kr-insurance__accordion button.kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-title {
  color: #ffffff !important;
}
.kr-insurance__accordion button.kt-blocks-accordion-header.kt-accordion-panel-active::before {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

/* Panel content area */
.kr-insurance__accordion .kt-accordion-panel-inner {
  padding: 16px 18px !important;
  color: var(--kr-ink) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

/* Mobile: stack columns vertically */
@media (max-width: 767px) {
  .kr-insurance__columns {
    flex-direction: column !important;
  }
  .kr-insurance__left,
  .kr-insurance__right {
    width: 100% !important;
    flex-basis: 100% !important;
  }
  .kr-insurance__left {
    margin-bottom: 40px;
  }
}
/* === /pattern: insurance-claim-callout v1.0.1 === */

/* === pattern: projects-counters v1.0.1 === */
/* Projects-counters: full-width dark brown/maroon section.
   Left col: H2 + intro + 4 countup blocks in 2x2 grid.
   Right col: house photo + truck photo stacked.
   Countup numbers animate on scroll via Kadence KB script. */

/* Section wrapper: full width, dark background */
.kr-counters {
  width: 100% !important;
}

/* H2 heading: white Tungsten, uppercase */
.kr-counters__heading {
  color: #ffffff !important;
  font-family: var(--kr-display) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  line-height: 1.05 !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}

/* Intro paragraph: white Montserrat */
.kr-counters__intro {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  margin-bottom: 40px !important;
}

/* Counter grid: 4 counters in 2 columns (wraps to 2x2 at narrow widths) */
.kr-counters__grid {
  column-gap: 24px !important;
  row-gap: 32px !important;
}

/* Individual counter wrapper: vertical stack, left-aligned */
.kr-counters__counter {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

/* Gold icon image: fixed size, gold tinted (filter if raw SVG is grey) */
.kr-counters__icon {
  margin: 0 !important;
}

.kr-counters__icon img {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain !important;
  filter: sepia(1) saturate(3) hue-rotate(10deg) brightness(1.1) !important;
}

/* Countup number: large white Tungsten display font */
.kr-counters .kb-count-up-number {
  color: #ffffff !important;
  font-family: var(--kr-display) !important;
  font-size: clamp(2.5rem, 4vw, 3.5rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
}

/* Countup title/label: small white Montserrat */
.kr-counters .kb-count-up-title {
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: var(--kr-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  line-height: 1.3 !important;
}

/* Right column: flex column so photos stack with a gap */
.kr-counters__right {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  justify-content: center !important;
}

/* Photo images: fill column width, natural aspect ratio */
.kr-counters__photo {
  margin: 0 !important;
  width: 100% !important;
}

.kr-counters__photo img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
}

/* Mobile: stack layout columns, counters remain 2x2 */
@media (max-width: 767px) {
  .kr-counters__layout {
    flex-direction: column !important;
  }
  .kr-counters__left,
  .kr-counters__right {
    width: 100% !important;
    flex-basis: 100% !important;
  }
  .kr-counters__right {
    margin-top: 40px;
  }
  .kr-counters .kb-count-up-number {
    font-size: clamp(2rem, 8vw, 2.8rem) !important;
  }
}
/* === /pattern: projects-counters v1.0.1 === */
/* === pattern: why-choose-us v1.0.1 === */
/* Why-choose-us: white bg section with H2 + intro (centered) +
   2x2 card grid (photo top, H3 + body below). City-parameterized.
   H3 card headings are title case (NOT uppercase) — global rule overridden.
   v1.0.1: 4-sibling-column layout with flex-wrap for correct mobile reading order. */

/* Section wrapper: full width, white bg */
.kr-why-choose {
  width: 100% !important;
}

/* Section header: centered text, constrained width */
.kr-why-choose__header {
  text-align: center !important;
}

/* H2: dark ink, Tungsten display, centered */
.kr-why-choose__heading {
  color: var(--kr-ink) !important;
  font-family: var(--kr-display) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.01em !important;
  line-height: 1.05 !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}

/* Intro paragraph: center-aligned, standard body text */
.kr-why-choose__intro {
  color: var(--kr-ink) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 0 !important;
}

/* Card wrapper: flex column, no internal horizontal padding on image */
.kr-why-choose__card {
  overflow: hidden;
  background: #ffffff;
}

/* Card photo: full-bleed, fixed 3:2 aspect ratio via object-fit */
.kr-why-choose__card-photo {
  margin: 0 !important;
  width: 100% !important;
  overflow: hidden;
}

.kr-why-choose__card-photo img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 2 !important;
  object-fit: cover !important;
  display: block !important;
}

/* Card body group: padding above heading and body */
.kr-why-choose__card-body {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

/* Card H3 heading: Tungsten display font, title case (NOT uppercase).
   !important overrides the global:
     body :where(h3):not(.elementor-heading-title) { text-transform: uppercase }
   which is a 0-specificity :where() rule BUT our selector is more specific. */
.kr-why-choose__card-heading {
  color: var(--kr-ink) !important;
  font-family: var(--kr-display) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.15 !important;
  font-size: clamp(1.3rem, 2vw, 1.7rem) !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

/* Card body text: standard Montserrat, dark ink */
.kr-why-choose__card-body-text {
  color: var(--kr-ink) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* 2x2 card grid: 4 sibling card-col divs that wrap 2-per-row on desktop.
   flex-wrap: wrap lets the 4 columns wrap onto 2 rows.
   Each card-col is 50% (minus half the gap) so exactly 2 fit per row.
   WP core mobile override (flex-basis: 100% at < 782px) handles mobile
   stacking automatically — all 4 cards stack in source order (1→2→3→4). */
.kr-why-choose__grid {
  flex-wrap: wrap !important;
  gap: 32px !important;
}

.kr-why-choose__card-col {
  flex-basis: calc(50% - 16px) !important;
  max-width: calc(50% - 16px) !important;
  min-width: 0 !important;
}

/* Mobile: WP core forces flex-basis: 100% on all wp-block-column at < 782px.
   We reinforce this and remove the max-width override. */
@media (max-width: 781px) {
  .kr-why-choose__card-col {
    flex-basis: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}
/* === /pattern: why-choose-us v1.0.1 === */
/* ======================================================================== */
/*  LIVE-MIRROR CUSTOM CSS                                                  */
/*  Captured 2026-04-28 from divisionkangaroof.com #wp-custom-css inline    */
/*  <style> block. The live site stored these rules as Customizer →         */
/*  Additional CSS (custom_css post type), which on staging would be lost   */
/*  in any DB restore or theme switch. Inlining them here as part of the    */
/*  child theme places them outside any flushable surface.                  */
/*                                                                          */
/*  These rules style: serviceouter-one orbit animation, serviceouter-two   */
/*  through -four numbered tabs, serviceareainner-* image containers,       */
/*  insurance-claims accordion + insurance-two card flips, financing-* hero */
/*  containers, about-one img orbit + about-three team grid, blog content   */
/*  typography, hero heading underline animation, .process step indicator,  */
/*  .safety inner shadows, learning-hub swiper pagination labels, etc.      */
/*                                                                          */
/*  Snapshot source of truth: rebuild-plan/_snapshots/live-wp-custom-css.css */
/* ======================================================================== */


#address-sec {
  max-width: 550px;
  margin: 0 auto;
}
.breadcrump {
  background-size: cover;
}
header .info-block .elementkit-infobox-icon {
  animation:oscillate-rotation 2.3s infinite ease-in-out;
}
@keyframes oscillate-rotation {
  0% {
    transform:rotate(0) scale(1) skew(0deg);
  }
  10% {
    transform:rotate(-25deg) scale(1) skew(0deg);
  }
  20% {
    transform:rotate(25deg) scale(1) skew(0deg);
  }
  30% {
    transform:rotate(-25deg) scale(1) skew(0deg);
  }
  40% {
    transform:rotate(25deg) scale(1) skew(0deg);
  }
  50% {
    transform:rotate(0) scale(1) skew(0deg);
  }
  100% {
    transform:rotate(0) scale(1) skew(0deg);
  }
}
.raven-submenu li a i {
  font-size: 12px;
}
.raven-nav-menu-horizontal > .raven-nav-menu ul.sub-menu.raven-submenu {
  padding: 15px !important;
}
.has-mega-menu .raven-megamenu-wrapper {
  width: 500px !important;
}.has-mega-menu .submenu {
  margin-top: 0px !important;transform: none !important;
}
.raven-submenu{margin-top: 0px !important;}
.has-mega-menu .raven-megamenu-wrapper .elementor-icon-list-item:hover {
  background: #CA8C2E;
}.has-mega-menu .elementor-icon-list-item {
  padding: 10px 5px !important;
}
.menu-heading .jet-menu-label {
  color: #D14513 !important;
}
.serviceouter-four .elementor-widget-n-tabs .e-n-tab-title[aria-selected="true"] .e-n-tab-icon svg {
  
  background: #d14513;
  border-radius: 50%;
  padding: ;
}
@media (min-width:768px) and (max-width:1024px) {.jet-mobile-menu__instance--slide-out-layout .jet-mobile-menu__container {
  top: 205px!important;
 
	}
	.footer-menu::before {width: 110%!important;}
}
@media (max-width:767px){.jet-mobile-menu__instance--slide-out-layout .jet-mobile-menu__container {
  top: 190px!important;
 
	}
.raven-testimonial--layout-image_right .raven-testimonial {
 
  flex-direction: row-reverse;
  flex: 1;
  flex-wrap: wrap-reverse;
}
	.learning-hub .raven-testimonial__footer {
  width: 100%!important;
  text-align: left;padding-bottom: 25px;
  padding-left: 0px;
}

}
@media (max-width: 1024px) {
  .about-one .img-container {
    width: 350px!important;
    height: 350px!important;
    margin: 0px auto;
  }
		.service .slider-coverflow-wrapper {
  background: rgba(202,140,46,.8);
  padding: 30px;
}
	.service .block-shadow.slider-container-block-background {
  padding: 0;
}
	.service .slide-title {
  text-align: center !important;
}
	.insurance-two .areas .inner-area .number {
  padding-top: 50px;
  padding-bottom: 50px;
}
	.insurance-two  {
  padding: 50px;
}
	
	.jet-mobile-menu-cover {
 
  background-color: transparent!important;
 
}
}
.blog-content h2 {
  font-size:32px;
  margin-bottom:8px;
  margin-top:35px;text-transform: uppercase;
  color: #d14513;font-family: "Montserrat",sans-serif;font-weight: 600;
}
.wp-block-image .aligncenter, .wp-block-image .alignleft, .wp-block-image .alignright, .wp-block-image.aligncenter, .wp-block-image.alignleft, .wp-block-image.alignright {
  display: block;
}
.blog-content h2 strong,.blog-content h3 strong {
  font-weight: 600;
}
.raven-post-navigation-previous-post:hover, .raven-post-navigation-next-post:hover {background:#ca8c2e;}
.raven-post-navigation-previous-post, .raven-post-navigation-next-post {
  
  padding: 10px 30px;
  font-weight: 700;
  border: 2px solid #ca8c2e;
  text-align: center;
  text-decoration: none;
}
.blog-content a {
  color: #016cd7 !important;
  font-family: "Montserrat",sans-serif;
  line-height: 140%;
  font-weight: 500;
  text-decoration: underline;
}
.blog-content img {
 width: 594px;
  border: 5px solid #000;
  margin: 15px auto;
}
.blog-content  h3 {
  font-size:25px;
  margin-bottom:6px;
  margin-top:0px;text-transform: uppercase;
  color: #d14513;font-family: "Montserrat",sans-serif;font-weight: 600;
}
.blog-content h4 {
  font-size:20px;
  margin-bottom:6px;
  margin-top:0px;text-transform: uppercase;
  color: #d14513;font-family: "Montserrat",sans-serif;
}
.blog-contenta h5 {text-transform: uppercase;
  color: #d14513;
  font-size:18px;font-family: "Montserrat",sans-serif;
}
.team-member--image-wrapper::before {
  position: absolute;
  left: 0;
  top: 0;
  height: 0;
  width: 100%;
  background-color: #fff;
  content: "";
  -webkit-transition: all 700ms ease;
  -moz-transition: all 700ms ease;
  -ms-transition: all 700ms ease;
  -o-transition: all 700ms ease;
  transition: all 700ms ease;
  z-index: -1;
}
.about-three .card-layout--standard .team-member--content {
  padding: 10px 16px 0px;
 
}.about-three .raven-team-members-wrapper {
  
	grid-gap: 0px;}
.about-three .inner .raven-team-members-wrapper:before {
  background: linear-gradient(0deg,rgba(0,0,0,.15),rgba(0,0,0,.15)),linear-gradient(153.27deg,#ff4300 -3.1%,#ff9a00 55.94%);
  border-bottom: 5px dashed #fff;
  box-shadow: 25px 25px 5px 5px rgba(0,0,0,.15);
  border-radius: 25px;
  content: "";
  position: absolute;
  bottom: -50px;
  width: 100%;
  height: 50%;
  z-index: -1;
}
.about-three .team-member--image-wrapper {
  position: relative;
  margin-bottom: 15px;
}
.about-three .team-member--image-container:hover .team-member--image-wrapper::before {
  height:100%;
}
.team-member--image-wrapper img {
  border: 15px solid rgba(255,255,255,.25);
  box-shadow: 4px 4px 25px rgba(0,0,0,.5);
  width: 100%;
  display: block;
}
.about-one .img-container {
  position:relative;
  width:400px;
  height:400px;
}
.about-one .img-container .rotate,
.about-one .img-container .main-image {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.about-one .img-container .rotate {
  width:100%;
  height:100%;
}
.about-one .img-container .rotate img {
  width:100%;
  height:100%;
}
.about-one .img-container .main-image {
  width:50%;
  height:50%;
  background:#ca8c2e;
  border-radius:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.about-one .img-container .main-image img {
  width:80%;
}
.about-one .img-container .rotate {
  animation:rotate 10s linear 0s infinite;
}
@keyframes rotate {
  0% {
    transform:translate(-50%,-50%) rotate(0deg);
  }
  100% {
    transform:translate(-50%,-50%) rotate(360deg);
  }
}
.team-form .wpforms-container-full input[type="tel"], .team-form div.wpforms-container-full input[type="text"], .team-form div.wpforms-container-full input[type="email"], .team-form div.wpforms-container-full textarea, .team-form div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-select-style-modern .choices .choices__inner {
  background: transparent !important;
  color: #000 !important;
  border: 1px solid  !important;
  
}body {
  overflow-x: hidden;
}
.team-form div.wpforms-container-full button[type="submit"] {
  text-transform: uppercase;
  font-size: 15px !important;
  font-weight: 700 !important;
  width: 250px;
}
	.team-form .wpforms-container ::-webkit-input-placeholder { /* Chrome and Safari */
   color: #000 !important;
}
  
.team-form .wpforms-container :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: #000 !important;
   opacity: 1 !important;
}
  
.team-form .wpforms-container ::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #000 !important;
   opacity: 1 !important;
}
  
.team-form .wpforms-container :-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: #000 !important;
}
  
.team-form .wpforms-container ::-ms-input-placeholder { /* Microsoft Edge */
   color: #000 !important;
}
  
.team-form .wpforms-container ::placeholder {
   color: #000 !important;
}
@media(max-width:767px){
	.about .feature:not(:last-child)::after {
		content: none!important;}
	.safety .elementor-image-box-wrapper {
  display: flex;
}
	.safety .elementor-image-box-img {
  margin-right: 15px !important;
}
	.financing-two .elementor-image-box-wrapper, .serviceareainner-one .elementor-image-box-wrapper {
  display: flex;
  text-align: left;
}
	.wp-block-image .aligncenter > figcaption {
  
  display: block!important;
}
	.blog-content img {
		width: 100%;}
	.footer-menu .elementor-widget-heading, .accred.elementor-widget-heading {
  background: #CA8C2E;
}
	
.financing-two .elementor-image-box-content {
 
  align-content: center;
}
	.elementor-image-gallery .gallery.gallery-columns-4 .gallery-item{max-width: 50%!important;}
}
.serviceareainner-three .elementor-image-box-title {
  border-left: 5px solid #ca8c2e;
  padding-left: 10px;
  margin-bottom: 15px;
}
.serviceareainner-two .elementor-image-box-img img {
  position: absolute;
  right: 15px;
  width: 50px;
  opacity: .3;
  top: 0;
}.serviceareainner-two h3 {
  border-left: 5px solid #fff;
  padding-left: 15px;
  margin-bottom: 15px;
}
.serviceouter-one .img-gradient img {
  width: 100%;
  display: block;
  object-fit: cover;
  border-radius: 15px;
}.serviceareainner-one .img-container iframe {
  border-radius: 15px;
}
.serviceareainner-one .img-container {
  background-color: #1e1e1e;
  border: 5px dashed #d14513;
  width: 80%;
  position: relative;
  border-radius: 25px;
  margin: 0px auto;
  padding: 10px;
}
.serviceouter-one .img-gradient .elementor-widget-container {
  width: 80%;
  background: linear-gradient(153.27deg,#ff4300 -3.1%,#ff9a00 55.94%);
  padding: 5px;
  border-radius: 15px;
  position: relative;
  margin: 0px auto;
}
.learning-hub .raven-testimonial--align-left .raven-testimonial {
  text-align: left;
  width: 70%;
}
.learning-hub .raven-testimonial__footer {
  
  width: 50%;
}
.serviceouter-two .inner::before {
  content: "";
  width: 50%;
  height: 60%;
  border-left: 5px solid #CA8C2E;
  border-top: 5px solid #CA8C2E;
  box-shadow: 4px 4px 25px rgba(0,0,0,.25);
  border-radius: 10px;
  position: absolute;
  top: -10px;
  left: -10px;
  z-index: -1;
}
.financing-one .img-container3 .elementor-widget-container::before {
  content: "";
  background: #ca8c2e;
  position: absolute;
  right: -15px;
  bottom: -15px;
  filter: drop-shadow(25px 25px 50px rgba(0,0,0,.15));
  border-radius: 25px;
  width: 100%;
  height: 100%;
}
.financing-one .img-container3 {
  width: 80%;
  position: relative;
  margin: 0px auto;
}
.financing-one .img-container3 img {
	filter: drop-shadow(25px 25px 50px rgba(0,0,0,.15));border-radius: 25px;}
  
.serviceouter-three .img-container .elementor-widget-container::before {
  content: "";
  background: rgba(209,69,19,.65);
  border: 3px solid #d14513;
  box-shadow: inset 4px 4px 5px rgba(255,255,255,.25);
  position: absolute;
  top: -15px;
  left: -15px;
  width: 50%;
  height: 50%;
  z-index: 0;
  border-radius: 0px 15px 0px 15px;
}
.serviceouter-three .img-container .elementor-widget-container::after {
  content: "";
  background: rgba(209,69,19,.65);
  border: 3px solid #d14513;
  box-shadow: inset 4px 4px 5px rgba(255,255,255,.25);
  position: absolute;
  bottom: -15px;
  right: -15px;
  width: 50%;
  height: 50%;
  z-index: 0;
  border-radius: 0px 15px 0px 15px;
}
.serviceouter-three .img-container .elementor-widget-container {
  width: 80%;
  border-radius: 0px 50px 50px 50px;
  position: relative;
}.img-container img {
  width: 100%;position: relative;
  border-radius: 0px 50px 50px 50px;z-index: 999;
}
.serviceouter-two .inner::after {
  content: "";
  width: 50%;
  height: 60%;
  border-right: 5px solid #CA8C2E;
  border-bottom: 5px solid #CA8C2E;
  box-shadow: 4px 4px 25px rgba(0,0,0,.25);
  border-radius: 10px;
  position: absolute;
  bottom: -10px;
  right: -10px;
  z-index: -1;
}
.breadcrump .elementor-icon-list--layout-inline.elementor-list-item-link-full_width {
  width: fit-content;
  border: 1px solid #fff;
  border-radius: 2px;
}
.serviceouter-four .e-n-tab-title[aria-selected="false"] .e-n-tab-icon svg {
  fill: transparent;
}
@media (min-width:800px) and (max-width:1024px){ .mySwiperCoverflow .swiper-slide.swiper-slide-active .slider-coverflow-wrapper {
    width: 100%!important;
    background: rgba(202,140,46,.6)!important;
    padding: 10px;
    justify-content: start;
  }
	.block-shadow.slider-container-block-background {
  padding: 0px!important;
}
	.mySwiperCoverflow .slider-coverflow-wrapper {
    width: 100%!important;
    background: rgba(202,140,46,.6)!important;
  }.swiper-slide-active .block-shadow.slider-container-block-background {
  height: 320px !important;
}
}
@media (min-width:800px){.mySwiperCoverflow .slider-coverflow-wrapper {
  width: 12%;
  background: #CA8C2E;
  justify-content: center;
  align-content: center;
  align-items: center;
}
	
.swiper-wrapper .slide-title{writing-mode: vertical-lr;}
.mySwiperCoverflow .slider-coverflow-wrapper{width: 15%;background:#CD6820;}
.swiper-wrapper .swiper-slide.swiper-slide-active .slide-title {
  writing-mode: unset;text-align:center;
}
.mySwiperCoverflow .swiper-slide.swiper-slide-active .slider-coverflow-wrapper {
  width: 50%;background:#CD6820;padding: 10px;justify-content: start;
}
.mySwiperCoverflow .slider-container-background .block-shadow {
  
  align-items: end;padding: 0px 0px!important;
}
.slide-coverflow-button-wrapper {
  display: none !important;
}
.swiper-wrapper .slide-description {
  display: none;
}
.swiper-wrapper .swiper-slide.swiper-slide-active .slide-description {
  display: block;
}
.swiper-wrapper .swiper-slide.swiper-slide-active .slide-coverflow-button-wrapper {
  display: block !important;
}
}
.service .mySwiper {
  
	padding: 0px 0px 50px}
.service .e-n-tabs-heading {
  background: #000;
  border-radius: 50px;
  width: fit-content;
  margin: 0 auto;
  padding: 10px;
}
@media (max-width: 1024px) {
  .serviceouter-one .slider-thumb {
    width: 300px!important;
    height: 300px!important;
    margin: 0px auto!important;
    position: relative;
    top: unset!important;
    left: unset!important;
    transform: unset!important;z-index: 9999;
		position:relative!important;
  }
	
	.breadcrump .elementor-icon-list--layout-inline.elementor-list-item-link-full_width {
		width: 100%;}
	.serviceouter-two .e-n-tabs-heading button::after {
  content: none !important;
}
  .serviceouter-one .slider-thumb .main-image {
    width:60%!important;
    height:60%!important;
  }
  .serviceouter-one .slider-thumb .hero-shape {
    width:90%!important;
    height:90%!important;
  }
  .serviceouter-one .slider-thumb .hero-shape3 {
    width:100%!important;
    height:100%!important;
  }
  .serviceouter-one .position-relative {
    padding-left:0px !important;
  }
}
.footer-menu::before {
  content: "";
  background-color: #CA8C2E;
  position: absolute;
  top: 11px;
  left: -30px !important;
  width: 200%;
  height: 50px;
  border: 1px solid #fff;
  border-left: 0px;
}
.insurance-one .img-container1 {
  position: relative;
  width: 90%;
}
.img-container1 .elementor-widget-container::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: 40%;
  height: calc(100% + 20px);
  background:#d14513;
  z-index: 0;
}
.insurance-one .right::before {
  content: "";
  position: absolute;
  top: -10px;
  right: -10px;
  width: 40%;
  height: calc(100% + 20px);
  background: #d14513;
  z-index: -1;
}
.img-container1 img {
  width: 100%;
  position: relative;
  
  z-index: 999;
}
@media(max-width:600px){.footer-menu::before {
	content: none;}}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 10px 10px;
}
.learning-hub .swiper-pagination {
  position: absolute;
  text-align: right;
  transition: .3s opacity;
  transform: translate3d(0,0,0);
  z-index: 10;
  right: 0;
  left: auto !important;
 
  width: 30%!important;top: 0;
  bottom: 0px !important;
  align-content: center;
}
.learning-hub .navigation-arrow-prev--position-left.navigation-arrow-prev--position-top.elementor-swiper-button.elementor-swiper-button-prev {
  left: auto;
  right: 0;
  background: #d14513;
  top: 14%;
  right: 11px;
  transform: rotate(90deg);
  padding: 0;
  width: 30px;
  height: 30px;
  justify-content: center;
  align-items: center;z-index: 9999;
}.contact .single-feature .elementor-icon {
  border: 1px dashed #fff;
}
.contact .single-feature .elementor-icon-box-content {
  border-bottom: 2px solid #ca8c2e;
}
.learning-hub .navigation-arrow-next--position-right.navigation-arrow-next--position-top.elementor-swiper-button.elementor-swiper-button-next {
  left: auto;
  right: 0;
  background: #d14513;
  bottom: 14%;
  right: 11px;
  transform: rotate(90deg);
  padding: 0;
  width: 30px;
  height: 30px;
  justify-content: center;
  align-items: center;top: auto;z-index: 9999;
}
.learning-hub .swiper-pagination-bullet.swiper-pagination-bullet-active{color:#D14513;font-size:28px;}
.learning-hub .swiper-pagination-bullet {
  width: auto;
  height: auto;
  display: block;
  border-radius: 0;
  background: transparent;
  opacity: 1;font-family: "Tungsten", Sans-serif;
  color: #000;
  text-transform: uppercase;
  font-weight: 600;font-size:21px;
}
.learning-hub .swiper-pagination-bullet:first-child::before {
  content: "Roofing";
}
.learning-hub .swiper-pagination-bullet:nth-child(2)::before {
  content: "Windows";
}
.learning-hub .swiper-pagination-bullet:nth-child(3)::before {
  content: "Underlayment";
}
.learning-hub .swiper-pagination-bullet:nth-child(4)::before {
  content: "Gutters";
}
.learning-hub .swiper-pagination-bullet:nth-child(5)::before {
  content: "Soffit";
}
.learning-hub .swiper-pagination-bullet:nth-child(6)::before {
  content: "Fascia";
}
.learning-hub .raven-testimonial__content {
  align-content: center;
}
.learning-hub .raven-testimonial__cite {
  
  margin-top: 0px!important;
}.learning-hub .raven-testimonial__text.raven-testimonial-content-text, .learning-hub .raven-testimonial__cite{
  border-left: 5px solid #ca8c2e;
  padding-left: 10px;
}
.insurance-claims .elementskit-accordion.accoedion-primary::before {
  content: "";
  position: absolute;
  width: 5px;
  background-color: #000;
  height: 100%;
  left: 25px;z-index: -1;
}
.service-areas .elementor-icon {
  
  box-shadow: inset 4px 4px 4px rgba(0,0,0,.5);
}
.service-areas .point {
  animation:jump .5s ease-in-out alternate infinite;
}
@keyframes jump {
  0% {
    transform:translateY(0px);
  }
  100% {
    transform:translateY(5px);
  }
}
.insurance-claims .ekit-wid-con .elementskit-accordion .elementskit-card:last-child .elementskit-btn-link {
  margin-bottom: 0px !important;
}
.insurance-claims .ekit-wid-con .elementskit-accordion .elementskit-card-header > .elementskit-btn-link.collapsed {
  border-bottom: 1px solid #e5e5e5;
  filter: drop-shadow(-4px 4px 4px rgba(0,0,0,.25));
  background: var(--white);
  margin-bottom: 10px;
  border-radius: 10px;
  padding-right: 15px;
}
.insurance-claims .elementskit-accordion .elementskit-card-body {
  border-radius: 10px;
  margin-bottom: 10px;
}
.insurance-claims .elementskit-accordion .elementskit-card.active .elementskit-card-body {
  
  margin-bottom: 0px;box-shadow: -4px 4px 4px 0px rgba(0, 0, 0, 0.25);
}.projects .elementor-icon {
  border: 1px dashed #fff;
}
.projects .elementor-counter-title::after {
  content: "";
  width: 50%;
  height: 2px;
  background-color: #CA8C2E;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  bottom: -5px;
}
.insurance-claims .ekit-wid-con .elementskit-accordion .elementskit-card-header > .elementskit-btn-link {
  border-bottom: 1px solid #e5e5e5;
  filter: drop-shadow(-4px 4px 4px rgba(0,0,0,.25));
  background: var(--white);
  margin-bottom: 0px;
  border-radius: 0px 10px 0 10px;
  padding-right: 15px;
}
.insurance-claims .number {
  background: #ca8c2e;
  color: var(--white);
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px 0px 0px 10px;
  margin-right: 15px;
}.ekit-wid-con .number::before {
  counter-increment: myNumber;
  content: counter(myNumber) !important;
}
.about .feature:not(:last-child)::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 50px;
  background-color: #ca8c2e;
  top: 50%;
  transform: translateY(-50%);
  right: 0px;
}
.safety .inner::before {
  content: "";
  background-color: #d14513;
  width: 80%;
  height: 80%;
  position: absolute;
  z-index: 1;
  bottom: -10px;
  left: -10px;
	animation: slide-right 2s linear infinite alternate;} 
@keyframes slide-right {
  0% {
    width:80%;
    height:80%;
  }
  100% {
    width:90%;
    height:90%;
  }
}
.e-n-tabs-heading {
  background: #D14513;
  border-radius: 10px;
}.e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"] .e-n-tab-icon {
  background: #CA8C2E;
  border-radius: 100px;
  padding: 11px;
}
.roofingmaterial .raven-cta__title.raven-cta__content-item {
  background: rgba(0,0,0,.25);
  padding: 15px !important;
  border-left: 5px solid #ca8c2e;margin-bottom: 0px;
}
.safety .inner img {
  display: block;
  width: 80%;
  margin-left: auto;
  margin-right: -50px;
}
.safety .inner .elementor-widget-container {
  background-color: #ca8c2e;
  padding-top: 100px;
  z-index: 1;
  position: relative;
}
.insurance-two .line {
  position:absolute;
  width:5px;
  height:100%;
  background:#fff;
  box-shadow:4px 4px 25px rgba(0,0,0,.15);
  left:50%;
  transform:translateX(-50%);
}
.insurance-two .line .inner-line {
  position:absolute;
  width:5px;
  height:0px;
  background:#D14513;
  box-shadow:4px 4px 25px rgba(0,0,0,.15);
  left:50%;
  transform:translateX(-50%);
  transition:height .3s ease;
}
.insurance-two .areas {
  display:grid;
  grid-template-columns:1fr;
  gap:50px;
  align-items:center;
  align-items:stretch;
  width:80%;
  margin:0px auto;
}
@media (max-width:1024px) {
  .insurance-two .areas {
    grid-template-columns:1fr;
  }
	.insurance-two .areas {
    width:100%;
  }
  .insurance-two .areas .single-area {
    min-width:100%;
    height:400px!important;
  }
  .insurance-two .areas .inner-area:after {
    left:-25px!important;
  }
  .insurance-two .areas .inner-area:nth-child(even) .number {
    order:1!important;
    -webkit-text-stroke-width:6px;
  }
  .insurance-two .areas .inner-area:nth-child(even) .single-area {
    order:2;
  }
  .insurance-two .line {
    left:-25px;
  }
  
}
.insurance-two .areas .inner-area {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  align-items:center;
  position:relative;
}
@media (max-width:1024px) {
  .insurance-two .areas .inner-area {
    grid-template-columns:1fr;
  }
	
}
.insurance-two .areas .inner-area:after {
  content:"";
  background:var(--white);
  width:10px;
  height:10px;
  position:absolute;
  border-radius:100%;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border:10px solid #d0d0d0;
}
.insurance-two .areas .inner-area:nth-child(even) .number {
  order:2;
}
.insurance-two .areas .inner-area:nth-child(even) .single-area {
  order:1;
}
.insurance-two .areas .inner-area .number {
  opacity:.25;
  font-size:150px;
  text-align:center;
  font-weight:bold;
  -webkit-text-fill-color:white;
  -webkit-text-stroke-width:3px;
  -webkit-text-stroke-color:#ca8c2e;
}
.insurance-two .areas .single-area {
  box-sizing:border-box;
  backdrop-filter:blur(10px);
  border-radius:15px;
  min-width:200px;
  flex-direction:column;
  padding:20px;
  background-color:#D14513;
  height:250px;
  overflow:hidden;
  color:#fff;
}
.insurance-two .areas .single-area .front,
.insurance-two .areas .single-area .back {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  width:100%;
  height:100%;
}
.insurance-two .areas .single-area .front .inner,
.insurance-two .areas .single-area .back .inner {
  top:50%;
  position:absolute;
  left:50%;
  width:100%;
  height:100%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:15px;
}
.insurance-two .areas .single-area .front {
  top:0px;
  transform:translateY(0);
  transition:transform 1s ease;
}
.insurance-two .areas .single-area .back {
  top:100%;
  transform:translateY(100%);
  transition:transform 1s ease;
}
.insurance-two .areas .single-area:hover .front {
  top:0px;
  transform:translateY(-100%);
}
.insurance-two .areas .single-area:hover .back {
  top:0px;
  transform:translateY(-100%);
}
.insurance-two .areas .single-area h4 {
  font-size: 21px;
  color: #fff;
  font-weight: 600;
}
.insurance-two .areas .single-area .back .inner .content {
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
}
.insurance-two .areas .single-area .icon {
  background:#d14513;
  border:1.04813px dashed #d14513;
  border-radius:10px;
  width:100px;
  height:100px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.insurance-two .areas .single-area .icon img {
  width:100%;
}


.page-id-10916 #hide-contact {
  display: none;
}
.cta-margin {
  margin: 0 auto 30px;
  width: 100%;
  max-width: 1280px !important;
}
.elementor-align-center.btn-100 .elementor-button  {
  width: 100%!important;
}
.jet-sticky-section-sticky--stuck .raven-site-logo img{max-width: 100px!important;}
.cc-acc .ekit-accordion--content h3 {
  font-size: 25px;
  color: #fff;
}
.faq .jupiterx-single-advanced-accordion-wrapper {
  margin-bottom: 10px;
}
.ekit-accordion--content a {
  color: #fff;
}
.ekit-accordion--content a:hover {
  color: #961515;
}
a.pp-button {color: #fff!important;
  border-style: solid;
  border-width: 0;
  background-clip: border-box;
  border-color: #1CA8DD;
  border-top-width: 3px;
  border-right-width: 3px;
  border-bottom-width: 3px;
  border-left-width: 3px;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  font-family: "kessel-105-w00-heavy",Verdana,Arial,sans-serif;
  font-weight: 400;
  font-size: 20px;
  text-transform: uppercase;
  width: 390px;padding-top: 7px;
  padding-right: 15px;
  padding-bottom: 7px;
  padding-left: 10px;display: inline-block;
  text-align: center;
  max-width: 100%;margin-top: 25px;
}
.raven-sticky--effects .raven-site-logo img {
  width: 70px !important;
}
.serviceouter-one .slider-thumb {
  top:225px;
  position:absolute;
  width:400px;
  height:400px;
  left:50%;
  transform:translate(-50%,-50%);
}
.serviceouter-two .e-n-tabs-heading button:first-child::after {
  content: "1";
  position: absolute;
  left: 0;
  right: 0;
  top: 50px;font-weight: bold;
}
.serviceouter-four .raven-cta__title.raven-cta__content-item {
  background: rgba(0,0,0,.25);
  padding: 15px !important;
  border-left: 5px solid #ca8c2e;
  margin-bottom: 0px;
}
.serviceouter-four .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title .e-n-tab-icon {
  background: #CA8C2E;
  border-radius: 100px;
  padding: 11px;
}
.serviceouter-two .e-n-tabs-heading button:nth-child(2)::after {
  content: "2";
  position: absolute;
  left: 0;
  right: 0;
  top: 50px;font-weight: bold;
}.list-a.elementor-widget.elementor-list-item-link-full_width a {
  width: 100%;
  display: inline;
  color: #CA8C2E;
}
.serviceouter-two .e-n-tabs-heading button:nth-child(3)::after {
  content: "3";
  position: absolute;
  left: 0;
  right: 0;
  top: 50px;font-weight: bold;
}
.serviceouter-two .e-n-tabs-heading button:nth-child(4)::after {
  content: "4";
  position: absolute;
  left: 0;
  right: 0;
  top: 50px;font-weight: bold;
}
.serviceouter-two .e-n-tabs-heading button:nth-child(5)::after {
  content: "5";
  position: absolute;
  left: 0;
  right: 0;
  top: 50px;font-weight: bold;
}
.serviceouter-two .e-n-tabs-heading, .serviceouter-four .e-n-tabs-heading {
  background: transparent;
  border-radius: 0px;
}
.serviceouter-one .slider-thumb .main-image {
  position:absolute;
  width:250px;
  height:250px;
  border-radius:100%;
  display:block;
  object-fit:cover;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
.serviceouter-one .slider-thumb .shape {
  transform:translate(-50%,-50%);
  left:50%;
  top:50%;
  position:absolute;
}
.serviceouter-one .slider-thumb .shape img {
  width:100%;
  height:100%;
}
.serviceouter-one .slider-thumb .hero-shape {
  width:325px;
  height:325px;
  z-index:-1;
  animation-name:rotatemeTwo;
  animation-duration:15s;
  animation-iteration-count:infinite;
}
.serviceouter-one .slider-thumb .hero-shape3 {
  z-index:-1;
  animation-name:rotatemeTwo;
  animation-duration:20s;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
  width:400px;
  height:400px;
}
.serviceouter-one .slider-thumb .hero-shape5 {
  top:25px;
  left:50px;
  width:50px;
  transform:unset;
}
.serviceouter-one .slider-thumb .hero-shape6 {
  top:60px;
  right:15px;
  width:50px;
  left:unset;
  transform:unset;
}
.serviceouter-one .slider-thumb .hero-shape7 {
  bottom:60px;
  left:15px;
  width:50px;
  top:unset;
  transform:unset;
}
.serviceouter-one .slider-thumb .hero-shape8 {
  bottom:60px;
  right:15px;
  width:50px;
  top:unset;
  left:unset;
  transform:unset;
}
.serviceouter-one .position-relative {
  position: relative;
}
@keyframes rotatemeTwo {
  0% {
    transform:translate(-50%,-50%) rotate(0deg);
  }
  25% {
    transform:translate(-50%,-50%) rotate(-90deg);
  }
  50% {
    transform:translate(-50%,-50%) rotate(-180deg);
  }
  100% {
    transform:translate(-50%,-50%) rotate(-360deg);
  }
}
.pp-button-icon {
  font-size: 40px;
}.fa-arrow-circle-right {
  float: left;
  margin-right: 0px !important;
  clear: both;
}.pp-button-icon {
  color: #1CA8DD;
}
a.pp-button:hover {
  
	color: #E77D1B!important;
	text-decoration:none;
}	.ubermenu-responsive-toggle {
  padding:
15px 10px!important;
}	.ubermenu-skin-blue-silver {
  border:
		0px solid #003375!important;}
.ekit-wid-con .elementskit-image-accordion-wraper {
  
  min-height: 240px!important;
 
}
@media (min-width: 1024px), print {
  .swiper-slide-active .block-shadow.slider-container-block-background {
  height: 400px !important;
}
	 .raven-nav-menu-horizontal > .raven-nav-menu ul.sub-menu, .raven-nav-menu-horizontal > .raven-nav-menu ul.submenu {
   
		 padding: 0rem 0!important;}
	.page-header-angled .page-header-image .page-header-bg-image, .page-header-angled .page-header-image::before {
    -webkit-clip-path: polygon(0 0,100% 0,100% 100%,200px 100%);
    clip-path: polygon(0 0,100% 0,100% 100%,200px 100%);
  } .page-header-angled .page-header-image::before {
    --tw-bg-opacity: 1;
    background-color: rgb(245 245 245/var(--tw-bg-opacity));
    content: "";
    height: 100%;
    left: -1rem;
    pointer-events: none;
    position: absolute;
    top: 0;
    transform: scale(.9);
    transform-origin: left;
    width: 100%;
  }  .page-header-angled .page-header-image::after {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    bottom: 0;
    content: "";
    height: 3.5rem;
    left: 0;
    position: absolute;
    width: 100%;
  }
}
.vs {margin: 0 auto;}.vs-sec::before {
  content: " ";
  height: 100%;
  width: 1px;
  background: rgb(115, 115, 115);
  position: absolute;
  display: block;
  left: 50%;
}#form-banner .elementor-container {
  background: #63806F;
  padding: 20px 39px 25px;
}.ubermenu-item-level-1 .ubermenu-target.ubermenu-item-layout-default {
  padding: 5px 20px!important;
}.ubermenu-skin-blue-silver.ubermenu-horizontal .ubermenu-item-level-0.ubermenu-active::after {
	content: none!important;}.ubermenu-skin-blue-silver .ubermenu-item-level-0.ubermenu-active > .ubermenu-target {
  background:
transparent !important;
  color: #fff!important;
}.ubermenu-main .ubermenu-nav .ubermenu-item.ubermenu-item-level-0 > .ubermenu-target:hover {
  font-weight: 900;
  background:
#0b3684 !important;
  color: #fff!importanyt;
}.ubermenu-skin-blue-silver .ubermenu-submenu.ubermenu-submenu-drop {
 
  border:
		0px solid #e0e0e0!important;}
@media (min-width: 1025px) {
  .raven-nav-menu-horizontal > .raven-nav-menu a.raven-link-item:not([class*="elementor"]) .sub-arrow {
    display: block;
  }
}
@media (max-width:600px){.white-color {
  background: #fff !important;
}
.cta-margin {
  
  border-right: 10px solid #fff;
  border-left: 10px solid #fff;
}
	.safety .inner .elementor-widget-container {
 
  margin-right: 27px;
}
	.safety .inner img {
  display: block;
  width: 64%!important;
  margin-left: auto;
  margin-right: 0px!important;
}
}
@media screen and (max-width: 959px) {
  .ubermenu-responsive-default.ubermenu.ubermenu-mobile-modal {
   
    top: 130px!important;
   
   
    height: calc( 100vh - 130px )!important;
    padding: 30px 14px 35px 16px;
  }
}

.dropdown-item.active {
  
  background: #eee!important;
}

.hero .main-heading span {
  color:#D14513;
  position:relative;
  z-index:1;
}
.hero .main-heading span:before {
  content:"";
  position:absolute;
  top:35px;
  width:90%;
  background-image:url("https://divisionkangaroof.com/wp-content/uploads/2025/12/image-161.webp");
  background-repeat:no-repeat;
  height:100%;
  background-size:100%;
  animation:jump1 .7s ease-in-out alternate infinite;
  transform-origin:50% 50%;
  z-index:3;
}
@keyframes jump1 {
  0% {
    transform:translateY(0);
  }
  100% {
    transform:translateY(-10px);
  }
}
.hero .main-heading span:after {
  content:"";
  background:#000;
  width:60%;
  position:absolute;
  top:0px;
  top:50%;
  height:47%;
  left:0px;
  left:50%;
  z-index:2;
  transform:translate(-50%,-50%);
}
div.wpforms-container-full .wpforms-form .wpforms-submit-container {
 
  text-align: center;
}div.wpforms-container-full button[type="submit"] {
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 700;
  width: 200px;
}
.process .line {
  overflow: hidden;
  position: relative;
  width: 100%;
  
}
.process  .heading .count {
  background: #D14513;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 21px;margin-right: 15px;
}
.process .line .elementor-divider-separator {
  width: 200%;
  margin: 0 auto;
    margin-right: auto;
  margin-right: 0;
  position: absolute;
  right: 0px;

  animation:slide-right1 3s linear infinite alternate;
}
@keyframes slide-right1 {
  0% {
    transform:translateX(0);
  }
  100% {
    transform:translateX(100px);
  }
}
.raven-content-marquee-container .raven-content-marquee .raven-content-marquee-items-wrapper .elementor-repeater-item-type-image img, .raven-content-marquee-container .raven-content-marquee .raven-content-marquee-items-wrapper .elementor-repeater-item-type-testimonial img {
  -o-object-fit: fill!important;
  object-fit: fill!important;
}
div.wpforms-container-full input[type=tel]:focus,div.wpforms-container-full input[type=text]:focus,div.wpforms-container-full select:focus,div.wpforms-container-full textarea:focus{border:none!important
;}
div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-select-style-modern .choices .choices__inner .choices__list--single .choices__item--selectable {color:#fff!important;opacity:1!important;}
div.wpforms-container-full input[type="tel"], div.wpforms-container-full input[type="text"], div.wpforms-container-full input[type="email"], div.wpforms-container-full textarea, div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-select-style-modern .choices .choices__inner {
  background: transparent!important;
  color: #fff!important;
  border-bottom: 1px solid orange!important;
  border-top: 0px!important;
  border-left: 0px!important;
  border-right: 0px!important;border-radius: 0px!important;
}

.wpforms-container ::-webkit-input-placeholder { /* Chrome and Safari */
   color: #fff !important;
}
  
.wpforms-container :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: #fff !important;
   opacity: 1 !important;
}
  
.wpforms-container ::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #fff !important;
   opacity: 1 !important;
}
  
.wpforms-container :-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: #fff !important;
}
  
.wpforms-container ::-ms-input-placeholder { /* Microsoft Edge */
   color: #fff !important;
}
  
.wpforms-container ::placeholder {
   color: #fff !important;
}
.wpforms-field.wpforms-field-html {
  color: #ababab;
  font-size: 12px;
  line-height: 17px;
  text-align: center;
  font-weight: 600;
}

.wpforms-container .wpforms-field {
  padding: 10px 0!important;
  
}

.about-three .inner .raven-team-members-wrapper:before {
	
	display: none;
}

/* ======================================================================== */
/*  PRE-FOOTER CONTACT SECTION (.kr-prefooter-contact)                      */
/*  Global "Feel Free to Contact Us" form, prepended to footer-widget1.     */
/*  Mirrors live divisionkangaroof.com pre-footer Raven form, rebuilt with  */
/*  Gravity Forms. Roof-photo background + dark overlay; transparent inputs */
/*  with white underline accent in the Tungsten/Montserrat brand stack.     */
/* ======================================================================== */

.kr-prefooter-contact {
  width: 100%;
}

.kr-prefooter-contact .gform_wrapper,
.kr-prefooter-contact .gform_wrapper.gravity-theme,
.kr-prefooter-contact .gform_wrapper form {
  margin: 0;
  padding: 0;
}

/* Field grid: 3 columns on top (Name, Email, Phone), Message full-width below */
.kr-prefooter-contact .gform_wrapper .gform_fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.kr-prefooter-contact .gform_wrapper .gfield {
  margin: 0;
  padding: 0;
}

/* Override Gravity Forms' default `grid-column: 1 / -1` on every gfield so
   Name/Email/Phone share a 3-up row; textarea spans full width below. */
.kr-prefooter-contact .gform_wrapper .gform_fields > .gfield--type-text,
.kr-prefooter-contact .gform_wrapper .gform_fields > .gfield--type-email,
.kr-prefooter-contact .gform_wrapper .gform_fields > .gfield--type-phone {
  grid-column: span 1 !important;
}

.kr-prefooter-contact .gform_wrapper .gform_fields > .gfield--type-textarea {
  grid-column: 1 / -1 !important;
}

/* Inputs: transparent w/ white outline (matches live) */
.kr-prefooter-contact .gform_wrapper input[type="text"],
.kr-prefooter-contact .gform_wrapper input[type="email"],
.kr-prefooter-contact .gform_wrapper input[type="tel"],
.kr-prefooter-contact .gform_wrapper textarea {
  width: 100% !important;
  padding: 14px 16px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 4px !important;
  color: #1a1a1a !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
}

.kr-prefooter-contact .gform_wrapper textarea {
  min-height: 110px !important;
  resize: vertical !important;
}

.kr-prefooter-contact .gform_wrapper input::placeholder,
.kr-prefooter-contact .gform_wrapper textarea::placeholder {
  color: #6a6a6a !important;
  opacity: 1 !important;
}

.kr-prefooter-contact .gform_wrapper input:focus,
.kr-prefooter-contact .gform_wrapper textarea:focus {
  outline: 2px solid #D14513 !important;
  outline-offset: 1px !important;
  border-color: #D14513 !important;
}

/* Hide labels (placeholder-only design matches live) */
.kr-prefooter-contact .gform_wrapper .gfield_label,
.kr-prefooter-contact .gform_wrapper legend.gfield_label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Submit button — full-width orange to match live */
.kr-prefooter-contact .gform_wrapper .gform_footer {
  margin: 24px 0 0 !important;
  padding: 0 !important;
}

.kr-prefooter-contact .gform_wrapper .gform_footer input[type="submit"],
.kr-prefooter-contact .gform_wrapper .gform_footer button[type="submit"] {
  width: 100%;
  padding: 16px 28px !important;
  background: #D14513 !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 4px !important;
  font-family: "Tungsten", "Oswald", "Impact", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background 0.15s ease;
}

.kr-prefooter-contact .gform_wrapper .gform_footer input[type="submit"]:hover,
.kr-prefooter-contact .gform_wrapper .gform_footer button[type="submit"]:hover {
  background: #b83b10 !important;
}

/* Validation error styling (kept brand-consistent on dark background) */
.kr-prefooter-contact .gform_wrapper .gfield_error input,
.kr-prefooter-contact .gform_wrapper .gfield_error textarea {
  border-color: #ff8a65 !important;
  outline: 1px solid #ff8a65 !important;
}

.kr-prefooter-contact .gform_wrapper .validation_message,
.kr-prefooter-contact .gform_wrapper .gfield_validation_message {
  color: #ffb199 !important;
  font-size: 12px !important;
  margin-top: 4px !important;
}

/* Footer-widget-1 layout containers — KSES strips `display:` from
 * inline styles when the widget content is saved, so the grid and
 * flex declarations have to live here in CSS. The other inline
 * props (max-width, margin, padding, gap, grid-template-columns)
 * survive sanitization and stay inline.
 *
 * Affects: trust pillars row, 4-column main footer, accreditation row.
 * Caught by Drew 2026-04-29 — the prefooter widget edit re-saved
 * the widget content and KSES stripped these `display:` declarations
 * from the trust + main + accreditation sections, breaking layout.
 */
.kr-trust {
  display: grid !important;
  gap: 40px !important;
}
.kr-main {
  display: grid !important;
  align-items: stretch !important;
  gap: 40px !important;
  /* Hard-pin col-1 width to live's 342px (matches live's gold panel
   * width). Inline 2fr 1fr 1fr 1.3fr totals 5.3fr (I had miscounted
   * as 6.3 earlier), giving col-1 = 1012 * 2/5.3 = 382. Live uses 342.
   * Pin explicitly so gold col + content match live without further
   * fr math. (Drew 2026-04-30, DOM-measured.) */
  grid-template-columns: 342px 1fr 1fr 1.3fr !important;
}
.kr-accred-row {
  display: flex !important;
}

/* --- Footer gold left panel + orange accent bars (match live) -----------
 * Live's footer has a tan/gold panel behind the logo+description+social
 * column. The panel is FLUSH FULL HEIGHT — extends top-to-bottom of the
 * footer with no rounded corners, no margin gap, edge-to-edge to the
 * viewport-left at desktop widths. (PM-defect #1, Drew 2026-04-29.)
 *
 * Achieved with an absolute ::before pseudo on .kr-footer-wrap whose
 * width tracks the right edge of the first column at .kr-main's
 * 1180px max-width container. Math:
 *   left-gutter (50% - 590px) + container-pad-left (24) + col-1-width.
 * Col-1 width derives from grid-template-columns:2fr 1fr 1fr 1.3fr;
 * gap:40 inside container inner-width 1132. (1132-120) * 2/6.3 = 321.27.
 * Round to 322 for one extra pixel of gold past the col-1 right edge.
 */
/* Round 3 corrections from qa-auditor:
 *   - Gold ::before was on .kr-footer-wrap → extended past kr-main
 *     into the accred-row area. Moved to .kr-main so the gold ends
 *     at the bottom of the column row, matching live.
 *   - Mobile: gold should be edge-to-edge horizontally (live wraps
 *     gold to full viewport width on mobile). Achieved by removing
 *     kr-main horizontal padding and giving gold col full width.
 *   - Mobile nav stacks single-column on live (not 2-up); reverting.
 */
.kr-main {
  position: relative;
  isolation: isolate;
}
/* Mobile: keep wrap at natural width (no full-bleed). Earlier
 * full-bleed rule was the source of Drew's "gold bleeds off the page
 * to the left" report (2026-04-30). Gold stays contained at all
 * breakpoints, matching live. */
@media (min-width: 1180px) {
  .kr-main::before {
    content: "";
    position: absolute;
    /* Vertical extent: top of kr-footer-wrap's padding (56px above
     * kr-main) to bottom of kr-main row. Does NOT extend into accred. */
    top: -56px;
    bottom: 0;
    /* Horizontally: BOUNDED INSIDE the kr-main content area at the
     * exact col-1 position. left=24 accounts for kr-main padding-left.
     * Width 342 = col-1 width (hard-pinned via grid-template-columns).
     * Result: gold spans viewport x=154 to x=496, matching live's
     * x=150-492 within 4px. */
    left: 24px;
    width: 342px;
    background: rgb(202, 140, 46);
    z-index: -1;
  }
  .kr-main > div:first-child {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 32px 24px 32px 24px !important;
    color: #FFFFFF;
  }
}
@media (max-width: 1179px) {
  /* Mobile: gold should be edge-to-edge horizontally. Drop kr-main's
   * inline horizontal padding, give the gold col full width via
   * box-shadow extension to handle any residual padding from the
   * wrap. Other cols compensate via internal padding. */
  .kr-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .kr-main > div {
    padding: 0 16px !important;
  }
  .kr-main > div:first-child {
    background: rgb(202, 140, 46) !important;
    border-radius: 0 !important;
    padding: 28px 20px !important;
    color: #FFFFFF;
    margin: 0 !important;
  }
}
.kr-main > div:first-child p {
  color: #FFFFFF !important;
}
.kr-main > div:first-child a {
  color: #FFFFFF !important;
}
/* Social icon chips on the tan panel: keep brown-on-tan for contrast */
.kr-main > div:first-child .kr-foot-socials a {
  background: #2c1810 !important;
  color: #E6D4A8 !important;
}
.kr-main > div:first-child .kr-foot-socials a:hover,
.kr-main > div:first-child .kr-foot-socials a:focus-visible {
  background: #1a1008 !important;
  color: #FFFFFF !important;
}

/* Get In Touch icons (PM-defect #2): small orange Font Awesome glyphs
 * (map-marker, phone, clock) before each item, matching live. */
.kr-foot-contact__icon {
  color: #D14513;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 3px;
  width: 14px;
  text-align: center;
}
.kr-foot-contact li {
  min-width: 0;
}
.kr-foot-contact li > span,
.kr-foot-contact li > a {
  flex: 1 1 auto;
  min-width: 0;
  word-wrap: break-word;
}

/* Bottom copyright bar — Kadence's footer-html-row container picks up
 * its bg from the page footer section by default; live shows the bar
 * on solid black. Force black explicitly on the section to match.
 * (qa-auditor defect #3.) */
.footer-widget-area[data-section="kadence_customizer_footer_html"] {
  background-color: #000000 !important;
}

/* Orange accent bars on each section heading. Targets the 4-col main
 * footer headings (Quick Links / Explore / Get In Touch) plus the
 * Accreditation and "A Division Of" labels in the kr-accred-row. */
.kr-main > div:not(:first-child) > h4,
.kr-accred-row > div > div:first-child {
  position: relative;
  padding-left: 14px !important;
}
.kr-main > div:not(:first-child) > h4::before,
.kr-accred-row > div > div:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background-color: #D14513;
  border-radius: 1px;
}

@media (max-width: 900px) {
  .kr-trust,
  .kr-main {
    grid-template-columns: 1fr !important;
  }
  .kr-accred-row {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* Two-column desktop layout: house image left, form right.
 * `display: flex` on the inline style is stripped by WP's KSES
 * sanitizer when the widget content is saved, so the flex layout
 * has to live here in CSS. The other inline props (max-width, gap,
 * align-items) survive sanitization. */
.kr-prefooter-contact__inner--two-col {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: wrap;
}
.kr-prefooter-contact__image img {
  height: 100%;
  object-fit: cover;
}

/* Mobile: stack the two columns + the form fields to single column */
@media (max-width: 900px) {
  .kr-prefooter-contact__inner--two-col {
    flex-direction: column !important;
    gap: 32px !important;
  }
  .kr-prefooter-contact__image,
  .kr-prefooter-contact__form-wrap {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
  .kr-prefooter-contact__image img {
    max-height: 320px;
    object-fit: cover;
  }
}
@media (max-width: 768px) {
  .kr-prefooter-contact__overlay {
    padding: 56px 20px !important;
  }
  .kr-prefooter-contact .gform_wrapper .gform_fields {
    grid-template-columns: 1fr !important;
  }
}

/* ========================================================================
   SINGLE BLOG POST — match live's formatting
   Single posts render via the child-theme template at
   rebuild-plan/child-theme/kangaroof-child/single.php, which emits a
   handcrafted layout matching divisionkangaroof.com:
     1. Orange-band breadcrumb banner over a darkened roof-house photo.
     2. Two-column header row (title+meta+share | featured image).
     3. Full-width post body with orange H2 headings.
     4. Categories footer.
   The defensive `.post-thumbnail.article-post-thumbnail` hide below is a
   safety net — if anything ever falls back to Kadence's default
   single-post template, its hero block stays suppressed.
   ======================================================================== */
body.single-post .post-thumbnail.article-post-thumbnail {
  display: none !important;
}

/* --- Breadcrumb banner ---------------------------------------------------- */
/*
 * Live's structure (measured 2026-04-29 at 1440 viewport):
 *   - Banner full width, house-photo bg.
 *   - Dark scrim is NOT full-width: it covers only the LEFT half
 *     (~150px from viewport edge to ~834px, total ~684px wide). The
 *     right half of the banner shows the unscrim'd house photo.
 *   - Orange pill sits inside the scrim, near-flush left (~17px in),
 *     vertically centered. At 1440 the pill is at left=167.
 *   - Article content's left edge is also at ~145–150px (same gutter).
 * Below: scrim is positioned absolutely on the LEFT, width capped so
 * the right half of the banner stays unaltered. Pill is positioned
 * relative to the article's content gutter so it tracks the article
 * body's left edge across viewports.
 */
.kr-blog-banner {
  position: relative;
  width: 100%;
  min-height: 163px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  isolation: isolate;
}
.kr-blog-banner__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -2;
}
.kr-blog-banner__scrim {
  position: absolute;
  top: 0;
  bottom: 0;
  /* Scrim left edge tracks the article's left gutter (matches live's
     left=150 at 1440, where the article gutter is also ~150). */
  left: max(24px, calc((100vw - 1100px) / 2));
  /* Width 684 matches live's measured scrim at 1440. Capped at the
     viewport minus the same gutter on the right so very narrow
     viewports don't overflow. */
  width: min(684px, calc(100vw - max(48px, 100vw - 1100px)));
  background-color: rgba(0, 0, 0, 0.65);
  z-index: -1;
}
.kr-blog-banner__crumbs {
  background-color: rgb(209, 69, 19);
  padding: 14px 28px;
  border-radius: 2px;
  /* Align the pill's left edge with the article body's left gutter.
     `.kr-blog-article` is `max-width: 1100px; margin: 0 auto;`, so
     its left edge sits at `max(24px, (100vw - 1100px) / 2)`. Add a
     small inset (17px on live) so the pill clears the scrim edge. */
  margin-left: max(24px, calc((100vw - 1100px) / 2 + 17px));
  max-width: calc(47% - 34px);
}
.kr-blog-banner__crumbs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 16px;
  line-height: 1.4;
}
.kr-blog-banner__crumb {
  display: inline-flex;
  align-items: center;
}
.kr-blog-banner__crumb + .kr-blog-banner__crumb::before {
  content: "›";
  margin-right: 10px;
  opacity: 0.85;
}
.kr-blog-banner__crumb a {
  color: #fff;
  text-decoration: none;
}
.kr-blog-banner__crumb a:hover,
.kr-blog-banner__crumb a:focus-visible {
  text-decoration: underline;
}
.kr-blog-banner__home-icon {
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.kr-blog-banner__crumb--current {
  font-weight: 500;
}

/* --- Article container ---------------------------------------------------- */
.kr-blog-single {
  background: #fff;
  padding: 48px 24px 64px;
}
.kr-blog-article {
  max-width: 1100px;
  margin: 0 auto;
}

/* --- Two-column header row (title/meta/share | featured image) ------------ */
.kr-blog-header-row {
  display: flex;
  flex-direction: row;
  gap: 40px;
  align-items: flex-start;
  margin-bottom: 40px;
}
.kr-blog-header-row__left {
  flex: 1 1 50%;
  min-width: 0;
}
.kr-blog-header-row__right {
  flex: 0 1 505px;
  max-width: 505px;
}
.kr-blog-header-row--no-thumb .kr-blog-header-row__left {
  flex-basis: 100%;
}
.kr-blog-thumbnail {
  display: block;
  width: 100%;
  height: auto;
  max-height: 337px;
  object-fit: cover;
  border-radius: 2px;
}

/* --- Title (matches live: 35px, 600, uppercase, black) --------------------- */
.kr-blog-single .kr-blog-title,
body.single-post h1.kr-blog-title {
  font-size: 35px;
  font-weight: 600;
  line-height: 1.2;
  color: #000;
  text-transform: uppercase;
  margin: 0 0 18px;
  letter-spacing: normal;
}

/* --- Metadata list (Posted on / Reading time) ----------------------------- */
.kr-blog-meta {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 15px;
  color: #444;
}
.kr-blog-meta__item {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.kr-blog-meta__prefix {
  font-weight: 600;
  color: #222;
}

/* --- Share row (AddToAny) ------------------------------------------------- */
.kr-blog-share {
  margin-top: 6px;
}
.kr-blog-share .a2a_kit {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* --- Body content --------------------------------------------------------- */
.kr-blog-body {
  font-size: 16px;
  line-height: 1.7;
  color: #222;
}
.kr-blog-body p {
  margin: 0 0 1.2em;
}
.kr-blog-single .kr-blog-body h2,
.kr-blog-single .kr-blog-body h2.wp-block-heading,
body.single-post .kr-blog-body h2 {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.25;
  color: rgb(209, 69, 19);
  text-transform: uppercase;
  margin: 1.6em 0 0.6em;
  letter-spacing: normal;
}
.kr-blog-single .kr-blog-body h3,
body.single-post .kr-blog-body h3 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  color: #000;
  margin: 1.4em 0 0.5em;
  letter-spacing: normal;
}
.kr-blog-body img {
  max-width: 100%;
  height: auto;
  border-radius: 2px;
  margin: 1.2em 0;
}
.kr-blog-body a {
  color: rgb(209, 69, 19);
  text-decoration: underline;
}
.kr-blog-body ul,
.kr-blog-body ol {
  margin: 0 0 1.2em;
  padding-left: 1.5em;
}
.kr-blog-body li {
  margin-bottom: 0.4em;
}

/* --- Categories footer ---------------------------------------------------- */
.kr-blog-footer {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid #e6e6e6;
  font-size: 14px;
  color: #555;
}
.kr-blog-footer__label {
  font-weight: 600;
  margin-right: 8px;
}
.kr-blog-footer__cats a {
  color: rgb(209, 69, 19);
  text-decoration: none;
}
.kr-blog-footer__cats a:hover,
.kr-blog-footer__cats a:focus-visible {
  text-decoration: underline;
}

/* --- Blog landing page (/blogs/) ----------------------------------------- */
/*
 * Hero banner --landing modifier: same orange-pill scrim layout as
 * the single-post breadcrumb, but taller (273px vs 163) and the dark
 * scrim region also contains an H1 + tagline below the orange pill.
 */
.kr-blog-banner--landing {
  min-height: 273px;
}
.kr-blog-banner--landing .kr-blog-banner__content {
  position: relative;
  z-index: 1;
  margin-left: max(24px, calc((100vw - 1100px) / 2 + 17px));
  max-width: calc(min(684px, 100vw) - 50px);
  padding: 30px 0;
}
.kr-blog-banner--landing .kr-blog-banner__crumbs {
  display: inline-block;
  margin-left: 0;
  margin-bottom: 16px;
}
/* H1 inherits color from `.entry-content { color: rgb(38,40,36) }` —
 * Kadence sets the inherited body color on the entry-content wrapper
 * via a CSS variable, and the H1 inherits without a direct color rule
 * applying. Specificity bumps alone weren't enough because Kadence's
 * cascade controls the inherited color upstream. !important on the
 * direct H1 selector forces white regardless of inherited cascade.
 * Caught by qa-auditor 2026-04-29 pre-launch.
 */
.kr-blog-banner--landing .kr-blog-banner__heading,
body .kr-blog-banner--landing h1.kr-blog-banner__heading {
  color: #fff !important;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  text-transform: uppercase;
  margin: 0 0 12px;
  letter-spacing: normal;
}
.kr-blog-banner--landing .kr-blog-banner__tagline {
  color: #fff !important;
}

/* Sticky header — match live's behavior of pinning the entire 3-row
 * header (top dark bar + orange nav + secondary actions) to the top of
 * the viewport on scroll. Live uses JetSticky (Elementor JS plugin) to
 * dynamically toggle position:fixed at z-index 1100 once the user
 * scrolls past the header's natural position. We achieve the equivalent
 * with native CSS `position: sticky` — same visual result, no JS.
 * Caught by Drew 2026-04-29 visual review.
 */
header.site-header,
#masthead.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

/* Pill-shaped Elementor n-tabs CTA buttons.
 * Live uses border-radius: 50px on .e-n-tab-title (the Residential /
 * Commercial / Emergency / Exteriors tab buttons on the homepage CTA
 * group). Staging was rendering them at 2px (near-square). Caught by
 * Drew 2026-04-29 visual review.
 */
button.e-n-tab-title,
.e-n-tabs-heading button.e-n-tab-title {
  border-radius: 50px !important;
}
.kr-blog-banner--landing .kr-blog-banner__tagline {
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
}

/* Card grid: dark info panel under the featured image + orange CTA. */
.kr-blogs-grid--modern .kr-blog-card--modern {
  background: transparent !important;
  border: none !important;
  border-radius: 4px !important;
  overflow: hidden;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
}
.kr-blogs-grid--modern .kr-blog-card--modern .wp-block-post-featured-image {
  margin: 0;
  display: block;
  background: #1a1a1a; /* shows through if the image has transparency or fails to load */
}
.kr-blogs-grid--modern .kr-blog-card--modern .wp-block-post-featured-image a,
.kr-blogs-grid--modern .kr-blog-card--modern .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.kr-blogs-grid--modern .kr-blog-card__panel {
  background-color: #1a1a1a;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.kr-blogs-grid--modern .kr-blog-card__date,
.kr-blogs-grid--modern .kr-blog-card__date a {
  color: #d6d6d6;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin: 0 0 10px;
  text-decoration: none;
}
.kr-blogs-grid--modern .kr-blog-card__title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: normal;
}
.kr-blogs-grid--modern .kr-blog-card__title a,
.kr-blogs-grid--modern .kr-blog-card__title a:visited {
  color: #fff;
  text-decoration: none;
  background: none;
}
.kr-blogs-grid--modern .kr-blog-card__title a:hover,
.kr-blogs-grid--modern .kr-blog-card__title a:focus-visible {
  color: rgb(209, 69, 19);
}
.kr-blogs-grid--modern .kr-blog-card__cta {
  align-self: flex-start;
  margin-top: auto;
  background-color: rgb(209, 69, 19);
  color: #fff !important;
  padding: 11px 26px;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none !important;
  border-radius: 2px;
  display: inline-block;
  transition: background-color 0.15s ease;
}
.kr-blogs-grid--modern .kr-blog-card__cta:hover,
.kr-blogs-grid--modern .kr-blog-card__cta:focus-visible {
  background-color: rgb(168, 50, 10);
}

/* Pagination styling — pill numbers, centered. */
.kr-blogs-grid--modern .wp-block-query-pagination {
  gap: 8px;
}
.kr-blogs-grid--modern .wp-block-query-pagination-numbers .page-numbers {
  display: inline-block;
  min-width: 36px;
  padding: 6px 12px;
  text-align: center;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  text-decoration: none;
  color: #262824;
  font-size: 14px;
}
.kr-blogs-grid--modern .wp-block-query-pagination-numbers .page-numbers.current {
  background: rgb(209, 69, 19);
  color: #fff;
  border-color: rgb(209, 69, 19);
}

/* Mobile: stack the landing banner content. */
@media (max-width: 767px) {
  .kr-blog-banner--landing {
    min-height: 220px;
  }
  .kr-blog-banner--landing .kr-blog-banner__content {
    margin-left: 16px;
    max-width: calc(100% - 32px);
  }
  .kr-blog-banner--landing .kr-blog-banner__heading {
    font-size: 28px;
  }
  .kr-blog-banner--landing .kr-blog-banner__tagline {
    font-size: 14px;
  }
}

/* --- Mobile: stack the header row ----------------------------------------- */
@media (max-width: 767px) {
  .kr-blog-header-row {
    flex-direction: column;
    gap: 24px;
  }
  .kr-blog-header-row__right {
    flex-basis: auto;
    max-width: 100%;
    order: -1; /* image above title on mobile, matching most blog UX */
  }
  .kr-blog-title {
    font-size: 28px;
  }
  .kr-blog-body h2,
  .kr-blog-body .wp-block-heading {
    font-size: 26px;
  }
  .kr-blog-single {
    padding: 32px 16px 48px;
  }
  .kr-blog-banner {
    min-height: 130px;
  }
  /* On mobile, scrim spans the full width since the orange pill
     pushes near the right edge of the screen anyway. */
  .kr-blog-banner__scrim {
    width: 100%;
    max-width: none;
  }
  .kr-blog-banner__crumbs {
    padding: 10px 16px;
    margin-left: 16px;
    max-width: calc(100% - 32px);
  }
  .kr-blog-banner__crumbs-list {
    font-size: 14px;
  }
}