/*
Theme Name: Route One
Template: astra
Description: Route One Auto Transport child theme for Astra. Brand styling only. All page content is built and edited in Elementor; header/footer text is edited in Appearance > Customize > Header/Footer Builder.
Version: 1.0.0
Text Domain: routeone
*/

/* ==========================================================================
   1. BRAND TOKENS (mirror the Elementor Global Colors)
   ========================================================================== */
:root{
  --ro-navy:#0B1F33; --ro-navy-dark:#071624; --ro-blue:#1464F4; --ro-orange:#FF6B00;
  --ro-offwhite:#F7F8FA; --ro-slate:#56616F; --ro-white:#FFFFFF; --ro-line:#E1E5EA; --ro-muted:#C5D0DD;
}

/* ==========================================================================
   2. BASE + ACCESSIBILITY
   ========================================================================== */
html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.elementor-button:focus-visible{outline:3px solid var(--ro-blue);outline-offset:2px}
.elementor-widget-container p:last-child{margin-bottom:0}
.elementor-widget-text-editor p{margin-bottom:0}

/* ==========================================================================
   3. HEADER (Astra Header Builder)
   ========================================================================== */
#masthead{position:sticky;top:0;z-index:999;box-shadow:0 2px 14px rgba(7,22,36,.25)}
.admin-bar #masthead{top:32px}
.ast-above-header-bar{font-family:'Inter',sans-serif;font-size:13px;font-weight:600;letter-spacing:.02em}
.ast-above-header-bar .ast-builder-html-element{font-size:13px;font-weight:600;line-height:1.3}
.ro-logo{display:inline-flex;flex-direction:column;line-height:1;text-decoration:none!important}
.ro-logo-1{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:32px;letter-spacing:.05em;color:#fff}
.ro-logo-2{margin-top:3px;font-family:'Inter',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.34em;color:var(--ro-orange)}
.ro-header-phone{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:20px;letter-spacing:.04em;color:#fff;white-space:nowrap}
.ro-header-phone .ro-phone-label{color:var(--ro-orange)}
.main-header-menu .menu-link{padding-left:.9em;padding-right:.9em}
.main-header-menu .sub-menu{background:var(--ro-navy);border-top:3px solid var(--ro-orange);box-shadow:0 14px 30px rgba(7,22,36,.35)}
.main-header-menu .sub-menu .menu-link{color:#fff;font-size:17px;border-bottom:1px solid rgba(255,255,255,.08)}
.main-header-menu .sub-menu .menu-link:hover,.main-header-menu .sub-menu .current-menu-item>.menu-link{color:var(--ro-orange);background:rgba(255,255,255,.04)}
.ast-header-button-1 .ast-custom-button{white-space:nowrap}
.ast-mobile-header-content,.ast-mobile-popup-drawer .ast-mobile-popup-inner{background:var(--ro-navy)}
.ast-builder-menu-mobile .main-header-menu .menu-link{color:#fff;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:22px;letter-spacing:.04em;text-transform:uppercase}
.ast-builder-menu-mobile .main-header-menu .menu-link:hover{color:var(--ro-orange)}
.ast-mobile-menu-buttons .menu-toggle,.ast-mobile-header-wrap .menu-toggle{color:#fff}
.ast-mobile-header-wrap .ast-button-wrap .menu-toggle .ast-mobile-svg{fill:#fff}
@media (max-width:921px){ .ro-logo-1{font-size:28px} }
@media (max-width:782px){ .admin-bar #masthead{top:46px} }

/* ==========================================================================
   4. FOOTER (Astra Footer Builder)
   ========================================================================== */
.site-footer{font-family:'Inter',sans-serif;font-size:15px}
.site-primary-footer-wrap{padding-top:64px;padding-bottom:40px}
.ro-footer-brand p{margin:18px 0 0;max-width:300px;line-height:1.65}
.ro-footer-title{margin:0 0 16px;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:22px;letter-spacing:.06em;text-transform:uppercase;color:#fff}
.ro-footer-links{list-style:none;margin:0;padding:0}
.ro-footer-links li{margin:0 0 10px;line-height:1.4}
.ro-footer-links a{color:#fff;text-decoration:none}
.ro-footer-links a:hover{color:var(--ro-orange);text-decoration:underline}
.ro-footer-contact strong{color:#fff}
.site-below-footer-wrap{border-top:1px solid rgba(255,255,255,.1);font-size:14px}
.ro-sep{opacity:.4;margin:0 .5em}

/* ==========================================================================
   5. ELEMENTOR COMPONENT HELPERS (classes assigned in Elementor > Advanced > CSS Classes)
   ========================================================================== */
.ro-card{transition:box-shadow .2s ease,transform .2s ease}
.ro-card:hover{box-shadow:0 14px 32px rgba(11,31,51,.12);transform:translateY(-2px)}
.ro-route-line{flex:1 1 auto;min-width:40px;align-self:center;height:0;position:relative}
.ro-route-line::after{content:"";position:absolute;right:-1px;top:-6px;border-left:9px solid var(--ro-orange);border-top:5px solid transparent;border-bottom:5px solid transparent}
.ro-step-node{flex:0 0 auto}
@media (max-width:767px){
  .ro-step{position:relative}
  .ro-step:not(:last-child)::after{content:"";position:absolute;left:27px;top:68px;bottom:-34px;border-left:2px dashed var(--ro-orange)}
}
.ro-faq .elementor-accordion .elementor-accordion-item{border-left:0;border-right:0}
.ro-faq .elementor-tab-title{display:flex;align-items:center;gap:12px}

/* Mobile conversion bar (container with class ro-mobile-bar at the end of each page) */
.ro-mobile-bar{position:fixed!important;left:0;right:0;bottom:0;z-index:9998;box-shadow:0 -6px 18px rgba(7,22,36,.25)}
.ro-mobile-bar .elementor-button{border-radius:0;width:100%}
@media (max-width:767px){ body{padding-bottom:62px} }

/* ==========================================================================
   6. QUOTE FORM (Fluent Forms inside .ro-quote-card)
   ========================================================================== */
.ro-quote-card .fluentform .ff-el-group{margin-bottom:14px}
.ro-quote-card .fluentform .ff-el-input--label label{font-family:'Inter',sans-serif;font-weight:600;font-size:14px;color:var(--ro-navy)}
.ro-quote-card .fluentform .ff-el-form-control{min-height:46px;padding:11px 14px;border:1px solid #CBD2DA;border-radius:2px;background:#fff;color:var(--ro-navy);font-family:'Inter',sans-serif;font-size:16px;box-shadow:none}
.ro-quote-card .fluentform .ff-el-form-control:focus{border-color:var(--ro-blue);box-shadow:0 0 0 3px rgba(20,100,244,.2)}
.ro-quote-card .fluentform .ff-t-container{gap:10px}
.ro-quote-card .fluentform .ff-btn,.ro-quote-card .fluentform .ff-btn-submit,.ro-quote-card .fluentform .ff-btn-next{background:var(--ro-orange)!important;color:var(--ro-navy)!important;border:0;border-radius:2px;padding:15px 26px;font-family:'Inter',sans-serif;font-weight:800;font-size:15px;letter-spacing:.06em;text-transform:uppercase;transition:background .2s,color .2s}
.ro-quote-card .fluentform .ff-btn:hover,.ro-quote-card .fluentform .ff-btn-submit:hover,.ro-quote-card .fluentform .ff-btn-next:hover{background:var(--ro-navy)!important;color:#fff!important}
.ro-quote-card .fluentform .ff-btn-prev{background:#E9EDF2!important;color:var(--ro-navy)!important}
.ro-quote-card .fluentform .step-nav{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:6px}
.ro-quote-card .fluentform .step-nav .ff-btn-next,.ro-quote-card .fluentform .ff_submit_btn_wrapper .ff-btn-submit{width:100%}
.ro-quote-card .fluentform .ff-step-titles li{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.ro-quote-card .fluentform .ff-step-titles li.ff_active:before{background:var(--ro-orange);color:var(--ro-navy)}
.ro-quote-card .fluentform .ff-el-progress{height:8px;background:#E9EDF2;border-radius:0}
.ro-quote-card .fluentform .ff-el-progress-bar{background:var(--ro-orange);height:8px}
.ro-quote-card .fluentform .ff-el-progress-status{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--ro-navy)}
.ro-quote-card .fluentform .ff-message-success{border:0;border-left:4px solid var(--ro-orange);background:var(--ro-offwhite);color:var(--ro-navy);padding:18px}
.ro-quote-card .fluentform .text-danger,.ro-quote-card .fluentform .error{color:#C0262D;font-size:13px}

/* ==========================================================================
   7. ELEMENTOR FULL-WIDTH PAGES (stop Astra's container from boxing Elementor sections)
   ========================================================================== */
body.elementor-template-full-width .site-content>.ast-container,body.page-template-elementor_header_footer .site-content>.ast-container{max-width:100%;width:100%;padding:0;display:block}
body.elementor-template-full-width #primary,body.page-template-elementor_header_footer #primary{width:100%;margin:0;padding:0;max-width:100%}
body.elementor-template-full-width .site-main,body.page-template-elementor_header_footer .site-main{margin:0}

/* ==========================================================================
   8. ELEMENTOR-BUILT HEADER / FOOTER TEMPLATES (placed in Astra slots via template shortcode)
   ========================================================================== */
.ast-above-header .ast-builder-grid-row{display:block}
.ast-above-header .ast-builder-layout-element,.ast-above-header .ast-builder-html-element{width:100%}
.ast-above-header-bar .ast-builder-html-element{font-size:inherit}
.ast-above-header-bar{min-height:0}
.site-primary-header-wrap .ast-builder-html-element,.site-primary-header-wrap .ast-builder-html-element .elementor{line-height:1}
.ro-logo-tpl a{text-decoration:none!important}
.ro-header-phone{margin:0;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:21px;letter-spacing:.04em;color:#fff;white-space:nowrap}
.ro-header-phone .ro-phone-label{color:var(--ro-orange)}
.site-primary-footer-wrap{padding:0!important}
.site-primary-footer-wrap .ast-builder-grid-row-container-inner,.site-primary-footer-wrap .ast-builder-grid-row{display:block;padding:0}
.site-primary-footer-wrap .ast-builder-layout-element,.site-primary-footer-wrap .ast-builder-html-element{width:100%;max-width:100%}
.site-primary-footer-wrap .ast-builder-html-element p:empty{display:none}
.site-primary-footer-wrap .ast-container,.site-primary-footer-wrap .ast-builder-grid-row-container{max-width:100%;padding:0}
.ro-footer-bottom{border-top:1px solid rgba(255,255,255,.1)}
@media (max-width:921px){ .ast-mobile-popup-content .ro-header-phone{display:none} }


/* ==========================================================================
   9. HEADER LAYOUT FIXES
   ========================================================================== */
.ro-logo-tpl{width:auto!important;min-width:210px}
.ro-logo-tpl .elementor-heading-title{white-space:nowrap}
.ro-topbar{width:100%!important;max-width:100%}
.ast-builder-html-element .elementor,.ast-builder-html-element .elementor .e-con{max-width:100%}
.ast-desktop .site-primary-header-wrap .ast-builder-grid-row{grid-template-columns:auto 1fr auto;column-gap:24px}
.ast-desktop .site-primary-header-wrap .site-header-primary-section-center{justify-content:center}
.ast-desktop .site-primary-header-wrap .site-header-primary-section-right{gap:22px}
.main-header-menu .menu-link{padding-left:.75em;padding-right:.75em;white-space:nowrap}
.site-primary-header-wrap .ast-builder-html-element{width:auto}


/* ==========================================================================
   10. QUOTE FORM COLUMNS
   ========================================================================== */
.ro-quote-card .fluentform .ff-t-container{display:flex;flex-wrap:nowrap;gap:12px}
.ro-quote-card .fluentform .ff-t-cell{flex:1 1 0;min-width:0;padding:0}
.ro-quote-card .fluentform .ff-el-group{margin-bottom:12px}
.ro-quote-card .fluentform .ff-el-form-check-label,.ro-quote-card .fluentform .ff_t_c{font-size:13px;line-height:1.4}
@media (max-width:480px){ .ro-quote-card .fluentform .ff-t-container.ff_columns_total_3{flex-wrap:wrap} .ro-quote-card .fluentform .ff-t-container.ff_columns_total_3 .ff-t-cell{flex:1 1 30%} }


/* ==========================================================================
   11. NAV WIDTH (keep the main menu on one row at desktop widths)
   ========================================================================== */
.ast-desktop .main-header-menu .menu-link{padding-left:.55em;padding-right:.55em;font-size:17px;letter-spacing:.5px}
.ast-desktop .ast-builder-menu-1 .main-header-menu{flex-wrap:nowrap}
.ast-desktop .site-primary-header-wrap .ast-builder-grid-row{column-gap:16px}
.ast-desktop .site-primary-header-wrap .site-header-primary-section-right{gap:18px}
.ro-header-phone{font-size:19px}


/* ==========================================================================
   12. TOP BAR (stretch the Elementor top-bar template across the full header width)
   ========================================================================== */
.ast-above-header .site-header-above-section-left,.ast-above-header .site-header-above-section-left .ast-builder-html-element{width:100%!important;max-width:100%!important;flex:1 1 100%}
.ast-above-header-bar .ast-builder-grid-row{padding-top:0;padding-bottom:0}


/* ==========================================================================
   13. STEPS ROW (How It Works): 4 across on desktop, 2 on tablet, 1 on mobile
   ========================================================================== */
.ro-steps-row{flex-wrap:nowrap!important}
.ro-steps-row>.ro-step{flex:1 1 0!important;width:auto!important;min-width:0}
@media (max-width:1024px){ .ro-steps-row{flex-wrap:wrap!important} .ro-steps-row>.ro-step{flex:1 1 calc(50% - 20px)!important} }
@media (max-width:767px){ .ro-steps-row>.ro-step{flex:1 1 100%!important} }


/* ==========================================================================
   14. FOOTER COLUMNS (Elementor footer template)
   ========================================================================== */
.ro-footer-cols{flex-wrap:nowrap!important}
.ro-footer-cols>.e-con,.ro-footer-cols .e-con-inner>.e-con{flex:1 1 0!important;width:auto!important;min-width:0}
.ro-footer-cols>.ro-footer-brand-col,.ro-footer-cols .e-con-inner>.ro-footer-brand-col{flex:1.5 1 0!important}
@media (max-width:1024px){ .ro-footer-cols{flex-wrap:wrap!important} .ro-footer-cols>.e-con,.ro-footer-cols .e-con-inner>.e-con{flex:1 1 calc(50% - 24px)!important} }
@media (max-width:767px){ .ro-footer-cols>.e-con,.ro-footer-cols .e-con-inner>.e-con{flex:1 1 100%!important} }
.site-footer .ast-container,.site-footer .ast-builder-grid-row-container-inner,.site-footer .site-primary-footer-wrap .ast-builder-grid-row-container{padding-left:0!important;padding-right:0!important;max-width:100%!important}


/* ==========================================================================
   15. NODES AND BREADCRUMBS
   ========================================================================== */
.ro-step-node{flex:0 0 auto!important;min-width:60px}
.ro-steps-row .ro-step-node{min-width:64px}
@media (max-width:767px){ .ro-step-node{min-width:50px} .ro-steps-row .ro-step-node{min-width:56px} }
.ro-breadcrumbs .rank-math-breadcrumb p,.ro-breadcrumbs nav{margin:0;font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:#C5D0DD}
.ro-breadcrumbs a{color:#fff;text-decoration:none}
.ro-breadcrumbs a:hover{color:var(--ro-orange);text-decoration:underline}
.ro-breadcrumbs .separator{margin:0 .5em;color:var(--ro-orange)}
.ro-breadcrumbs .last{color:#C5D0DD}


/* ==========================================================================
   16. TOP BAR WIDTH (Astra wraps the template in .ast-header-html which would otherwise shrink to fit)
   ========================================================================== */
.ast-above-header .ast-header-html{flex:1 1 100%!important;width:100%!important}
.ast-above-header .ast-header-html .elementor{width:100%}


/* ==========================================================================
   17. FOOTER INSET (remove Astra's 35px side padding so the Elementor footer template is full width)
   ========================================================================== */
.site-primary-footer-inner-wrap.ast-builder-footer-grid-columns,.site-below-footer-inner-wrap.ast-builder-footer-grid-columns,.site-above-footer-inner-wrap.ast-builder-footer-grid-columns{padding-left:0!important;padding-right:0!important}


/* ==========================================================================
   18. FLOATING NAVBAR (rounded "pill" that floats over the hero and stays on scroll)
   The orange promo ticker stays flush at the top; the navy navbar floats beneath it.
   ========================================================================== */
:root{--ro-nav-offset:84px}
@media (max-width:921px){ :root{--ro-nav-offset:68px} }
#masthead{position:sticky;top:0;z-index:999;background:transparent!important;box-shadow:none!important;margin-bottom:calc(var(--ro-nav-offset) * -1)}
#masthead .main-header-bar-wrap,#masthead .ast-main-header-wrap,#masthead .ast-above-header-wrap{background:transparent!important}
.ast-primary-header-bar.main-header-bar{background:rgba(11,31,51,.96)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12)!important;border-radius:20px;margin:12px auto 0;width:calc(100% - 48px);max-width:1280px;box-shadow:0 16px 44px rgba(7,22,36,.45);overflow:visible}
.ast-primary-header-bar .ast-builder-grid-row-container-inner{padding-left:12px;padding-right:12px}
.ast-primary-header-bar .main-header-bar-navigation{overflow:visible}
@media (max-width:921px){
  .ast-primary-header-bar.main-header-bar{margin-top:8px;width:calc(100% - 20px);border-radius:16px}
}
/* first Elementor section on a page starts below the floating navbar */
body.page-template-elementor_header_footer .elementor[data-elementor-type="wp-page"]>.e-con.e-parent:first-child{padding-top:calc(var(--ro-nav-offset) + 56px)!important}
@media (max-width:767px){ body.page-template-elementor_header_footer .elementor[data-elementor-type="wp-page"]>.e-con.e-parent:first-child{padding-top:calc(var(--ro-nav-offset) + 34px)!important} }
.admin-bar #masthead{top:32px}
@media (max-width:782px){ .admin-bar #masthead{top:46px} }

/* ==========================================================================
   19. PROMO TICKER (infinite scroll in the top bar; text is edited in Elementor)
   ========================================================================== */
.ro-topbar .ro-ticker{flex:1 1 0;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%)}
.ro-ticker .elementor-widget-container{overflow:hidden;white-space:nowrap}
.ro-ticker-track{display:inline-flex;white-space:nowrap;will-change:transform;animation:ro-ticker var(--ro-dur,40s) linear infinite}
.ro-ticker:hover .ro-ticker-track{animation-play-state:paused}
.ro-ticker-group{display:inline-block;padding-right:3.2em}
.ro-ticker-group p{display:inline;margin:0}
@keyframes ro-ticker{from{transform:translateX(0)}to{transform:translateX(calc(var(--ro-shift,50%) * -1))}}
@media (prefers-reduced-motion:reduce){ .ro-ticker-track{animation:none} .ro-ticker-group[aria-hidden]{display:none} .ro-ticker .elementor-widget-container{overflow:hidden;text-overflow:ellipsis} }
.ro-topbar{gap:24px}
.ro-topbar .elementor-widget-text-editor{margin:0}

/* ==========================================================================
   20. MULTI-STEP QUOTE FORM UI (hero quick quote)
   ========================================================================== */
.ro-step-hidden{display:none!important}
.ro-steps-ui{margin:0 0 14px}
.ro-steps-label{margin-bottom:8px;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:17px;letter-spacing:.08em;text-transform:uppercase;color:var(--ro-navy)}
.ro-steps-label span{color:var(--ro-orange);margin:0 .25em}
.ro-steps-bar{display:flex;gap:6px}
.ro-steps-bar i{flex:1;height:6px;border-radius:3px;background:#E1E5EA}
.ro-steps-bar i.is-done,.ro-steps-bar i.is-active{background:var(--ro-orange)}
.ro-steps-nav{display:flex;gap:10px;margin-top:8px}
.ro-steps-nav button{cursor:pointer;border:0;border-radius:2px;padding:15px 22px;font-family:'Inter',sans-serif;font-weight:800;font-size:15px;letter-spacing:.06em;text-transform:uppercase;transition:background .2s,color .2s}
.ro-steps-nav .ro-step-next{flex:1;background:var(--ro-orange);color:var(--ro-navy)}
.ro-steps-nav .ro-step-next:hover{background:var(--ro-navy);color:#fff}
.ro-steps-nav .ro-step-prev{background:#E9EDF2;color:var(--ro-navy)}
.ro-steps-nav .ro-step-prev:hover{background:#D5DAE1}
.ro-invalid .ff-el-form-control{border-color:#C0262D!important}
.ro-err{margin-top:4px;color:#C0262D;font-size:13px;line-height:1.3}
.ro-quote-card .fluentform .ff-el-section-break{margin:6px 0 8px}
.ro-quote-card .fluentform .ff-el-section-break .ff-el-section-title{margin:0;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:20px;letter-spacing:.06em;text-transform:uppercase;color:var(--ro-navy)}
.ro-quote-card .fluentform .ff-el-section-break hr{margin:6px 0 0;border:0;border-top:2px solid var(--ro-orange);width:42px}
.ro-quote-card .fluentform .ff-el-section-break .ff-section_break_desk{margin:4px 0 0;font-size:13px;color:var(--ro-slate)}

/* ==========================================================================
   21. DEPOT CARDS
   ========================================================================== */
.ro-depot .elementor-icon-list-text{line-height:1.45}
.ro-depot-tag{display:inline-block}


/* ==========================================================================
   22. NAVBAR WIDTH + COMPACT HERO FORM
   ========================================================================== */
.ast-primary-header-bar.main-header-bar{max-width:1340px}
.ast-primary-header-bar .ast-container,.ast-primary-header-bar .site-primary-header-wrap,.ast-primary-header-bar .ast-builder-grid-row-container-inner,.ast-primary-header-bar .ast-builder-grid-row{max-width:100%!important}
.ast-primary-header-bar .ast-builder-grid-row-container-inner{padding-left:22px;padding-right:22px}
.ast-desktop .main-header-menu .menu-link{padding-left:.5em;padding-right:.5em}
.ro-multistep .fluentform .ff-el-group{margin-bottom:8px}
.ro-multistep .fluentform .ff-el-form-control{min-height:42px;padding:9px 12px}
.ro-multistep .fluentform .ff-el-input--label{margin-bottom:3px}
.ro-multistep .fluentform .ff-el-input--label label{font-size:13px}
.ro-multistep .fluentform .ff-el-section-break{margin:2px 0 4px}
.ro-multistep .fluentform .ff-t-container{gap:10px}

/* ==========================================================================
   23. TOP BAR CONTAINMENT (the ticker's long text must never widen the page, on any screen size)
   ========================================================================== */
.ast-above-header-bar{overflow:hidden}
.ast-above-header-bar .ast-builder-grid-row{display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important;max-width:100%!important}
.ast-above-header-bar .site-header-above-section-left{min-width:0;width:100%!important;max-width:100%}
.ast-above-header-bar .site-header-above-section-right{display:none}
.ast-above-header-bar .ast-builder-layout-element,.ast-above-header-bar .ast-header-html,.ast-above-header-bar .ast-builder-html-element,.ast-above-header-bar .elementor{min-width:0;max-width:100%}
.ro-topbar{min-width:0;max-width:100%;overflow:hidden}
.ro-topbar .ro-ticker{min-width:0;max-width:100%}
html,body{overflow-x:clip}

/* ==========================================================================
   24. HEADER CTA (pill button that matches the rounded navbar)
   Equal 12px inset on the right as above and below the button (pill is 74px tall, button is 50px).
   ========================================================================== */
.ast-desktop .ast-primary-header-bar .ast-builder-grid-row-container-inner{padding-right:12px}
.ast-header-button-1 .ast-custom-button{display:inline-flex;align-items:center;gap:10px;border-radius:999px!important;box-shadow:0 6px 16px rgba(255,107,0,.35);transition:background .2s,color .2s,transform .2s,box-shadow .2s}
.ast-header-button-1 .ast-custom-button::after{content:"\2192";font-family:'Inter',sans-serif;font-weight:700;font-size:.95em;line-height:1;transition:transform .2s}
.ast-header-button-1 .ast-custom-button:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(255,255,255,.16)}
.ast-header-button-1 .ast-custom-button:hover::after{transform:translateX(3px)}
.ast-desktop .site-header-primary-section-right{align-items:center}
/* Mobile drawer: full-width pill button */
@media (max-width:921px){
  .ast-mobile-header-content .ast-header-button-1,.ast-mobile-popup-content .ast-header-button-1{display:block;padding:14px 20px 18px}
  .ast-mobile-header-content .ast-header-button-1 .ast-custom-button,.ast-mobile-popup-content .ast-header-button-1 .ast-custom-button{display:flex;justify-content:center;width:100%;box-sizing:border-box}
}

/* ==========================================================================
   25. HEADER CTA INSET (1px pill border + 11px = 12px, same as the gap above and below the button)
   ========================================================================== */
@media (min-width:922px){ .ast-primary-header-bar.main-header-bar .site-primary-header-wrap{padding-right:11px!important} }

/* ==========================================================================
   26. MOBILE MENU CTA (the link wrapper must stretch for the pill to be full width)
   ========================================================================== */
@media (max-width:921px){
  .ast-mobile-header-content .ast-header-button-1 .ast-custom-button-link,.ast-mobile-popup-content .ast-header-button-1 .ast-custom-button-link{display:block;width:100%}
  .ast-mobile-header-content .ast-header-button-1 .ast-custom-button{justify-content:center}
}

/* ==========================================================================
   27. MOBILE MENU CTA WRAPPER (Astra puts the button in a flex row; its wrapper must fill it)
   ========================================================================== */
@media (max-width:921px){
  .ast-mobile-header-content .ast-header-button-1{padding:14px 20px 18px;box-sizing:border-box}
  .ast-mobile-header-content .ast-header-button-1 .ast-builder-button-wrap{flex:1 1 100%;width:100%}
}

/* ==========================================================================
   28. COMPACT NAVBAR (922px-1379px): phone hides, menu and button tighten so everything stays inside the pill
   ========================================================================== */
@media (min-width:922px) and (max-width:1379px){
  .ast-primary-header-bar.main-header-bar{width:calc(100% - 28px)}
  .ast-primary-header-bar .ast-builder-grid-row-container-inner,.ast-primary-header-bar.main-header-bar .site-primary-header-wrap{padding-left:14px}
  .ast-desktop .site-primary-header-wrap .ast-builder-grid-row{column-gap:10px}
  .ast-desktop .site-primary-header-wrap .header-widget-area,.ast-desktop .site-primary-header-wrap .ro-header-phone{display:none!important}
  .ast-desktop .main-header-menu .menu-link{font-size:16px;padding-left:.38em;padding-right:.38em;letter-spacing:.3px}
  .ast-header-button-1 .ast-custom-button{font-size:17px!important;padding:11px 20px!important}
}
@media (min-width:922px) and (max-width:1090px){
  .ast-desktop .main-header-menu .menu-link{font-size:15px;padding-left:.3em;padding-right:.3em}
  .ro-logo-tpl .elementor-widget-heading:first-child .elementor-heading-title{font-size:25px!important}
  .ro-logo-tpl .elementor-widget-heading:nth-child(2) .elementor-heading-title{font-size:9.5px!important;letter-spacing:.3em!important}
}
@media (min-width:922px) and (max-width:1000px){
  .ast-desktop .main-header-menu .menu-link{font-size:14px;padding-left:.25em;padding-right:.25em;letter-spacing:.2px}
  .ast-header-button-1 .ast-custom-button{font-size:16px!important;padding:10px 16px!important}
  .ast-header-button-1 .ast-custom-button::after{display:none}
}

/* ==========================================================================
   29. SKELETON UI (progressive enhancement only)
   Used ONLY where something genuinely waits for JavaScript to initialise: the hero form's step controls.
   Static Elementor content (H1, copy, nav, SEO text) is never skeletonised.
   Rules: reserve the exact final dimensions, CSS-only shimmer, static when reduced motion is requested,
   decorative (pseudo-elements and aria-hidden), removed the moment the real UI exists.
   ========================================================================== */
@keyframes ro-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.ro-skeleton,
html.ro-js body:not(.elementor-editor-active) .ro-multistep form.frm-fluent-form:not([data-ro-steps]) fieldset::before,
html.ro-js body:not(.elementor-editor-active) .ro-multistep form.frm-fluent-form:not([data-ro-steps]) fieldset::after{content:"";display:block;border-radius:8px;background:linear-gradient(90deg,#E9EDF2 25%,#F5F7FA 50%,#E9EDF2 75%);background-size:200% 100%;animation:ro-shimmer 1.4s linear infinite}
html.ro-js body:not(.elementor-editor-active) .ro-multistep form.frm-fluent-form:not([data-ro-steps]) fieldset::before{height:36px;margin-bottom:16px}   /* = .ro-steps-ui (52px) */
html.ro-js body:not(.elementor-editor-active) .ro-multistep form.frm-fluent-form:not([data-ro-steps]) fieldset::after{height:50px;margin-top:8px}        /* = .ro-steps-nav (58px) */
/* Before the script runs only step 1 is shown, so the first paint equals the enhanced layout (no layout shift). */
html.ro-js body:not(.elementor-editor-active) .ro-multistep form.frm-fluent-form:not([data-ro-steps]) :is(.ro-s2,.ro-s3,.ff_submit_btn_wrapper){display:none}

/* ==========================================================================
   30. STEP CONTROLS (fixed heights so the skeleton and the real UI are identical)
   ========================================================================== */
.ro-steps-ui{height:52px;margin:0;box-sizing:border-box}
.ro-steps-label{margin-bottom:8px;line-height:22px}
.ro-steps-nav{display:flex;gap:10px;height:58px;margin:0;padding-top:8px;box-sizing:border-box;align-items:stretch}
.ro-steps-nav button,.ro-steps-nav .ff-btn-submit{height:50px;padding-top:0!important;padding-bottom:0!important;line-height:50px}
.ro-steps-nav .ro-step-next{flex:1}
.ro-steps-nav .ff_submit_btn_wrapper{flex:1;margin:0;padding:0}
.ro-steps-nav .ff_submit_btn_wrapper .ff-btn-submit{width:100%}
.ro-steps-nav .ro-step-prev{flex:0 0 auto;min-width:96px}
.ro-multistep .ff-el-section-break .ff-el-section-title{font-size:25px;line-height:1.1;margin-bottom:2px}
.ro-multistep .ff-el-section-break:focus{outline:none}
.ro-form-error{margin:8px 0 2px;padding:10px 12px;border-left:4px solid #C0262D;background:#FDECEE;color:#7A1118;font-size:14px;line-height:1.4}
.ro-sending{opacity:.9;cursor:progress}
.ro-sending::before{content:"";display:inline-block;width:14px;height:14px;margin-right:10px;vertical-align:-2px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ro-spin .7s linear infinite}
@keyframes ro-spin{to{transform:rotate(360deg)}}
.ro-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ro-top{height:38px}

/* ==========================================================================
   31. NAVBAR SCROLL STATE: dark on the hero, white after ~80px (toggled by one IntersectionObserver)
   Only colours, border and shadow change, never size, so there is no layout shift.
   ========================================================================== */
.ro-nav-sentinel{position:absolute;top:80px;left:0;width:1px;height:1px;opacity:0;pointer-events:none}
.ast-primary-header-bar.main-header-bar{transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease}
.ro-logo-tpl .elementor-heading-title,.ast-desktop .main-header-menu>.menu-item>.menu-link,.ro-header-phone,.ro-header-phone .ro-phone-label{transition:color .25s ease}
body.ro-scrolled .ast-primary-header-bar.main-header-bar{background:rgba(255,255,255,.97)!important;border-color:rgba(11,31,51,.12)!important;box-shadow:0 10px 30px rgba(7,22,36,.18)}
body.ro-scrolled .ro-logo-tpl .elementor-widget-heading:first-child .elementor-heading-title{color:#0B1F33!important}
body.ro-scrolled .ast-desktop .main-header-menu>.menu-item>.menu-link{color:#0B1F33!important}
body.ro-scrolled .ast-desktop .main-header-menu>.menu-item>.menu-link:hover,
body.ro-scrolled .ast-desktop .main-header-menu>.menu-item.current-menu-item>.menu-link,
body.ro-scrolled .ast-desktop .main-header-menu>.menu-item.current-menu-ancestor>.menu-link,
body.ro-scrolled .ast-desktop .main-header-menu>.menu-item.current_page_item>.menu-link{color:#1464F4!important}
body.ro-scrolled .ro-header-phone{color:#0B1F33}
body.ro-scrolled .ro-header-phone .ro-phone-label{color:#C2410C}
body.ro-scrolled .ast-mobile-header-wrap .ast-button-wrap .menu-toggle .ast-mobile-svg{fill:#0B1F33}
body.ro-scrolled .ast-mobile-header-wrap .menu-toggle{color:#0B1F33}

/* ==========================================================================
   32. SUCCESS MODAL (content is the Elementor template "Route One - Quote Success Modal")
   ========================================================================== */
html{scrollbar-gutter:stable}
html.ro-modal-open{overflow:hidden}
.ro-modal{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:16px}
.ro-modal[hidden]{display:none!important}
.ro-modal__backdrop{position:absolute;inset:0;background:rgba(7,22,36,.72)}
.ro-modal__dialog{position:relative;width:100%;max-width:540px;max-height:calc(100vh - 32px);overflow:auto;background:#fff;border-radius:18px;border-top:6px solid var(--ro-orange);box-shadow:0 30px 80px rgba(0,0,0,.45);outline:none;animation:ro-pop .22s ease-out}
.ro-modal__x{position:absolute;top:12px;right:12px;z-index:2;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:50%;background:#EEF1F5;color:var(--ro-navy);cursor:pointer;transition:background .2s}
.ro-modal__x:hover{background:#DDE3EA}
@keyframes ro-pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

/* ==========================================================================
   33. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .ro-skeleton,
  html.ro-js body:not(.elementor-editor-active) .ro-multistep form.frm-fluent-form:not([data-ro-steps]) fieldset::before,
  html.ro-js body:not(.elementor-editor-active) .ro-multistep form.frm-fluent-form:not([data-ro-steps]) fieldset::after{animation:none;background:#E9EDF2}
  .ro-modal__dialog,.ro-sending::before{animation:none}
  .ast-primary-header-bar.main-header-bar,.ro-logo-tpl .elementor-heading-title,.ast-desktop .main-header-menu>.menu-item>.menu-link,.ro-header-phone,.ro-header-phone .ro-phone-label,.ro-modal__x{transition:none}
  html{scroll-behavior:auto}
}


/* ==========================================================================
   34. PROMO BAR HEIGHT (fixed: identical before and after the ticker script runs, so the header never moves)
   ========================================================================== */
.ast-above-header-bar{height:36px;min-height:36px;box-sizing:border-box}
.ast-above-header-bar .ast-builder-grid-row,.ast-above-header-bar .site-header-above-section-left{height:36px;min-height:0;align-items:center}
.ro-topbar{height:36px;min-height:36px;box-sizing:border-box;align-items:center}
.ro-ticker .elementor-widget-container{line-height:1.3;height:16px}
.ro-ticker-track,.ro-ticker-group{line-height:16px}

/* ==========================================================================
   35. STEP HEADINGS (real h3 elements inside the form; only the current step's heading is visible)
   ========================================================================== */
.ro-multistep .ro-step-heading{margin:0 0 14px;padding:0 0 10px;position:relative;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:25px;line-height:1.1;letter-spacing:.05em;text-transform:uppercase;color:var(--ro-navy)}
.ro-multistep .ro-step-heading::after{content:"";position:absolute;left:0;bottom:0;width:42px;height:2px;background:var(--ro-orange)}
.ro-multistep .ro-step-heading:focus{outline:none}
.ro-multistep .ro-step-title{margin-bottom:0}

/* #36 Mobile CTA bar: never covers a form or focused control (WCAG 2.4.11 Focus Not Obscured) */
html{scroll-padding-bottom:110px}
.ro-mobile-bar{transition:transform .2s ease,visibility 0s}
body.ro-form-in-view .ro-mobile-bar{transform:translateY(110%);visibility:hidden;transition:transform .2s ease,visibility 0s .2s}
@media (prefers-reduced-motion:reduce){.ro-mobile-bar,body.ro-form-in-view .ro-mobile-bar{transition:none}}

/* #37 Desktop menu colour once the bar turns white. Astra puts .ast-desktop on <body> itself, so it must be chained to body.ro-scrolled (a descendant selector never matches). */
body.ro-scrolled.ast-desktop .main-header-menu>.menu-item>.menu-link{color:#0B1F33!important}
body.ro-scrolled.ast-desktop .main-header-menu>.menu-item>.menu-link:hover,
body.ro-scrolled.ast-desktop .main-header-menu>.menu-item.current-menu-item>.menu-link,
body.ro-scrolled.ast-desktop .main-header-menu>.menu-item.current-menu-ancestor>.menu-link,
body.ro-scrolled.ast-desktop .main-header-menu>.menu-item.current_page_item>.menu-link{color:#1464F4!important}
/* #38 Top bar: non-ticker items never shrink or wrap, so the bar is identical before and after the ticker script runs. Form skeleton placeholders now live inside the fieldset, exactly where the real step header and buttons are inserted (no box moves on init). */
.ro-topbar>*:not(.ro-ticker){flex:0 0 auto;white-space:nowrap}

/* #39 Skeleton geometry is pixel-identical to the real thing: placeholders use non-collapsing borders (52px header, 58px nav) and the ticker widget is one fixed 17px nowrap line before and after its script builds the track. */
html.ro-js body:not(.elementor-editor-active) .ro-multistep form.frm-fluent-form:not([data-ro-steps]) fieldset::before{box-sizing:content-box;height:36px;margin:0;border-bottom:16px solid transparent;background-clip:padding-box}
html.ro-js body:not(.elementor-editor-active) .ro-multistep form.frm-fluent-form:not([data-ro-steps]) fieldset::after{box-sizing:content-box;height:50px;margin:0;border-top:8px solid transparent;background-clip:padding-box}
.ro-ticker{height:17px;white-space:nowrap;overflow:hidden}
.ro-ticker p{margin:0}