/*
Theme Name: Hello Elementor Child
Theme URI: https://arocconstruction.com/
Description: Child theme for A-ROC Construction. Holds all site custom CSS (moved from Customizer Additional CSS and Elementor page/element Custom CSS).
Author: A-ROC Construction
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* Load order mirrors the original cascade: element CSS, then page/template CSS, then global (former Additional CSS). */

/* ==========================================================================
   1. Element CSS (was Elementor element > Advanced > Custom CSS)
   ========================================================================== */

/* Post #42, element 1a4a7dd */
.elementor-42 .elementor-element.elementor-element-1a4a7dd a{
    border: none !important;
}

/* Post #42, element e0da860 */
.elementor-42 .elementor-element.elementor-element-e0da860 a{
    line-height: 1.4;
}

.elementor-42 .elementor-element.elementor-element-e0da860 ul.sub-menu li a{
    font-size: 130% !important;
    padding: 10px 0 !important;
}

.elementor-42 .elementor-element.elementor-element-e0da860 ul.sub-menu{
    margin-left: 10px;
}

/* Post #48, element 79744a9 */
.elementor-48 .elementor-element.elementor-element-79744a9 {
    backdrop-filter: blur(20px);
}

/* Template #1005 (Reviews Slider), element aa42b7a */
.elementor-1005 .aroc-review-carousel .elementor-swiper-button-prev svg{
    transform: rotate(180deg);
}

/* Post #40, element 6233126 */
.elementor-40 .elementor-element.elementor-element-6233126 .e-n-accordion-item[open] .e-n-accordion-item-title{
    border-bottom: none !important;
    
}

/* Post #371, element 9308ed5 */
.elementor-371 .aroc-faq .e-n-accordion-item[open] .e-n-accordion-item-title{
    border-bottom: none !important;
    
}

/* Post #379, element 14d3333 */
.elementor-379 .elementor-element.elementor-element-14d3333{
    overflow-wrap: anywhere;
}

/* ==========================================================================
   2. Page and template CSS (was Elementor page settings > Custom CSS)
   ========================================================================== */

/* --- Header template (#42) --- */
/*.aroc-nav-main{*/
/*    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 98.4% 110%, 1.4% 100%, 0% 75%)*/
/*}*/

.aroc-nav-cta .elementor-button-icon svg { width: 15px; height: 15px; fill: #FFFFFF;}

/* --- Footer template (#48) --- */
/* A-ROC footer (template 48) - rung-(d) CSS. No backslashes / CSS glyph content (see post 40 note). */

/* [1] Footer glow: source is a 3-stop radial (130% 130% at 100% 100%); Elementor's radial
   gradient has two stops and no size control. Native navy stays as the base colour. */
.aroc-footer { background-image: radial-gradient(130% 130% at 100% 100%, rgba(32,82,150,0.70) 0%, rgba(20,48,96,0.38) 34%, rgba(10,16,32,0) 64%); }

/* [2] Tagline emphasis: Text Editor has no colour control for <strong> runs. */
.aroc-footer-tagline strong { color: #FFFFFF; font-weight: 700; }

/* [3] Newsletter row: Form widget offers only size presets (no numeric field/button height or
   padding); source input is 52px tall with 16px 20px padding and a 52px SUBSCRIBE button. */
.aroc-newsletter .elementor-field-textual { min-height: 52px; height: 52px; padding: 16px 20px; line-height: normal; }
.aroc-newsletter .elementor-button { min-height: 52px; height: 52px; padding: 16px 30px; }
.aroc-newsletter .elementor-field-textual::placeholder { color: #757575; }

/* [4] Newsletter stacks input + button full-width at <=767. Form field/button widths only have
   desktop / tablet (md) / mobile (sm) classes, so the 481-767 band cannot be set natively. */
@media (max-width: 767px) {
  .aroc-newsletter .elementor-form-fields-wrapper { flex-direction: column; }
  .aroc-newsletter .elementor-field-group { width: 100%; max-width: 100%; }
  .aroc-newsletter .elementor-button { height: 48px; min-height: 48px; }
}

/* [5] Contact values break anywhere like the source (overflow-wrap:anywhere); Heading has no wrapping control. */
.aroc-footer .aroc-break .elementor-heading-title { overflow-wrap: anywhere; }

/* --- 404 template (#378) --- */
/* A-ROC 404 template (post 378) - rung-(d) CSS only. Block [1] is copied from About (217) with the arrow-rotate
   hover the developer added there, re-scoped to this document. No new blocks. No backslash escapes and no glyph
   content (the DEV bridge custom_css write path strips backslashes). */

/* [1] Primary-button arrow tile (hero, CTA, contact). The Button and Form widgets expose the glyph (selected_icon /
   selected_button_icon, editable) but have no control for an icon BOX: 38px square, own background, hanging 19px
   past the button edge. */
.elementor-378 .aroc-btn .elementor-button-content-wrapper { align-items: center; }
.elementor-378 .aroc-btn .elementor-button-text { text-align: start; }
.elementor-378 .aroc-btn .elementor-button-icon { flex: 0 0 38px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background-color: #FFFFFF; margin-inline-end: -19px; }
.elementor-378 .aroc-btn .elementor-button-icon svg { width: 13px; height: 13px; fill: #000000; }
.elementor-378 .aroc-btn--dark .elementor-button-icon { background-color: var(--e-global-color-secondary); }
.elementor-378 .aroc-btn--dark .elementor-button-icon svg { fill: #FFFFFF; }
.elementor-378 .aroc-btn:hover .elementor-button-icon svg{rotate: 44deg;}
.elementor-378 .aroc-btn .elementor-button-icon svg{
    transition: all 0.3s; 
}

/* --- About Us (#217) --- */
/* A-ROC About Us (post 217) - rung-(d) CSS only, carried over from home (post 40) for the REUSED sections and
   re-scoped to this page. Block numbers match build/page-custom.css on home so a fix can be mirrored 1:1.
   The new sections (hero adapt, Our Story, Values) add NO CSS: every value there is a native control.
   Rule for this file: NO backslash escapes and NO CSS glyph content (the DEV bridge custom_css write path strips
   backslashes). Glyphs are real SVG icons chosen in each widget's own Icon control. */

/* [1] Primary-button arrow tile (hero, CTA, contact). The Button and Form widgets expose the glyph (selected_icon /
   selected_button_icon, editable) but have no control for an icon BOX: 38px square, own background, hanging 19px
   past the button edge. */
.elementor-217 .aroc-btn .elementor-button-content-wrapper { align-items: center; }
.elementor-217 .aroc-btn .elementor-button-text { text-align: start; }
.elementor-217 .aroc-btn .elementor-button-icon { flex: 0 0 38px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background-color: #FFFFFF; margin-inline-end: -19px; }
.elementor-217 .aroc-btn .elementor-button-icon svg { width: 13px; height: 13px; fill: #000000; }
.elementor-217 .aroc-btn--dark .elementor-button-icon { background-color: var(--e-global-color-secondary); }
.elementor-217 .aroc-btn--dark .elementor-button-icon svg { fill: #FFFFFF; }
.elementor-217 .aroc-btn:hover .elementor-button-icon svg{rotate: 44deg;}
.elementor-217 .aroc-btn .elementor-button-icon svg{
    transition: all 0.3s; 
}

/* [2] Marquee motion. No native marquee/ticker widget; the words and stars are real Heading and Image widgets -
   this only animates their track (30s linear infinite, pause on hover). */
@keyframes aroc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.elementor-217 .aroc-marquee-track { animation: aroc-marquee 30s linear infinite; }
.elementor-217 .aroc-marquee-track:hover { animation-play-state: paused; }

/* [5] Service-area pill hover. Container hover controls style only the hovered element; the design flips the child
   text + pin to white and turns the arrow when the whole PILL is hovered. */
.elementor-217 .aroc-pill:hover .aroc-pill-name .elementor-heading-title { color: #FFFFFF; }
.elementor-217 .aroc-pill:hover .aroc-pill-pin .elementor-icon svg { fill: #FFFFFF; }
.elementor-217 .aroc-pill-arrow svg { transition: rotate 0.3s; }
.elementor-217 .aroc-pill:hover .aroc-pill-arrow svg { rotate: 45deg; }

/* [7] Quote form. The Form widget has no field padding/height, placeholder colour, checkbox accent or fixed submit
   width controls; the design's fields are underline-only 16px/0 with a 173x60 submit. */
.elementor-217 .aroc-form .elementor-field-textual { padding: 16px 0; min-height: 0; line-height: normal; }
.elementor-217 .aroc-form textarea.elementor-field-textual { min-height: 120px; }
.elementor-217 .aroc-form .elementor-field-textual::placeholder { color: rgba(11,18,32,0.6); opacity: 1; }
.elementor-217 .aroc-form .elementor-field-textual:focus { border-bottom-color: var(--e-global-color-primary); box-shadow: none; }
.elementor-217 .aroc-form .elementor-field-type-acceptance .elementor-field-option { display: flex; gap: 12px; align-items: flex-start; }
.elementor-217 .aroc-form .elementor-field-type-acceptance input { flex: 0 0 20px; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--e-global-color-primary); }
.elementor-217 .elementor-element.aroc-form .elementor-field-subgroup label { display: block; color: var(--e-global-color-text); line-height: 24px; }
.elementor-217 .aroc-form textarea.elementor-field-textual { margin-bottom: 6px; } /* textarea is inline-block: 6px descender gap */
.elementor-217 .aroc-form .elementor-button { width: 173px; height: 60px; }
.elementor-217 .aroc-form .elementor-button-content-wrapper { flex: 1 1 auto; justify-content: space-between; }
@media (max-width: 480px) { .elementor-217 .aroc-form .elementor-button { width: 100%; } }

/* [8] Long e-mail values break anywhere (overflow-wrap:anywhere); Heading has no wrapping control. */
.elementor-217 .aroc-break .elementor-heading-title { overflow-wrap: anywhere; }

/* --- Stats Band template (#1009) --- */
/* No custom CSS: overlay and avatar borders are native settings (copied from Home). */

/* --- Reviews Slider template (#1005) --- */
/* Used on Home and About via the Template widget. Arrow tiles: see "Review carousel arrow tiles" in section 3. */
/* Avatar: orange with navy overlay */
.elementor-1005 .aroc-avatar-grad { background-image: linear-gradient(rgba(11,18,32,0.25), rgba(11,18,32,0.25)); background-color: var(--e-global-color-primary); }

/* --- Services (#247) --- */
/* A-ROC Services (post 247) - rung-(d) CSS only, carried over from home (post 40) for the REUSED sections and
   re-scoped to this page. Block numbers match build/page-custom.css on home so a fix can be mirrored 1:1.
   The adapted hero adds NO CSS: every value there is a native control.
   Rule for this file: NO backslash escapes and NO CSS glyph content (the DEV bridge custom_css write path strips
   backslashes). Glyphs are real SVG icons chosen in each widget's own Icon control. */

/* [1] Primary-button arrow tile (.btn-primary::after in the source). The Button and Form widgets
   expose the glyph (selected_icon / selected_button_icon, editable) but have no control for an
   icon BOX: 38px square, own background, hanging 19px past the button edge. */
.elementor-247 .aroc-btn .elementor-button-content-wrapper { align-items: center; }
.elementor-247 .aroc-btn .elementor-button-text { text-align: start; } /* source label wraps left-aligned on narrow screens */
.elementor-247 .aroc-btn .elementor-button-icon { flex: 0 0 38px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background-color: #FFFFFF; margin-inline-end: -19px; }
.elementor-247 .aroc-btn .elementor-button-icon svg { width: 13px; height: 13px; fill: #000000; }
.elementor-247 .aroc-btn--dark .elementor-button-icon { background-color: var(--e-global-color-secondary); }
.elementor-247 .aroc-btn--dark .elementor-button-icon svg { fill: #FFFFFF; }
.elementor-247 .aroc-btn:hover .elementor-button-icon svg{rotate: 44deg;}
.elementor-247 .aroc-btn .elementor-button-icon svg{
    transition: all 0.3s; 
}

/* [2] Marquee motion. No native marquee/ticker widget; the words and stars are real Heading and
   Image widgets - this only animates their track (source: 30s linear infinite, pause on hover). */
@keyframes aroc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.elementor-247 .aroc-marquee-track { animation: aroc-marquee 30s linear infinite; }
.elementor-247 .aroc-marquee-track:hover { animation-play-state: paused; }

/* [3] Multi-stop gradients. Elementor's gradient control has exactly two colour stops; the
   source uses three (services band) and four (stats band).
   The native background colour stays as the fallback. */
.elementor-247 .aroc-s02-services { background-image: linear-gradient(115deg, #E9F4FF 0%, #F3F8FC 48%, #FFF3DC 100%); }

/* [4] Service card hover. Container hover controls style only the hovered element; the source
   flips the child body panel, title, text and CTA when the whole CARD is hovered, and zooms the image. */
.elementor-247 .aroc-service-card:hover > .e-con { background-color: var(--e-global-color-primary); }
.elementor-247 .aroc-service-card:hover .elementor-heading-title,
.elementor-247 .aroc-service-card:hover .elementor-widget-text-editor { color: #FFFFFF; }
.elementor-247 .aroc-service-card:hover .aroc-btn .elementor-button,
.elementor-247 .aroc-service-card:hover .aroc-btn .elementor-button:hover { background-color: #FFFFFF; color: var(--e-global-color-secondary); } /* source: card-hover CTA stays white/navy even when the button itself is hovered (beats the button's own #E04F00 hover) */
.elementor-247 .aroc-card-img { overflow: hidden; }
.elementor-247 .aroc-card-img img { transition: transform 0.5s ease; }
.elementor-247 .aroc-service-card:hover .aroc-card-img img { transform: scale(1.08); }

/* [7] Quote form. The Form widget has no field padding/height, placeholder colour, checkbox accent
   or fixed submit width controls; source fields are underline-only 16px/0 with a 173x60 submit. */
.elementor-247 .aroc-form .elementor-field-textual { padding: 16px 0; min-height: 0; line-height: normal; }
.elementor-247 .aroc-form textarea.elementor-field-textual { min-height: 120px; }
.elementor-247 .aroc-form .elementor-field-textual::placeholder { color: rgba(11,18,32,0.6); opacity: 1; }
.elementor-247 .aroc-form .elementor-field-textual:focus { border-bottom-color: var(--e-global-color-primary); box-shadow: none; }
.elementor-247 .aroc-form .elementor-field-type-acceptance .elementor-field-option { display: flex; gap: 12px; align-items: flex-start; }
.elementor-247 .aroc-form .elementor-field-type-acceptance input { flex: 0 0 20px; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--e-global-color-primary); }
.elementor-247 .elementor-element.aroc-form .elementor-field-subgroup label { display: block; color: var(--e-global-color-text); line-height: 24px; }
.elementor-247 .aroc-form textarea.elementor-field-textual { margin-bottom: 6px; } /* source textarea is inline-block: 6px descender gap */
.elementor-247 .aroc-form .elementor-button { width: 173px; height: 60px; }
.elementor-247 .aroc-form .elementor-button-content-wrapper { flex: 1 1 auto; justify-content: space-between; }
@media (max-width: 480px) { .elementor-247 .aroc-form .elementor-button { width: 100%; } }

/* [8] Long e-mail values break anywhere like the source (overflow-wrap:anywhere); Heading has no wrapping control. */
.elementor-247 .aroc-break .elementor-heading-title { overflow-wrap: anywhere; }

/* [10] Services carousel = source's fixed 415px cards (Slick variableWidth) filling to the right viewport edge.
   Nested Carousel has no fixed slide width / slidesPerView:auto control, so the widget gets a fixed Custom Width of
   7 x 415 + 6 x 20 = 3025px with 7 slides per view on every device (80vw cards at <=480: calc(560vw + 120px)).
   Swiper's own maths then yields exactly 415px slides, the row covers viewports up to 3840px (the source shows 7
   cards there), and every visible card stays inside the swiper wrapper, which Elementor needs to keep slides
   non-inert. The section clips what lies beyond the viewport. Core rules cap swiper widgets at their parent
   (.e-con > .elementor-widget max-width:100%, .e-widget-swiper width:100%); they are lifted here, and the width
   value itself still comes from the widget's own Custom Width control (--container-widget-width). */
.elementor.elementor-247 .e-con > .elementor-widget.aroc-service-carousel { max-width: none; width: var(--container-widget-width); }

/* --- Water Damage Restoration (#256) --- */
/* A-ROC Water Damage Restoration (post 256) - rung-(d) CSS only, carried over from home (post 40) for the REUSED
   sections and re-scoped to this page. Block numbers match build/page-custom.css on home so a fix can be mirrored 1:1.
   The adapted and new sections (hero, overview, local details, included, details) add NO CSS: every value there is a
   native control. Blocks [5] (service-area pills) and [6] (review arrows) are not carried: this page has neither section.
   Rule for this file: NO backslash escapes and NO CSS glyph content (the DEV bridge custom_css write path strips
   backslashes). Glyphs are real SVG icons chosen in each widget's own Icon control. */

/* [1] Primary-button arrow tile (.btn-primary::after in the source). The Button and Form widgets
   expose the glyph (selected_icon / selected_button_icon, editable) but have no control for an
   icon BOX: 38px square, own background, hanging 19px past the button edge. */
.elementor-256 .aroc-btn .elementor-button-content-wrapper { align-items: center; }
.elementor-256 .aroc-btn .elementor-button-text { text-align: start; } /* source label wraps left-aligned on narrow screens */
.elementor-256 .aroc-btn .elementor-button-icon { flex: 0 0 38px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background-color: #FFFFFF; margin-inline-end: -19px; }
.elementor-256 .aroc-btn .elementor-button-icon svg { width: 13px; height: 13px; fill: #000000; }
.elementor-256 .aroc-btn--dark .elementor-button-icon { background-color: var(--e-global-color-secondary); }
.elementor-256 .aroc-btn--dark .elementor-button-icon svg { fill: #FFFFFF; }
/* Arrow turns on button hover (mirrors the developer's 2026-10-01 rule on home 40). The Button widget's hover controls
   cover colours and an entrance-style hover animation, not a transform on the icon alone. */
.elementor-256 .aroc-btn .elementor-button-icon svg { transition: all 0.3s; }
.elementor-256 .aroc-btn:hover .elementor-button-icon svg { rotate: 44deg; }

/* [2] Marquee motion. No native marquee/ticker widget; the words and stars are real Heading and
   Image widgets - this only animates their track (source: 30s linear infinite, pause on hover). */
@keyframes aroc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.elementor-256 .aroc-marquee-track { animation: aroc-marquee 30s linear infinite; }
.elementor-256 .aroc-marquee-track:hover { animation-play-state: paused; }

/* [3] Multi-stop gradients. Elementor's gradient control has exactly two colour stops; the
   source uses three (services band) and four (stats band, avatar, active step).
   The native background colour stays as the fallback. */
.elementor-256 .aroc-s02-services { background-image: linear-gradient(115deg, #E9F4FF 0%, #F3F8FC 48%, #FFF3DC 100%); }
.elementor-256 .aroc-avatar-grad { background-image: linear-gradient(rgba(11,18,32,0.25), rgba(11,18,32,0.25)); background-color: var(--e-global-color-primary); }
.elementor-256 .aroc-step-num--active { background-image: none; }

/* [4] Service card hover. Container hover controls style only the hovered element; the source
   flips the child body panel, title, text and CTA when the whole CARD is hovered, and zooms the image. */
.elementor-256 .aroc-service-card:hover > .e-con { background-color: var(--e-global-color-primary); }
.elementor-256 .aroc-service-card:hover .elementor-heading-title,
.elementor-256 .aroc-service-card:hover .elementor-widget-text-editor { color: #FFFFFF; }
.elementor-256 .aroc-service-card:hover .aroc-btn .elementor-button,
.elementor-256 .aroc-service-card:hover .aroc-btn .elementor-button:hover { background-color: #FFFFFF; color: var(--e-global-color-secondary); } /* source: card-hover CTA stays white/navy even when the button itself is hovered (beats the button's own #E04F00 hover) */
.elementor-256 .aroc-card-img { overflow: hidden; }
.elementor-256 .aroc-card-img img { transition: transform 0.5s ease; }
.elementor-256 .aroc-service-card:hover .aroc-card-img img { transform: scale(1.08); }

/* [7] Quote form. The Form widget has no field padding/height, placeholder colour, checkbox accent
   or fixed submit width controls; source fields are underline-only 16px/0 with a 173x60 submit. */
.elementor-256 .aroc-form .elementor-field-textual { padding: 16px 0; min-height: 0; line-height: normal; }
.elementor-256 .aroc-form textarea.elementor-field-textual { min-height: 120px; }
.elementor-256 .aroc-form .elementor-field-textual::placeholder { color: rgba(11,18,32,0.6); opacity: 1; }
.elementor-256 .aroc-form .elementor-field-textual:focus { border-bottom-color: var(--e-global-color-primary); box-shadow: none; }
.elementor-256 .aroc-form .elementor-field-type-acceptance .elementor-field-option { display: flex; gap: 12px; align-items: flex-start; }
.elementor-256 .aroc-form .elementor-field-type-acceptance input { flex: 0 0 20px; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--e-global-color-primary); }
.elementor-256 .elementor-element.aroc-form .elementor-field-subgroup label { display: block; color: var(--e-global-color-text); line-height: 24px; }
.elementor-256 .aroc-form textarea.elementor-field-textual { margin-bottom: 6px; } /* source textarea is inline-block: 6px descender gap */
.elementor-256 .aroc-form .elementor-button { width: 173px; height: 60px; }
.elementor-256 .aroc-form .elementor-button-content-wrapper { flex: 1 1 auto; justify-content: space-between; }
@media (max-width: 480px) { .elementor-256 .aroc-form .elementor-button { width: 100%; } }

/* [8] Long e-mail values break anywhere like the source (overflow-wrap:anywhere); Heading has no wrapping control. */
.elementor-256 .aroc-break .elementor-heading-title { overflow-wrap: anywhere; }

/* [9] FAQ title-to-icon gap 16px (source). Nested Accordion's icon Spacing control is conditioned on
   title position != stretch, and stretch is what pins the +/- icon to the right edge; it stays at 10px. */
.elementor-256 .aroc-faq { --n-accordion-icon-gap: 16px; }

/* [10] Services carousel = source's fixed 415px cards (Slick variableWidth) filling to the right viewport edge.
   Nested Carousel has no fixed slide width / slidesPerView:auto control, so the widget gets a fixed Custom Width of
   7 x 415 + 6 x 20 = 3025px with 7 slides per view on every device (80vw cards at <=480: calc(560vw + 120px)).
   Swiper's own maths then yields exactly 415px slides, the row covers viewports up to 3840px (the source shows 7
   cards there), and every visible card stays inside the swiper wrapper, which Elementor needs to keep slides
   non-inert. The section clips what lies beyond the viewport. Core rules cap swiper widgets at their parent
   (.e-con > .elementor-widget max-width:100%, .e-widget-swiper width:100%); they are lifted here, and the width
   value itself still comes from the widget's own Custom Width control (--container-widget-width). */
.elementor.elementor-256 .e-con > .elementor-widget.aroc-service-carousel { max-width: none; width: var(--container-widget-width); }

/* --- Privacy Policy (#379) --- */
/* A-ROC Privacy Policy (post 379) - rung-(d) CSS only. Block [1] is copied from About (217) with the arrow-rotate
   hover the developer added there, re-scoped to this document. No new blocks. No backslash escapes and no glyph
   content (the DEV bridge custom_css write path strips backslashes). */

/* [1] Primary-button arrow tile (hero, CTA, contact). The Button and Form widgets expose the glyph (selected_icon /
   selected_button_icon, editable) but have no control for an icon BOX: 38px square, own background, hanging 19px
   past the button edge. */
.elementor-379 .aroc-btn .elementor-button-content-wrapper { align-items: center; }
.elementor-379 .aroc-btn .elementor-button-text { text-align: start; }
.elementor-379 .aroc-btn .elementor-button-icon { flex: 0 0 38px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background-color: #FFFFFF; margin-inline-end: -19px; }
.elementor-379 .aroc-btn .elementor-button-icon svg { width: 13px; height: 13px; fill: #000000; }
.elementor-379 .aroc-btn--dark .elementor-button-icon { background-color: var(--e-global-color-secondary); }
.elementor-379 .aroc-btn--dark .elementor-button-icon svg { fill: #FFFFFF; }
.elementor-379 .aroc-btn:hover .elementor-button-icon svg{rotate: 44deg;}
.elementor-379 .aroc-btn .elementor-button-icon svg{
    transition: all 0.3s; 
}

/* --- Mold Remediation and Mold Removal (#453) --- */
/* A-ROC Mold Remediation and Mold Removal (post 453, cloned from service template 256) - rung-(d) CSS only, carried over from home (post 40) for the REUSED
   sections and re-scoped to this page. Block numbers match build/page-custom.css on home so a fix can be mirrored 1:1.
   The adapted and new sections (hero, overview, local details, included, details) add NO CSS: every value there is a
   native control. Blocks [5] (service-area pills) and [6] (review arrows) are not carried: this page has neither section.
   Rule for this file: NO backslash escapes and NO CSS glyph content (the DEV bridge custom_css write path strips
   backslashes). Glyphs are real SVG icons chosen in each widget's own Icon control. */

/* [1] Primary-button arrow tile (.btn-primary::after in the source). The Button and Form widgets
   expose the glyph (selected_icon / selected_button_icon, editable) but have no control for an
   icon BOX: 38px square, own background, hanging 19px past the button edge. */
.elementor-453 .aroc-btn .elementor-button-content-wrapper { align-items: center; }
.elementor-453 .aroc-btn .elementor-button-text { text-align: start; } /* source label wraps left-aligned on narrow screens */
.elementor-453 .aroc-btn .elementor-button-icon { flex: 0 0 38px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background-color: #FFFFFF; margin-inline-end: -19px; }
.elementor-453 .aroc-btn .elementor-button-icon svg { width: 13px; height: 13px; fill: #000000; }
.elementor-453 .aroc-btn--dark .elementor-button-icon { background-color: var(--e-global-color-secondary); }
.elementor-453 .aroc-btn--dark .elementor-button-icon svg { fill: #FFFFFF; }
/* Arrow turns on button hover (mirrors the developer's 2026-10-01 rule on home 40). The Button widget's hover controls
   cover colours and an entrance-style hover animation, not a transform on the icon alone. */
.elementor-453 .aroc-btn .elementor-button-icon svg { transition: all 0.3s; }
.elementor-453 .aroc-btn:hover .elementor-button-icon svg { rotate: 44deg; }

/* [2] Marquee motion. No native marquee/ticker widget; the words and stars are real Heading and
   Image widgets - this only animates their track (source: 30s linear infinite, pause on hover). */
@keyframes aroc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.elementor-453 .aroc-marquee-track { animation: aroc-marquee 30s linear infinite; }
.elementor-453 .aroc-marquee-track:hover { animation-play-state: paused; }

/* [3] Multi-stop gradients. Elementor's gradient control has exactly two colour stops; the
   source uses three (services band) and four (stats band, avatar, active step).
   The native background colour stays as the fallback. */
.elementor-453 .aroc-s02-services { background-image: linear-gradient(115deg, #E9F4FF 0%, #F3F8FC 48%, #FFF3DC 100%); }
.elementor-453 .aroc-avatar-grad { background-image: linear-gradient(rgba(11,18,32,0.25), rgba(11,18,32,0.25)); background-color: var(--e-global-color-primary); }
.elementor-453 .aroc-step-num--active { background-image: none; }

/* [4] Service card hover. Container hover controls style only the hovered element; the source
   flips the child body panel, title, text and CTA when the whole CARD is hovered, and zooms the image. */
.elementor-453 .aroc-service-card:hover > .e-con { background-color: var(--e-global-color-primary); }
.elementor-453 .aroc-service-card:hover .elementor-heading-title,
.elementor-453 .aroc-service-card:hover .elementor-widget-text-editor { color: #FFFFFF; }
.elementor-453 .aroc-service-card:hover .aroc-btn .elementor-button,
.elementor-453 .aroc-service-card:hover .aroc-btn .elementor-button:hover { background-color: #FFFFFF; color: var(--e-global-color-secondary); } /* source: card-hover CTA stays white/navy even when the button itself is hovered (beats the button's own #E04F00 hover) */
.elementor-453 .aroc-card-img { overflow: hidden; }
.elementor-453 .aroc-card-img img { transition: transform 0.5s ease; }
.elementor-453 .aroc-service-card:hover .aroc-card-img img { transform: scale(1.08); }

/* [7] Quote form. The Form widget has no field padding/height, placeholder colour, checkbox accent
   or fixed submit width controls; source fields are underline-only 16px/0 with a 173x60 submit. */
.elementor-453 .aroc-form .elementor-field-textual { padding: 16px 0; min-height: 0; line-height: normal; }
.elementor-453 .aroc-form textarea.elementor-field-textual { min-height: 120px; }
.elementor-453 .aroc-form .elementor-field-textual::placeholder { color: rgba(11,18,32,0.6); opacity: 1; }
.elementor-453 .aroc-form .elementor-field-textual:focus { border-bottom-color: var(--e-global-color-primary); box-shadow: none; }
.elementor-453 .aroc-form .elementor-field-type-acceptance .elementor-field-option { display: flex; gap: 12px; align-items: flex-start; }
.elementor-453 .aroc-form .elementor-field-type-acceptance input { flex: 0 0 20px; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--e-global-color-primary); }
.elementor-453 .elementor-element.aroc-form .elementor-field-subgroup label { display: block; color: var(--e-global-color-text); line-height: 24px; }
.elementor-453 .aroc-form textarea.elementor-field-textual { margin-bottom: 6px; } /* source textarea is inline-block: 6px descender gap */
.elementor-453 .aroc-form .elementor-button { width: 173px; height: 60px; }
.elementor-453 .aroc-form .elementor-button-content-wrapper { flex: 1 1 auto; justify-content: space-between; }
@media (max-width: 480px) { .elementor-453 .aroc-form .elementor-button { width: 100%; } }

/* [8] Long e-mail values break anywhere like the source (overflow-wrap:anywhere); Heading has no wrapping control. */
.elementor-453 .aroc-break .elementor-heading-title { overflow-wrap: anywhere; }

/* [9] FAQ title-to-icon gap 16px (source). Nested Accordion's icon Spacing control is conditioned on
   title position != stretch, and stretch is what pins the +/- icon to the right edge; it stays at 10px. */
.elementor-453 .aroc-faq { --n-accordion-icon-gap: 16px; }

/* [10] Services carousel = source's fixed 415px cards (Slick variableWidth) filling to the right viewport edge.
   Nested Carousel has no fixed slide width / slidesPerView:auto control, so the widget gets a fixed Custom Width of
   7 x 415 + 6 x 20 = 3025px with 7 slides per view on every device (80vw cards at <=480: calc(560vw + 120px)).
   Swiper's own maths then yields exactly 415px slides, the row covers viewports up to 3840px (the source shows 7
   cards there), and every visible card stays inside the swiper wrapper, which Elementor needs to keep slides
   non-inert. The section clips what lies beyond the viewport. Core rules cap swiper widgets at their parent
   (.e-con > .elementor-widget max-width:100%, .e-widget-swiper width:100%); they are lifted here, and the width
   value itself still comes from the widget's own Custom Width control (--container-widget-width). */
.elementor.elementor-453 .e-con > .elementor-widget.aroc-service-carousel { max-width: none; width: var(--container-widget-width); }

/* --- Emergency Services (#454) --- */
/* A-ROC Emergency Restoration Services (post 454, cloned from service template 256) - rung-(d) CSS only, carried over from home (post 40) for the REUSED
   sections and re-scoped to this page. Block numbers match build/page-custom.css on home so a fix can be mirrored 1:1.
   The adapted and new sections (hero, overview, local details, included, details) add NO CSS: every value there is a
   native control. Blocks [5] (service-area pills) and [6] (review arrows) are not carried: this page has neither section.
   Rule for this file: NO backslash escapes and NO CSS glyph content (the DEV bridge custom_css write path strips
   backslashes). Glyphs are real SVG icons chosen in each widget's own Icon control. */

/* [1] Primary-button arrow tile (.btn-primary::after in the source). The Button and Form widgets
   expose the glyph (selected_icon / selected_button_icon, editable) but have no control for an
   icon BOX: 38px square, own background, hanging 19px past the button edge. */
.elementor-454 .aroc-btn .elementor-button-content-wrapper { align-items: center; }
.elementor-454 .aroc-btn .elementor-button-text { text-align: start; } /* source label wraps left-aligned on narrow screens */
.elementor-454 .aroc-btn .elementor-button-icon { flex: 0 0 38px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background-color: #FFFFFF; margin-inline-end: -19px; }
.elementor-454 .aroc-btn .elementor-button-icon svg { width: 13px; height: 13px; fill: #000000; }
.elementor-454 .aroc-btn--dark .elementor-button-icon { background-color: var(--e-global-color-secondary); }
.elementor-454 .aroc-btn--dark .elementor-button-icon svg { fill: #FFFFFF; }
/* Arrow turns on button hover (mirrors the developer's 2026-10-01 rule on home 40). The Button widget's hover controls
   cover colours and an entrance-style hover animation, not a transform on the icon alone. */
.elementor-454 .aroc-btn .elementor-button-icon svg { transition: all 0.3s; }
.elementor-454 .aroc-btn:hover .elementor-button-icon svg { rotate: 44deg; }

/* [2] Marquee motion. No native marquee/ticker widget; the words and stars are real Heading and
   Image widgets - this only animates their track (source: 30s linear infinite, pause on hover). */
@keyframes aroc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.elementor-454 .aroc-marquee-track { animation: aroc-marquee 30s linear infinite; }
.elementor-454 .aroc-marquee-track:hover { animation-play-state: paused; }

/* [3] Multi-stop gradients. Elementor's gradient control has exactly two colour stops; the
   source uses three (services band) and four (stats band, avatar, active step).
   The native background colour stays as the fallback. */
.elementor-454 .aroc-s02-services { background-image: linear-gradient(115deg, #E9F4FF 0%, #F3F8FC 48%, #FFF3DC 100%); }
.elementor-454 .aroc-avatar-grad { background-image: linear-gradient(rgba(11,18,32,0.25), rgba(11,18,32,0.25)); background-color: var(--e-global-color-primary); }
.elementor-454 .aroc-step-num--active { background-image: none; }

/* [4] Service card hover. Container hover controls style only the hovered element; the source
   flips the child body panel, title, text and CTA when the whole CARD is hovered, and zooms the image. */
.elementor-454 .aroc-service-card:hover > .e-con { background-color: var(--e-global-color-primary); }
.elementor-454 .aroc-service-card:hover .elementor-heading-title,
.elementor-454 .aroc-service-card:hover .elementor-widget-text-editor { color: #FFFFFF; }
.elementor-454 .aroc-service-card:hover .aroc-btn .elementor-button,
.elementor-454 .aroc-service-card:hover .aroc-btn .elementor-button:hover { background-color: #FFFFFF; color: var(--e-global-color-secondary); } /* source: card-hover CTA stays white/navy even when the button itself is hovered (beats the button's own #E04F00 hover) */
.elementor-454 .aroc-card-img { overflow: hidden; }
.elementor-454 .aroc-card-img img { transition: transform 0.5s ease; }
.elementor-454 .aroc-service-card:hover .aroc-card-img img { transform: scale(1.08); }

/* [7] Quote form. The Form widget has no field padding/height, placeholder colour, checkbox accent
   or fixed submit width controls; source fields are underline-only 16px/0 with a 173x60 submit. */
.elementor-454 .aroc-form .elementor-field-textual { padding: 16px 0; min-height: 0; line-height: normal; }
.elementor-454 .aroc-form textarea.elementor-field-textual { min-height: 120px; }
.elementor-454 .aroc-form .elementor-field-textual::placeholder { color: rgba(11,18,32,0.6); opacity: 1; }
.elementor-454 .aroc-form .elementor-field-textual:focus { border-bottom-color: var(--e-global-color-primary); box-shadow: none; }
.elementor-454 .aroc-form .elementor-field-type-acceptance .elementor-field-option { display: flex; gap: 12px; align-items: flex-start; }
.elementor-454 .aroc-form .elementor-field-type-acceptance input { flex: 0 0 20px; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--e-global-color-primary); }
.elementor-454 .elementor-element.aroc-form .elementor-field-subgroup label { display: block; color: var(--e-global-color-text); line-height: 24px; }
.elementor-454 .aroc-form textarea.elementor-field-textual { margin-bottom: 6px; } /* source textarea is inline-block: 6px descender gap */
.elementor-454 .aroc-form .elementor-button { width: 173px; height: 60px; }
.elementor-454 .aroc-form .elementor-button-content-wrapper { flex: 1 1 auto; justify-content: space-between; }
@media (max-width: 480px) { .elementor-454 .aroc-form .elementor-button { width: 100%; } }

/* [8] Long e-mail values break anywhere like the source (overflow-wrap:anywhere); Heading has no wrapping control. */
.elementor-454 .aroc-break .elementor-heading-title { overflow-wrap: anywhere; }

/* [9] FAQ title-to-icon gap 16px (source). Nested Accordion's icon Spacing control is conditioned on
   title position != stretch, and stretch is what pins the +/- icon to the right edge; it stays at 10px. */
.elementor-454 .aroc-faq { --n-accordion-icon-gap: 16px; }

/* [10] Services carousel = source's fixed 415px cards (Slick variableWidth) filling to the right viewport edge.
   Nested Carousel has no fixed slide width / slidesPerView:auto control, so the widget gets a fixed Custom Width of
   7 x 415 + 6 x 20 = 3025px with 7 slides per view on every device (80vw cards at <=480: calc(560vw + 120px)).
   Swiper's own maths then yields exactly 415px slides, the row covers viewports up to 3840px (the source shows 7
   cards there), and every visible card stays inside the swiper wrapper, which Elementor needs to keep slides
   non-inert. The section clips what lies beyond the viewport. Core rules cap swiper widgets at their parent
   (.e-con > .elementor-widget max-width:100%, .e-widget-swiper width:100%); they are lifted here, and the width
   value itself still comes from the widget's own Custom Width control (--container-widget-width). */
.elementor.elementor-454 .e-con > .elementor-widget.aroc-service-carousel { max-width: none; width: var(--container-widget-width); }

/* --- Flood Damage Cleanup and Restoration (#465) --- */
/* A-ROC Flood Damage Cleanup and Restoration (post 465, cloned from service template 256) - rung-(d) CSS only, carried over from home (post 40) for the REUSED
   sections and re-scoped to this page. Block numbers match build/page-custom.css on home so a fix can be mirrored 1:1.
   The adapted and new sections (hero, overview, local details, included, details) add NO CSS: every value there is a
   native control. Blocks [5] (service-area pills) and [6] (review arrows) are not carried: this page has neither section.
   Rule for this file: NO backslash escapes and NO CSS glyph content (the DEV bridge custom_css write path strips
   backslashes). Glyphs are real SVG icons chosen in each widget's own Icon control. */

/* [1] Primary-button arrow tile (.btn-primary::after in the source). The Button and Form widgets
   expose the glyph (selected_icon / selected_button_icon, editable) but have no control for an
   icon BOX: 38px square, own background, hanging 19px past the button edge. */
.elementor-465 .aroc-btn .elementor-button-content-wrapper { align-items: center; }
.elementor-465 .aroc-btn .elementor-button-text { text-align: start; } /* source label wraps left-aligned on narrow screens */
.elementor-465 .aroc-btn .elementor-button-icon { flex: 0 0 38px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background-color: #FFFFFF; margin-inline-end: -19px; }
.elementor-465 .aroc-btn .elementor-button-icon svg { width: 13px; height: 13px; fill: #000000; }
.elementor-465 .aroc-btn--dark .elementor-button-icon { background-color: var(--e-global-color-secondary); }
.elementor-465 .aroc-btn--dark .elementor-button-icon svg { fill: #FFFFFF; }
/* Arrow turns on button hover (mirrors the developer's 2026-10-01 rule on home 40). The Button widget's hover controls
   cover colours and an entrance-style hover animation, not a transform on the icon alone. */
.elementor-465 .aroc-btn .elementor-button-icon svg { transition: all 0.3s; }
.elementor-465 .aroc-btn:hover .elementor-button-icon svg { rotate: 44deg; }

/* [2] Marquee motion. No native marquee/ticker widget; the words and stars are real Heading and
   Image widgets - this only animates their track (source: 30s linear infinite, pause on hover). */
@keyframes aroc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.elementor-465 .aroc-marquee-track { animation: aroc-marquee 30s linear infinite; }
.elementor-465 .aroc-marquee-track:hover { animation-play-state: paused; }

/* [3] Multi-stop gradients. Elementor's gradient control has exactly two colour stops; the
   source uses three (services band) and four (stats band, avatar, active step).
   The native background colour stays as the fallback. */
.elementor-465 .aroc-s02-services { background-image: linear-gradient(115deg, #E9F4FF 0%, #F3F8FC 48%, #FFF3DC 100%); }
.elementor-465 .aroc-avatar-grad { background-image: linear-gradient(rgba(11,18,32,0.25), rgba(11,18,32,0.25)); background-color: var(--e-global-color-primary); }
.elementor-465 .aroc-step-num--active { background-image: none; }

/* [4] Service card hover. Container hover controls style only the hovered element; the source
   flips the child body panel, title, text and CTA when the whole CARD is hovered, and zooms the image. */
.elementor-465 .aroc-service-card:hover > .e-con { background-color: var(--e-global-color-primary); }
.elementor-465 .aroc-service-card:hover .elementor-heading-title,
.elementor-465 .aroc-service-card:hover .elementor-widget-text-editor { color: #FFFFFF; }
.elementor-465 .aroc-service-card:hover .aroc-btn .elementor-button,
.elementor-465 .aroc-service-card:hover .aroc-btn .elementor-button:hover { background-color: #FFFFFF; color: var(--e-global-color-secondary); } /* source: card-hover CTA stays white/navy even when the button itself is hovered (beats the button's own #E04F00 hover) */
.elementor-465 .aroc-card-img { overflow: hidden; }
.elementor-465 .aroc-card-img img { transition: transform 0.5s ease; }
.elementor-465 .aroc-service-card:hover .aroc-card-img img { transform: scale(1.08); }

/* [7] Quote form. The Form widget has no field padding/height, placeholder colour, checkbox accent
   or fixed submit width controls; source fields are underline-only 16px/0 with a 173x60 submit. */
.elementor-465 .aroc-form .elementor-field-textual { padding: 16px 0; min-height: 0; line-height: normal; }
.elementor-465 .aroc-form textarea.elementor-field-textual { min-height: 120px; }
.elementor-465 .aroc-form .elementor-field-textual::placeholder { color: rgba(11,18,32,0.6); opacity: 1; }
.elementor-465 .aroc-form .elementor-field-textual:focus { border-bottom-color: var(--e-global-color-primary); box-shadow: none; }
.elementor-465 .aroc-form .elementor-field-type-acceptance .elementor-field-option { display: flex; gap: 12px; align-items: flex-start; }
.elementor-465 .aroc-form .elementor-field-type-acceptance input { flex: 0 0 20px; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--e-global-color-primary); }
.elementor-465 .elementor-element.aroc-form .elementor-field-subgroup label { display: block; color: var(--e-global-color-text); line-height: 24px; }
.elementor-465 .aroc-form textarea.elementor-field-textual { margin-bottom: 6px; } /* source textarea is inline-block: 6px descender gap */
.elementor-465 .aroc-form .elementor-button { width: 173px; height: 60px; }
.elementor-465 .aroc-form .elementor-button-content-wrapper { flex: 1 1 auto; justify-content: space-between; }
@media (max-width: 480px) { .elementor-465 .aroc-form .elementor-button { width: 100%; } }

/* [8] Long e-mail values break anywhere like the source (overflow-wrap:anywhere); Heading has no wrapping control. */
.elementor-465 .aroc-break .elementor-heading-title { overflow-wrap: anywhere; }

/* [9] FAQ title-to-icon gap 16px (source). Nested Accordion's icon Spacing control is conditioned on
   title position != stretch, and stretch is what pins the +/- icon to the right edge; it stays at 10px. */
.elementor-465 .aroc-faq { --n-accordion-icon-gap: 16px; }

/* [10] Services carousel = source's fixed 415px cards (Slick variableWidth) filling to the right viewport edge.
   Nested Carousel has no fixed slide width / slidesPerView:auto control, so the widget gets a fixed Custom Width of
   7 x 415 + 6 x 20 = 3025px with 7 slides per view on every device (80vw cards at <=480: calc(560vw + 120px)).
   Swiper's own maths then yields exactly 415px slides, the row covers viewports up to 3840px (the source shows 7
   cards there), and every visible card stays inside the swiper wrapper, which Elementor needs to keep slides
   non-inert. The section clips what lies beyond the viewport. Core rules cap swiper widgets at their parent
   (.e-con > .elementor-widget max-width:100%, .e-widget-swiper width:100%); they are lifted here, and the width
   value itself still comes from the widget's own Custom Width control (--container-widget-width). */
.elementor.elementor-465 .e-con > .elementor-widget.aroc-service-carousel { max-width: none; width: var(--container-widget-width); }

/* --- Fire Damage Restoration and Repair (#466) --- */
/* A-ROC Fire Damage Restoration and Repair (post 466, cloned from service template 256) - rung-(d) CSS only, carried over from home (post 40) for the REUSED
   sections and re-scoped to this page. Block numbers match build/page-custom.css on home so a fix can be mirrored 1:1.
   The adapted and new sections (hero, overview, local details, included, details) add NO CSS: every value there is a
   native control. Blocks [5] (service-area pills) and [6] (review arrows) are not carried: this page has neither section.
   Rule for this file: NO backslash escapes and NO CSS glyph content (the DEV bridge custom_css write path strips
   backslashes). Glyphs are real SVG icons chosen in each widget's own Icon control. */

/* [1] Primary-button arrow tile (.btn-primary::after in the source). The Button and Form widgets
   expose the glyph (selected_icon / selected_button_icon, editable) but have no control for an
   icon BOX: 38px square, own background, hanging 19px past the button edge. */
.elementor-466 .aroc-btn .elementor-button-content-wrapper { align-items: center; }
.elementor-466 .aroc-btn .elementor-button-text { text-align: start; } /* source label wraps left-aligned on narrow screens */
.elementor-466 .aroc-btn .elementor-button-icon { flex: 0 0 38px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background-color: #FFFFFF; margin-inline-end: -19px; }
.elementor-466 .aroc-btn .elementor-button-icon svg { width: 13px; height: 13px; fill: #000000; }
.elementor-466 .aroc-btn--dark .elementor-button-icon { background-color: var(--e-global-color-secondary); }
.elementor-466 .aroc-btn--dark .elementor-button-icon svg { fill: #FFFFFF; }
/* Arrow turns on button hover (mirrors the developer's 2026-10-01 rule on home 40). The Button widget's hover controls
   cover colours and an entrance-style hover animation, not a transform on the icon alone. */
.elementor-466 .aroc-btn .elementor-button-icon svg { transition: all 0.3s; }
.elementor-466 .aroc-btn:hover .elementor-button-icon svg { rotate: 44deg; }

/* [2] Marquee motion. No native marquee/ticker widget; the words and stars are real Heading and
   Image widgets - this only animates their track (source: 30s linear infinite, pause on hover). */
@keyframes aroc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.elementor-466 .aroc-marquee-track { animation: aroc-marquee 30s linear infinite; }
.elementor-466 .aroc-marquee-track:hover { animation-play-state: paused; }

/* [3] Multi-stop gradients. Elementor's gradient control has exactly two colour stops; the
   source uses three (services band) and four (stats band, avatar, active step).
   The native background colour stays as the fallback. */
.elementor-466 .aroc-s02-services { background-image: linear-gradient(115deg, #E9F4FF 0%, #F3F8FC 48%, #FFF3DC 100%); }
.elementor-466 .aroc-avatar-grad { background-image: linear-gradient(rgba(11,18,32,0.25), rgba(11,18,32,0.25)); background-color: var(--e-global-color-primary); }
.elementor-466 .aroc-step-num--active { background-image: none; }

/* [4] Service card hover. Container hover controls style only the hovered element; the source
   flips the child body panel, title, text and CTA when the whole CARD is hovered, and zooms the image. */
.elementor-466 .aroc-service-card:hover > .e-con { background-color: var(--e-global-color-primary); }
.elementor-466 .aroc-service-card:hover .elementor-heading-title,
.elementor-466 .aroc-service-card:hover .elementor-widget-text-editor { color: #FFFFFF; }
.elementor-466 .aroc-service-card:hover .aroc-btn .elementor-button,
.elementor-466 .aroc-service-card:hover .aroc-btn .elementor-button:hover { background-color: #FFFFFF; color: var(--e-global-color-secondary); } /* source: card-hover CTA stays white/navy even when the button itself is hovered (beats the button's own #E04F00 hover) */
.elementor-466 .aroc-card-img { overflow: hidden; }
.elementor-466 .aroc-card-img img { transition: transform 0.5s ease; }
.elementor-466 .aroc-service-card:hover .aroc-card-img img { transform: scale(1.08); }

/* [7] Quote form. The Form widget has no field padding/height, placeholder colour, checkbox accent
   or fixed submit width controls; source fields are underline-only 16px/0 with a 173x60 submit. */
.elementor-466 .aroc-form .elementor-field-textual { padding: 16px 0; min-height: 0; line-height: normal; }
.elementor-466 .aroc-form textarea.elementor-field-textual { min-height: 120px; }
.elementor-466 .aroc-form .elementor-field-textual::placeholder { color: rgba(11,18,32,0.6); opacity: 1; }
.elementor-466 .aroc-form .elementor-field-textual:focus { border-bottom-color: var(--e-global-color-primary); box-shadow: none; }
.elementor-466 .aroc-form .elementor-field-type-acceptance .elementor-field-option { display: flex; gap: 12px; align-items: flex-start; }
.elementor-466 .aroc-form .elementor-field-type-acceptance input { flex: 0 0 20px; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--e-global-color-primary); }
.elementor-466 .elementor-element.aroc-form .elementor-field-subgroup label { display: block; color: var(--e-global-color-text); line-height: 24px; }
.elementor-466 .aroc-form textarea.elementor-field-textual { margin-bottom: 6px; } /* source textarea is inline-block: 6px descender gap */
.elementor-466 .aroc-form .elementor-button { width: 173px; height: 60px; }
.elementor-466 .aroc-form .elementor-button-content-wrapper { flex: 1 1 auto; justify-content: space-between; }
@media (max-width: 480px) { .elementor-466 .aroc-form .elementor-button { width: 100%; } }

/* [8] Long e-mail values break anywhere like the source (overflow-wrap:anywhere); Heading has no wrapping control. */
.elementor-466 .aroc-break .elementor-heading-title { overflow-wrap: anywhere; }

/* [9] FAQ title-to-icon gap 16px (source). Nested Accordion's icon Spacing control is conditioned on
   title position != stretch, and stretch is what pins the +/- icon to the right edge; it stays at 10px. */
.elementor-466 .aroc-faq { --n-accordion-icon-gap: 16px; }

/* [10] Services carousel = source's fixed 415px cards (Slick variableWidth) filling to the right viewport edge.
   Nested Carousel has no fixed slide width / slidesPerView:auto control, so the widget gets a fixed Custom Width of
   7 x 415 + 6 x 20 = 3025px with 7 slides per view on every device (80vw cards at <=480: calc(560vw + 120px)).
   Swiper's own maths then yields exactly 415px slides, the row covers viewports up to 3840px (the source shows 7
   cards there), and every visible card stays inside the swiper wrapper, which Elementor needs to keep slides
   non-inert. The section clips what lies beyond the viewport. Core rules cap swiper widgets at their parent
   (.e-con > .elementor-widget max-width:100%, .e-widget-swiper width:100%); they are lifted here, and the width
   value itself still comes from the widget's own Custom Width control (--container-widget-width). */
.elementor.elementor-466 .e-con > .elementor-widget.aroc-service-carousel { max-width: none; width: var(--container-widget-width); }

/* --- Water Mitigation (#481) --- */
/* A-ROC Water Damage Restoration (post 256) - rung-(d) CSS only, carried over from home (post 40) for the REUSED
   sections and re-scoped to this page. Block numbers match build/page-custom.css on home so a fix can be mirrored 1:1.
   The adapted and new sections (hero, overview, local details, included, details) add NO CSS: every value there is a
   native control. Blocks [5] (service-area pills) and [6] (review arrows) are not carried: this page has neither section.
   Rule for this file: NO backslash escapes and NO CSS glyph content (the DEV bridge custom_css write path strips
   backslashes). Glyphs are real SVG icons chosen in each widget's own Icon control. */

/* [1] Primary-button arrow tile (.btn-primary::after in the source). The Button and Form widgets
   expose the glyph (selected_icon / selected_button_icon, editable) but have no control for an
   icon BOX: 38px square, own background, hanging 19px past the button edge. */
.elementor-481 .aroc-btn .elementor-button-content-wrapper { align-items: center; }
.elementor-481 .aroc-btn .elementor-button-text { text-align: start; } /* source label wraps left-aligned on narrow screens */
.elementor-481 .aroc-btn .elementor-button-icon { flex: 0 0 38px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background-color: #FFFFFF; margin-inline-end: -19px; }
.elementor-481 .aroc-btn .elementor-button-icon svg { width: 13px; height: 13px; fill: #000000; }
.elementor-481 .aroc-btn--dark .elementor-button-icon { background-color: var(--e-global-color-secondary); }
.elementor-481 .aroc-btn--dark .elementor-button-icon svg { fill: #FFFFFF; }
/* Arrow turns on button hover (mirrors the developer's 2026-10-01 rule on home 40). The Button widget's hover controls
   cover colours and an entrance-style hover animation, not a transform on the icon alone. */
.elementor-481 .aroc-btn .elementor-button-icon svg { transition: all 0.3s; }
.elementor-481 .aroc-btn:hover .elementor-button-icon svg { rotate: 44deg; }

/* [2] Marquee motion. No native marquee/ticker widget; the words and stars are real Heading and
   Image widgets - this only animates their track (source: 30s linear infinite, pause on hover). */
@keyframes aroc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.elementor-481 .aroc-marquee-track { animation: aroc-marquee 30s linear infinite; }
.elementor-481 .aroc-marquee-track:hover { animation-play-state: paused; }

/* [3] Multi-stop gradients. Elementor's gradient control has exactly two colour stops; the
   source uses three (services band) and four (stats band, avatar, active step).
   The native background colour stays as the fallback. */
.elementor-481 .aroc-s02-services { background-image: linear-gradient(115deg, #E9F4FF 0%, #F3F8FC 48%, #FFF3DC 100%); }
.elementor-481 .aroc-avatar-grad { background-image: linear-gradient(rgba(11,18,32,0.25), rgba(11,18,32,0.25)); background-color: var(--e-global-color-primary); }
.elementor-481 .aroc-step-num--active { background-image: none; }

/* [4] Service card hover. Container hover controls style only the hovered element; the source
   flips the child body panel, title, text and CTA when the whole CARD is hovered, and zooms the image. */
.elementor-481 .aroc-service-card:hover > .e-con { background-color: var(--e-global-color-primary); }
.elementor-481 .aroc-service-card:hover .elementor-heading-title,
.elementor-481 .aroc-service-card:hover .elementor-widget-text-editor { color: #FFFFFF; }
.elementor-481 .aroc-service-card:hover .aroc-btn .elementor-button,
.elementor-481 .aroc-service-card:hover .aroc-btn .elementor-button:hover { background-color: #FFFFFF; color: var(--e-global-color-secondary); } /* source: card-hover CTA stays white/navy even when the button itself is hovered (beats the button's own #E04F00 hover) */
.elementor-481 .aroc-card-img { overflow: hidden; }
.elementor-481 .aroc-card-img img { transition: transform 0.5s ease; }
.elementor-481 .aroc-service-card:hover .aroc-card-img img { transform: scale(1.08); }

/* [7] Quote form. The Form widget has no field padding/height, placeholder colour, checkbox accent
   or fixed submit width controls; source fields are underline-only 16px/0 with a 173x60 submit. */
.elementor-481 .aroc-form .elementor-field-textual { padding: 16px 0; min-height: 0; line-height: normal; }
.elementor-481 .aroc-form textarea.elementor-field-textual { min-height: 120px; }
.elementor-481 .aroc-form .elementor-field-textual::placeholder { color: rgba(11,18,32,0.6); opacity: 1; }
.elementor-481 .aroc-form .elementor-field-textual:focus { border-bottom-color: var(--e-global-color-primary); box-shadow: none; }
.elementor-481 .aroc-form .elementor-field-type-acceptance .elementor-field-option { display: flex; gap: 12px; align-items: flex-start; }
.elementor-481 .aroc-form .elementor-field-type-acceptance input { flex: 0 0 20px; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--e-global-color-primary); }
.elementor-481 .elementor-element.aroc-form .elementor-field-subgroup label { display: block; color: var(--e-global-color-text); line-height: 24px; }
.elementor-481 .aroc-form textarea.elementor-field-textual { margin-bottom: 6px; } /* source textarea is inline-block: 6px descender gap */
.elementor-481 .aroc-form .elementor-button { width: 173px; height: 60px; }
.elementor-481 .aroc-form .elementor-button-content-wrapper { flex: 1 1 auto; justify-content: space-between; }
@media (max-width: 480px) { .elementor-481 .aroc-form .elementor-button { width: 100%; } }

/* [8] Long e-mail values break anywhere like the source (overflow-wrap:anywhere); Heading has no wrapping control. */
.elementor-481 .aroc-break .elementor-heading-title { overflow-wrap: anywhere; }

/* [9] FAQ title-to-icon gap 16px (source). Nested Accordion's icon Spacing control is conditioned on
   title position != stretch, and stretch is what pins the +/- icon to the right edge; it stays at 10px. */
.elementor-481 .aroc-faq { --n-accordion-icon-gap: 16px; }

/* [10] Services carousel = source's fixed 415px cards (Slick variableWidth) filling to the right viewport edge.
   Nested Carousel has no fixed slide width / slidesPerView:auto control, so the widget gets a fixed Custom Width of
   7 x 415 + 6 x 20 = 3025px with 7 slides per view on every device (80vw cards at <=480: calc(560vw + 120px)).
   Swiper's own maths then yields exactly 415px slides, the row covers viewports up to 3840px (the source shows 7
   cards there), and every visible card stays inside the swiper wrapper, which Elementor needs to keep slides
   non-inert. The section clips what lies beyond the viewport. Core rules cap swiper widgets at their parent
   (.e-con > .elementor-widget max-width:100%, .e-widget-swiper width:100%); they are lifted here, and the width
   value itself still comes from the widget's own Custom Width control (--container-widget-width). */
.elementor.elementor-481 .e-con > .elementor-widget.aroc-service-carousel { max-width: none; width: var(--container-widget-width); }

/* --- Emergency Water Removal (#482) --- */
/* A-ROC Water Damage Restoration (post 256) - rung-(d) CSS only, carried over from home (post 40) for the REUSED
   sections and re-scoped to this page. Block numbers match build/page-custom.css on home so a fix can be mirrored 1:1.
   The adapted and new sections (hero, overview, local details, included, details) add NO CSS: every value there is a
   native control. Blocks [5] (service-area pills) and [6] (review arrows) are not carried: this page has neither section.
   Rule for this file: NO backslash escapes and NO CSS glyph content (the DEV bridge custom_css write path strips
   backslashes). Glyphs are real SVG icons chosen in each widget's own Icon control. */

/* [1] Primary-button arrow tile (.btn-primary::after in the source). The Button and Form widgets
   expose the glyph (selected_icon / selected_button_icon, editable) but have no control for an
   icon BOX: 38px square, own background, hanging 19px past the button edge. */
.elementor-482 .aroc-btn .elementor-button-content-wrapper { align-items: center; }
.elementor-482 .aroc-btn .elementor-button-text { text-align: start; } /* source label wraps left-aligned on narrow screens */
.elementor-482 .aroc-btn .elementor-button-icon { flex: 0 0 38px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background-color: #FFFFFF; margin-inline-end: -19px; }
.elementor-482 .aroc-btn .elementor-button-icon svg { width: 13px; height: 13px; fill: #000000; }
.elementor-482 .aroc-btn--dark .elementor-button-icon { background-color: var(--e-global-color-secondary); }
.elementor-482 .aroc-btn--dark .elementor-button-icon svg { fill: #FFFFFF; }
/* Arrow turns on button hover (mirrors the developer's 2026-10-01 rule on home 40). The Button widget's hover controls
   cover colours and an entrance-style hover animation, not a transform on the icon alone. */
.elementor-482 .aroc-btn .elementor-button-icon svg { transition: all 0.3s; }
.elementor-482 .aroc-btn:hover .elementor-button-icon svg { rotate: 44deg; }

/* [2] Marquee motion. No native marquee/ticker widget; the words and stars are real Heading and
   Image widgets - this only animates their track (source: 30s linear infinite, pause on hover). */
@keyframes aroc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.elementor-482 .aroc-marquee-track { animation: aroc-marquee 30s linear infinite; }
.elementor-482 .aroc-marquee-track:hover { animation-play-state: paused; }

/* [3] Multi-stop gradients. Elementor's gradient control has exactly two colour stops; the
   source uses three (services band) and four (stats band, avatar, active step).
   The native background colour stays as the fallback. */
.elementor-482 .aroc-s02-services { background-image: linear-gradient(115deg, #E9F4FF 0%, #F3F8FC 48%, #FFF3DC 100%); }
.elementor-482 .aroc-avatar-grad { background-image: linear-gradient(rgba(11,18,32,0.25), rgba(11,18,32,0.25)); background-color: var(--e-global-color-primary); }
.elementor-482 .aroc-step-num--active { background-image: none; }

/* [4] Service card hover. Container hover controls style only the hovered element; the source
   flips the child body panel, title, text and CTA when the whole CARD is hovered, and zooms the image. */
.elementor-482 .aroc-service-card:hover > .e-con { background-color: var(--e-global-color-primary); }
.elementor-482 .aroc-service-card:hover .elementor-heading-title,
.elementor-482 .aroc-service-card:hover .elementor-widget-text-editor { color: #FFFFFF; }
.elementor-482 .aroc-service-card:hover .aroc-btn .elementor-button,
.elementor-482 .aroc-service-card:hover .aroc-btn .elementor-button:hover { background-color: #FFFFFF; color: var(--e-global-color-secondary); } /* source: card-hover CTA stays white/navy even when the button itself is hovered (beats the button's own #E04F00 hover) */
.elementor-482 .aroc-card-img { overflow: hidden; }
.elementor-482 .aroc-card-img img { transition: transform 0.5s ease; }
.elementor-482 .aroc-service-card:hover .aroc-card-img img { transform: scale(1.08); }

/* [7] Quote form. The Form widget has no field padding/height, placeholder colour, checkbox accent
   or fixed submit width controls; source fields are underline-only 16px/0 with a 173x60 submit. */
.elementor-482 .aroc-form .elementor-field-textual { padding: 16px 0; min-height: 0; line-height: normal; }
.elementor-482 .aroc-form textarea.elementor-field-textual { min-height: 120px; }
.elementor-482 .aroc-form .elementor-field-textual::placeholder { color: rgba(11,18,32,0.6); opacity: 1; }
.elementor-482 .aroc-form .elementor-field-textual:focus { border-bottom-color: var(--e-global-color-primary); box-shadow: none; }
.elementor-482 .aroc-form .elementor-field-type-acceptance .elementor-field-option { display: flex; gap: 12px; align-items: flex-start; }
.elementor-482 .aroc-form .elementor-field-type-acceptance input { flex: 0 0 20px; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--e-global-color-primary); }
.elementor-482 .elementor-element.aroc-form .elementor-field-subgroup label { display: block; color: var(--e-global-color-text); line-height: 24px; }
.elementor-482 .aroc-form textarea.elementor-field-textual { margin-bottom: 6px; } /* source textarea is inline-block: 6px descender gap */
.elementor-482 .aroc-form .elementor-button { width: 173px; height: 60px; }
.elementor-482 .aroc-form .elementor-button-content-wrapper { flex: 1 1 auto; justify-content: space-between; }
@media (max-width: 480px) { .elementor-482 .aroc-form .elementor-button { width: 100%; } }

/* [8] Long e-mail values break anywhere like the source (overflow-wrap:anywhere); Heading has no wrapping control. */
.elementor-482 .aroc-break .elementor-heading-title { overflow-wrap: anywhere; }

/* [9] FAQ title-to-icon gap 16px (source). Nested Accordion's icon Spacing control is conditioned on
   title position != stretch, and stretch is what pins the +/- icon to the right edge; it stays at 10px. */
.elementor-482 .aroc-faq { --n-accordion-icon-gap: 16px; }

/* [10] Services carousel = source's fixed 415px cards (Slick variableWidth) filling to the right viewport edge.
   Nested Carousel has no fixed slide width / slidesPerView:auto control, so the widget gets a fixed Custom Width of
   7 x 415 + 6 x 20 = 3025px with 7 slides per view on every device (80vw cards at <=480: calc(560vw + 120px)).
   Swiper's own maths then yields exactly 415px slides, the row covers viewports up to 3840px (the source shows 7
   cards there), and every visible card stays inside the swiper wrapper, which Elementor needs to keep slides
   non-inert. The section clips what lies beyond the viewport. Core rules cap swiper widgets at their parent
   (.e-con > .elementor-widget max-width:100%, .e-widget-swiper width:100%); they are lifted here, and the width
   value itself still comes from the widget's own Custom Width control (--container-widget-width). */
.elementor.elementor-482 .e-con > .elementor-widget.aroc-service-carousel { max-width: none; width: var(--container-widget-width); }

/* --- Water Extraction Services (#483) --- */
/* A-ROC Water Damage Restoration (post 256) - rung-(d) CSS only, carried over from home (post 40) for the REUSED
   sections and re-scoped to this page. Block numbers match build/page-custom.css on home so a fix can be mirrored 1:1.
   The adapted and new sections (hero, overview, local details, included, details) add NO CSS: every value there is a
   native control. Blocks [5] (service-area pills) and [6] (review arrows) are not carried: this page has neither section.
   Rule for this file: NO backslash escapes and NO CSS glyph content (the DEV bridge custom_css write path strips
   backslashes). Glyphs are real SVG icons chosen in each widget's own Icon control. */

/* [1] Primary-button arrow tile (.btn-primary::after in the source). The Button and Form widgets
   expose the glyph (selected_icon / selected_button_icon, editable) but have no control for an
   icon BOX: 38px square, own background, hanging 19px past the button edge. */
.elementor-483 .aroc-btn .elementor-button-content-wrapper { align-items: center; }
.elementor-483 .aroc-btn .elementor-button-text { text-align: start; } /* source label wraps left-aligned on narrow screens */
.elementor-483 .aroc-btn .elementor-button-icon { flex: 0 0 38px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background-color: #FFFFFF; margin-inline-end: -19px; }
.elementor-483 .aroc-btn .elementor-button-icon svg { width: 13px; height: 13px; fill: #000000; }
.elementor-483 .aroc-btn--dark .elementor-button-icon { background-color: var(--e-global-color-secondary); }
.elementor-483 .aroc-btn--dark .elementor-button-icon svg { fill: #FFFFFF; }
/* Arrow turns on button hover (mirrors the developer's 2026-10-01 rule on home 40). The Button widget's hover controls
   cover colours and an entrance-style hover animation, not a transform on the icon alone. */
.elementor-483 .aroc-btn .elementor-button-icon svg { transition: all 0.3s; }
.elementor-483 .aroc-btn:hover .elementor-button-icon svg { rotate: 44deg; }

/* [2] Marquee motion. No native marquee/ticker widget; the words and stars are real Heading and
   Image widgets - this only animates their track (source: 30s linear infinite, pause on hover). */
@keyframes aroc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.elementor-483 .aroc-marquee-track { animation: aroc-marquee 30s linear infinite; }
.elementor-483 .aroc-marquee-track:hover { animation-play-state: paused; }

/* [3] Multi-stop gradients. Elementor's gradient control has exactly two colour stops; the
   source uses three (services band) and four (stats band, avatar, active step).
   The native background colour stays as the fallback. */
.elementor-483 .aroc-s02-services { background-image: linear-gradient(115deg, #E9F4FF 0%, #F3F8FC 48%, #FFF3DC 100%); }
.elementor-483 .aroc-avatar-grad { background-image: linear-gradient(rgba(11,18,32,0.25), rgba(11,18,32,0.25)); background-color: var(--e-global-color-primary); }
.elementor-483 .aroc-step-num--active { background-image: none; }

/* [4] Service card hover. Container hover controls style only the hovered element; the source
   flips the child body panel, title, text and CTA when the whole CARD is hovered, and zooms the image. */
.elementor-483 .aroc-service-card:hover > .e-con { background-color: var(--e-global-color-primary); }
.elementor-483 .aroc-service-card:hover .elementor-heading-title,
.elementor-483 .aroc-service-card:hover .elementor-widget-text-editor { color: #FFFFFF; }
.elementor-483 .aroc-service-card:hover .aroc-btn .elementor-button,
.elementor-483 .aroc-service-card:hover .aroc-btn .elementor-button:hover { background-color: #FFFFFF; color: var(--e-global-color-secondary); } /* source: card-hover CTA stays white/navy even when the button itself is hovered (beats the button's own #E04F00 hover) */
.elementor-483 .aroc-card-img { overflow: hidden; }
.elementor-483 .aroc-card-img img { transition: transform 0.5s ease; }
.elementor-483 .aroc-service-card:hover .aroc-card-img img { transform: scale(1.08); }

/* [7] Quote form. The Form widget has no field padding/height, placeholder colour, checkbox accent
   or fixed submit width controls; source fields are underline-only 16px/0 with a 173x60 submit. */
.elementor-483 .aroc-form .elementor-field-textual { padding: 16px 0; min-height: 0; line-height: normal; }
.elementor-483 .aroc-form textarea.elementor-field-textual { min-height: 120px; }
.elementor-483 .aroc-form .elementor-field-textual::placeholder { color: rgba(11,18,32,0.6); opacity: 1; }
.elementor-483 .aroc-form .elementor-field-textual:focus { border-bottom-color: var(--e-global-color-primary); box-shadow: none; }
.elementor-483 .aroc-form .elementor-field-type-acceptance .elementor-field-option { display: flex; gap: 12px; align-items: flex-start; }
.elementor-483 .aroc-form .elementor-field-type-acceptance input { flex: 0 0 20px; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--e-global-color-primary); }
.elementor-483 .elementor-element.aroc-form .elementor-field-subgroup label { display: block; color: var(--e-global-color-text); line-height: 24px; }
.elementor-483 .aroc-form textarea.elementor-field-textual { margin-bottom: 6px; } /* source textarea is inline-block: 6px descender gap */
.elementor-483 .aroc-form .elementor-button { width: 173px; height: 60px; }
.elementor-483 .aroc-form .elementor-button-content-wrapper { flex: 1 1 auto; justify-content: space-between; }
@media (max-width: 480px) { .elementor-483 .aroc-form .elementor-button { width: 100%; } }

/* [8] Long e-mail values break anywhere like the source (overflow-wrap:anywhere); Heading has no wrapping control. */
.elementor-483 .aroc-break .elementor-heading-title { overflow-wrap: anywhere; }

/* [9] FAQ title-to-icon gap 16px (source). Nested Accordion's icon Spacing control is conditioned on
   title position != stretch, and stretch is what pins the +/- icon to the right edge; it stays at 10px. */
.elementor-483 .aroc-faq { --n-accordion-icon-gap: 16px; }

/* [10] Services carousel = source's fixed 415px cards (Slick variableWidth) filling to the right viewport edge.
   Nested Carousel has no fixed slide width / slidesPerView:auto control, so the widget gets a fixed Custom Width of
   7 x 415 + 6 x 20 = 3025px with 7 slides per view on every device (80vw cards at <=480: calc(560vw + 120px)).
   Swiper's own maths then yields exactly 415px slides, the row covers viewports up to 3840px (the source shows 7
   cards there), and every visible card stays inside the swiper wrapper, which Elementor needs to keep slides
   non-inert. The section clips what lies beyond the viewport. Core rules cap swiper widgets at their parent
   (.e-con > .elementor-widget max-width:100%, .e-widget-swiper width:100%); they are lifted here, and the width
   value itself still comes from the widget's own Custom Width control (--container-widget-width). */
.elementor.elementor-483 .e-con > .elementor-widget.aroc-service-carousel { max-width: none; width: var(--container-widget-width); }

/* ==========================================================================
   3. Global CSS (was Appearance > Customize > Additional CSS)
   ========================================================================== */

.aroc-nav-cta{
	clip-path: polygon(100% 0, 100% 75%, 92% 100%, 0 100%, 0 0);
}

.aroc-logo-tab{
	clip-path: polygon(100% 0, 100% 100%, 15% 100%, 0 85%, 0 0);

}

.elementor-widget-icon .elementor-icon-wrapper { line-height: 0; }

body { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }

.aroc-btn .elementor-button-content-wrapper { align-items: center; }
.aroc-btn .elementor-button-text { text-align: start; } /* source label wraps left-aligned on narrow screens */
.aroc-btn .elementor-button-icon { flex: 0 0 38px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background-color: #FFFFFF; margin-inline-end: -19px; }
.aroc-btn .elementor-button-icon svg { width: 13px; height: 13px; fill: #000000; }
.aroc-btn--dark .elementor-button-icon { background-color: var(--e-global-color-secondary); }
.aroc-btn--dark .elementor-button-icon svg { fill: #FFFFFF; }
.aroc-btn:hover .elementor-button-icon svg{rotate: 44deg;}
.aroc-btn .elementor-button-icon svg{
	transition: all 0.3s; 
}

@keyframes aroc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.aroc-marquee-track { animation: aroc-marquee 30s linear infinite; }
.aroc-marquee-track:hover { animation-play-state: paused; }

.elementor-40 .aroc-sa-wash { background-image: linear-gradient(105deg, #E6F1FF 0%, rgba(244,248,252,0.72) 48%, rgba(255,243,220,0.78) 100%); }
.elementor-40 .aroc-step-num--active { background-image: none; }
.elementor-40 .aroc-service-card:hover > .e-con { background-color: var(--e-global-color-primary); }
.elementor-40 .aroc-service-card:hover .elementor-heading-title,
.elementor-40 .aroc-service-card:hover .elementor-widget-text-editor { color: #FFFFFF; }
.elementor-40 .aroc-service-card:hover .aroc-btn .elementor-button,
.elementor-40 .aroc-service-card:hover .aroc-btn .elementor-button:hover { background-color: #FFFFFF; color: var(--e-global-color-secondary); } 
.elementor-40 .aroc-card-img { overflow: hidden; }
.elementor-40 .aroc-card-img img { transition: transform 0.5s ease; }
.elementor-40 .aroc-service-card:hover .aroc-card-img img { transform: scale(1.08); }

.elementor-40 .aroc-pill:hover .aroc-pill-name .elementor-heading-title { color: #FFFFFF; }
.elementor-40 .aroc-pill:hover .aroc-pill-pin .elementor-icon svg { fill: #FFFFFF; }
.elementor-40 .aroc-pill-arrow svg { transition: rotate 0.3s; }
.elementor-40 .aroc-pill:hover .aroc-pill-arrow svg { rotate: 45deg; }

.elementor-40 .aroc-form .elementor-field-textual { padding: 16px 0; min-height: 0; line-height: normal; }
.elementor-40 .aroc-form textarea.elementor-field-textual { min-height: 120px; }
.elementor-40 .aroc-form .elementor-field-textual::placeholder { color: rgba(11,18,32,0.6); opacity: 1; }
.elementor-40 .aroc-form .elementor-field-textual:focus { border-bottom-color: var(--e-global-color-primary); box-shadow: none; }
.elementor-40 .aroc-form .elementor-field-type-acceptance .elementor-field-option { display: flex; gap: 12px; align-items: flex-start; }
.elementor-40 .aroc-form .elementor-field-type-acceptance input { flex: 0 0 20px; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--e-global-color-primary); }
.elementor-40 .elementor-element.aroc-form .elementor-field-subgroup label { display: block; color: var(--e-global-color-text); line-height: 24px; }
.elementor-40 .aroc-form textarea.elementor-field-textual { margin-bottom: 6px; } 
.elementor-40 .aroc-form .elementor-button { width: 173px; height: 60px; }
.elementor-40 .aroc-form .elementor-button-content-wrapper { flex: 1 1 auto; justify-content: space-between; }
@media (max-width: 480px) { .elementor-40 .aroc-form .elementor-button { width: 100%; } }


.elementor-40 .aroc-break .elementor-heading-title { overflow-wrap: anywhere; }

.elementor-40 .aroc-faq { --n-accordion-icon-gap: 16px; }


.elementor.elementor-40 .e-con > .elementor-widget.aroc-service-carousel { max-width: none; width: var(--container-widget-width); }

.aroc-faq .e-n-accordion-item[open] .e-n-accordion-item-title{
	border-bottom: none !important;

}

.newsletter-form .gform_wrapper .gform_heading{
	display: none;
}

.newsletter-form .gform_wrapper form#gform_1 {
	display: flex;
}

.newsletter-form .gform_wrapper form .gform_footer {
	margin-top: 0;
}

.newsletter-form .gform_wrapper form .gform_body .gfield input{
	background-color: #FFFFFF;
	border-radius: 0;
	border: none;
	outline: none !important;
	width: 386px;
	padding: 15px 30px;
	display: inline-block;
	height: auto;
	font-size: 18px;
	line-height: 1.67;
	color: #5D687C;
}

.newsletter-form .gform_wrapper form .gform_footer{
	padding: 0;
}

.newsletter-form .gform_wrapper form .gform_footer  .gform_button{
	background-color: var(--e-global-color-primary);
	font-family: var(--e-global-typography-accent-font-family), Inter, sans-serif;
	font-size: var(--e-global-typography-accent-font-size);
	font-weight: var(--e-global-typography-accent-font-weight);
	text-transform: var(--e-global-typography-accent-text-transform);
	font-style: var(--e-global-typography-accent-font-style);
	text-decoration: var(--e-global-typography-accent-text-decoration);
	line-height: var(--e-global-typography-accent-line-height) !important;
	letter-spacing: var(--e-global-typography-accent-letter-spacing);
	word-spacing: var(--e-global-typography-accent-word-spacing);
	fill: var(--e-global-color-aroc_white);
	color: var(--e-global-color-aroc_white);
	transition-duration: 0.2s;
	border-radius: 0px 0px 0px 0px;
	padding: 20px 44px 20px 24px;
	height: 100%;
	margin: 0;
	border: none;
	position: relative;
}


.newsletter-form .gform_wrapper form .gform_footer  .gform_button:hover{
	background-color: #E04F00;
}

.newsletter-form .gform_wrapper form .gform_footer:before{
	content: "";
	aspect-ratio: 1/1;
	--size: 38px;
	width: var(--size);
	height: var(--size);
	order: 1;
	background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M13%200v12.1h-1.54V2.977L1.09%2013%200%2011.947%2010.819%201.489H.483V0z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E');
	background-position:center;
	background-repeat: no-repeat;
	position: absolute;
	top: 50%;
	right: 0%;
	transform:translate(50%, -50%);
	z-index: 1;
	transition: all 0.3s;
}

.newsletter-form .gform_wrapper form .gform_footer:after{
	content: "";
	aspect-ratio: 1/1;
	--size: 38px;
	width: var(--size);
	height: var(--size);
	order: 1;
	background-color: #FFFFFF;
	background-position:center;
	background-repeat: no-repeat;
	position: absolute;
	top: 50%;
	right: 0%;
	transform:translate(50%, -50%);
}

.newsletter-form .gform_wrapper form .gform_footer:hover:before{
	transform:translate(50%, -50%) rotate(45deg);
}

.newsletter-form .gform_wrapper form .gfield_label{
	display: none !important;
}

/* Review carousel arrow tiles (all pages) */
.elementor .aroc-review-carousel .elementor-swiper-button{
	    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.elementor .aroc-review-carousel .elementor-swiper-button {
    background-color: var(--e-global-color-primary);
}

@media(max-width: 1199px){

	.newsletter-form .gform_wrapper form .gform_body .gfield input{
		width: 346px;
		padding: 13px 24px;
	}
}

@media(max-width: 767px){

	.newsletter-form .gform_wrapper form .gform_body .gfield input{
		width: 100%;
		padding: 13px 24px;
	}
	
	.elementor .aroc-review-carousel .elementor-swiper-button{
		width: 45px;
        height: 45px;
	}
	
    .elementor .aroc-review-carousel .elementor-swiper-button svg {
        height: 0.7em;
        width: 0.7em;
    }
}

@media(max-width: 480px){

	.newsletter-form .gform_wrapper form .gform_body .gfield input{
		width: 100%;
		padding: 10px 18px;
		font-size: 14px;
	}
	
	.newsletter-form .gform_wrapper form .gform_footer .gform_button{
		padding: 13px 30px 12px 12px;
		font-size: 14px;
	}
	
	.newsletter-form .gform_wrapper form .gform_footer:after,
	.newsletter-form .gform_wrapper form .gform_footer:before{
		    background-size: 10px;
		    --size: 30px;
	}
}

/* ==========================================================================
   4. Typography polish (added with the Special Gothic Expanded One switch)
   ========================================================================== */

/* Even out heading lines; avoids one-word last lines */
.elementor-heading-title { text-wrap: balance; }

/* About: keep "Cleveland, OH" label on one line */
.elementor-217 .elementor-element.elementor-element-da790f7 .elementor-heading-title { white-space: nowrap; }
@media (min-width: 1280px) { .elementor-217 .elementor-element.elementor-element-da790f7 .elementor-heading-title { font-size: 30px; } }
@media (min-width: 1200px) and (max-width: 1279px) { .elementor-217 .elementor-element.elementor-element-da790f7 .elementor-heading-title { font-size: 28px; } }
@media (min-width: 992px) and (max-width: 1199px) { .elementor-217 .elementor-element.elementor-element-da790f7 .elementor-heading-title { font-size: 24px; } }