/* ==========================================================================
   Homepage enhancements (index.html only).
   Every block below is independent: delete a block (and, where noted, its
   part in enhancements.js / its markup marked "xe:" in index.html) to drop
   that one feature. All new classes use the xe- prefix.
   Like the FAQ/tab fixes in main.css, these are not switched off under
   prefers-reduced-motion (it is on by default on Windows Server).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. HERO: description + CTA buttons (markup: .xe-hero-desc, .xe-hero-btns)
   -------------------------------------------------------------------------- */
.xe-hero-desc{max-width:560px;margin:26px 0 34px;font-size:19px;line-height:1.6}
/* The photo stays dark in both themes, so keep the text light in both. */
.slider-item .hero-content .xe-hero-desc,
[data-theme=light] .slider-item .hero-content .xe-hero-desc{color:rgba(255,255,255,.85)}
.xe-hero-btns{display:flex;flex-wrap:wrap;gap:16px}
.xe-hero-btns .rr-primary-btn{margin-right:0}
.xe-hero-btns .rr-primary-btn i{margin-left:10px;transform:rotate(-45deg);transition:transform .3s ease}
.xe-hero-btns .rr-primary-btn:hover i{transform:rotate(0)}
.xe-btn-outline{display:inline-flex;align-items:center;padding:21px 30px;font-family:var(--rr-ff-heading);font-size:16px;font-weight:600;line-height:1;color:var(--rr-color-common-white);border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.06);transition:background-color .3s ease,color .3s ease,border-color .3s ease}
.xe-btn-outline:hover{background-color:var(--rr-color-common-white);border-color:var(--rr-color-common-white);color:#02050a}
@media(max-width:1199px){.xe-hero-desc{font-size:17px;margin:20px 0 28px}}
@media only screen and (max-width:767px){
  .xe-hero-desc{font-size:15px;margin:14px 0 20px}
  .xe-hero-btns{gap:10px}
  .xe-hero-btns .rr-primary-btn,.xe-btn-outline{padding:15px 20px;font-size:14px}
  /* The big circle button duplicated the CTA and sat alone under the text. */
  .slider-item .slider-content-wrap .hero-content-wrap .slider-btn-wrap{display:none}
}


/* --------------------------------------------------------------------------
   2. HERO: Ken Burns on every slide. The theme's .kenburns-top rule set only
   animation-name (no duration), so it never moved. Runs continuously on all
   slides (alternate), so nothing snaps back when the fade changes slides.
   -------------------------------------------------------------------------- */
.slider-item .slide-img-wrap{overflow:hidden}
/* A transformed image paints above earlier positioned siblings, so lift the
   dark overlay and the shape back over it. */
.slider-item .overlay{z-index:1}
/* multiply -> normal: looks the same with this near-black colour, but the
   browser no longer re-blends the whole hero on every Ken Burns frame. */
.slider-item .overlay{mix-blend-mode:normal}
.slider-item .shape{z-index:2}
.swiper-slide .slider-item .slide-img.kenburns{animation:xe-kenburns 18s ease-in-out infinite alternate;transform-origin:60% 40%}
@keyframes xe-kenburns{from{transform:scale(1) translate(0,0)}to{transform:scale(1.12) translate(-1.5%,-1%)}}


/* --------------------------------------------------------------------------
   3. HERO: rotating text ring round the circle button (markup: svg.xe-ring)
   -------------------------------------------------------------------------- */
.slider-item .slider-content-wrap .hero-content-wrap .slider-btn-wrap .slider-btn{position:relative;transition:background-color .4s ease,border-color .4s ease}
.slider-item .slider-content-wrap .hero-content-wrap .slider-btn-wrap .slider-btn:hover{background-color:rgba(22,163,74,.85);border-color:var(--rr-color-theme-primary)}
.xe-ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;animation:xe-spin 22s linear infinite}
.xe-ring text{font-family:var(--rr-ff-heading);font-size:13px;font-weight:600;letter-spacing:3px;fill:rgba(255,255,255,.8)}
/* no hover change on the ring: altering animation-duration mid-spin makes the
   text jump to a new angle. On hover only the centre arrow moves. */
@keyframes xe-spin{to{transform:rotate(360deg)}}


/* --------------------------------------------------------------------------
   4. HERO TABS: the green on the active tab sweeps in from the left instead
   of snapping; hovering an inactive tab lifts it and shows a green sliver.
   The theme puts the green on the slide itself, so that is cleared and a
   ::before fill inside the button is animated instead.
   -------------------------------------------------------------------------- */
.slider-tab-wrap .swiper-slide.swiper-slide-thumb-active{background-color:transparent}
.slider-tab-wrap .swiper-slide .slider-tab-btn{position:relative;overflow:hidden;isolation:isolate;transition:translate .35s cubic-bezier(.22,1,.36,1),border-color .35s ease,color .35s ease}
.slider-tab-wrap .swiper-slide .slider-tab-btn::before{content:"";position:absolute;inset:0;background:var(--rr-color-theme-primary);transform:scaleX(0);transform-origin:left center;transition:transform .6s cubic-bezier(.65,0,.35,1);z-index:-1}
.slider-tab-wrap .swiper-slide.swiper-slide-thumb-active .slider-tab-btn,
[data-theme=light] .slider-tab-wrap .swiper-slide.swiper-slide-thumb-active .slider-tab-btn{color:var(--rr-color-common-white);border-color:var(--rr-color-theme-primary)}
.slider-tab-wrap .swiper-slide.swiper-slide-thumb-active .slider-tab-btn::before{transform:scaleX(1)}
.slider-tab-wrap .swiper-slide:not(.swiper-slide-thumb-active) .slider-tab-btn:hover{translate:0 -3px;border-color:rgba(22,163,74,.6)}
.slider-tab-wrap .swiper-slide:not(.swiper-slide-thumb-active) .slider-tab-btn:hover::before{transform:scaleX(.06)}


/* --------------------------------------------------------------------------
   6. BIG OUTLINE WORDS ("AGENCY", "ABOUT US", "GET STARTED"): they drift
   sideways while scrolling (enhancements.js). Also trims the empty space
   around "AGENCY".
   -------------------------------------------------------------------------- */
.process-text{padding-top:60px;padding-bottom:40px;will-change:transform}
@media only screen and (max-width:992px){.process-text{padding-bottom:0}}
@media only screen and (max-width:767px){.process-text{padding-top:40px}}


/* --------------------------------------------------------------------------
   7. ABOUT: small image floats against the big one while scrolling
   (--xe-py is driven by enhancements.js); the dot patterns bob gently.
   Keeps main.css's hover lift (-8px) on top of the parallax.
   -------------------------------------------------------------------------- */
.about-wrap .about-img-wrap .about-img-2{translate:0 var(--xe-py,0px)}
.about-wrap .about-img-wrap .about-img-2:hover{translate:0 calc(var(--xe-py,0px) - 8px)}
.about-wrap > .shape img{animation:xe-float 7s ease-in-out infinite}
.about-wrap .about-img-wrap > .img-shape{animation:xe-float 6s ease-in-out infinite reverse}
@keyframes xe-float{0%,100%{translate:0 0}50%{translate:0 -14px}}
/* Phones: the theme's left:-30px pushed the small image off the screen. */
@media only screen and (max-width:767px){.about-wrap .about-img-wrap .about-img-2{left:0}}


/* --------------------------------------------------------------------------
   8. STATS STRIP (markup: section.xe-stats; count-up in enhancements.js)
   -------------------------------------------------------------------------- */
.xe-stats{padding:90px 0 0;position:relative}
.xe-stats .container{border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:70px}
.xe-stat{text-align:center;position:relative}
.xe-stats .col-lg-3:not(:last-child) .xe-stat::after{content:"";position:absolute;top:10%;right:-12px;height:80%;width:1px;background:rgba(255,255,255,.08)}
.xe-stats .xe-stat-num{font-size:64px;font-weight:700;line-height:1;margin-bottom:12px;color:var(--rr-color-theme-primary);font-variant-numeric:tabular-nums}
.xe-stats .xe-stat p{margin:0;font-size:16px;letter-spacing:.02em;color:rgba(255,255,255,.7)}
@media(max-width:1199px){.xe-stats .xe-stat-num{font-size:52px}}
@media only screen and (max-width:991px){.xe-stats .col-lg-3:nth-child(2) .xe-stat::after{display:none}}
@media only screen and (max-width:767px){
  .xe-stats{padding-top:60px}
  .xe-stats .container{padding-bottom:50px}
  .xe-stats .xe-stat-num{font-size:40px}
  .xe-stats .xe-stat p{font-size:14px}
}


/* --------------------------------------------------------------------------
   9. SERVICES: 9th "View All Services" card (markup: a.xe-service-cta) and
   an icon flip on hover for all cards.
   -------------------------------------------------------------------------- */
.process-item-3 .icon img{transition:transform .7s cubic-bezier(.65,0,.35,1)}
.process-item-3:hover .icon img{transform:rotateY(360deg)}

.xe-service-cta{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;height:100%;min-height:250px;margin:20px -20px -20px;padding:40px 36px;border:1px dashed rgba(22,163,74,.6);position:relative;overflow:hidden;isolation:isolate;color:var(--rr-color-common-white)}
.xe-service-cta::before{content:"";position:absolute;inset:0;background:var(--rr-color-theme-primary);transform:scaleY(0);transform-origin:bottom center;transition:transform .6s cubic-bezier(.65,0,.35,1);z-index:-1}
.xe-service-cta:hover::before{transform:scaleY(1)}
.process-12 .xe-service-cta .title{font-size:28px;margin:10px 0 22px;color:var(--rr-color-common-white)}
.xe-service-cta-sub{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--rr-color-theme-primary);transition:color .4s ease}
.xe-service-cta:hover .xe-service-cta-sub{color:var(--rr-color-common-white)}
.xe-service-cta-link{display:inline-flex;align-items:center;gap:10px;font-family:var(--rr-ff-heading);font-weight:600;color:var(--rr-color-common-white)}
.xe-service-cta-link i{transform:rotate(-45deg);transition:transform .4s ease}
.xe-service-cta:hover .xe-service-cta-link i{transform:rotate(0) translateX(4px)}
@media only screen and (max-width:767px){.xe-service-cta{margin:20px 0 -20px;min-height:200px}}


/* --------------------------------------------------------------------------
   10. TESTIMONIALS: big quote mark, dashed ring round the photo and a small
   lift on hover (autoplay pauses on hover, enhancements.js).
   -------------------------------------------------------------------------- */
.testi-item{transition:translate .5s cubic-bezier(.22,1,.36,1)}
.testi-item:hover{translate:0 -6px}
.testi-item::after{content:"\201D";position:absolute;right:28px;bottom:-10px;font-family:var(--rr-ff-heading);font-size:140px;line-height:1;color:var(--rr-color-theme-primary);opacity:.15;pointer-events:none;transition:opacity .4s ease}
.testi-item:hover::after{opacity:.35}
.testi-item .testi-thumb::after{content:"";position:absolute;inset:-18px;border-radius:50%;border:2px dashed var(--rr-color-theme-primary);opacity:0;scale:.85;transition:opacity .4s ease,scale .5s cubic-bezier(.22,1,.36,1);pointer-events:none}
.testi-item:hover .testi-thumb::after{opacity:1;scale:1;animation:xe-spin 10s linear infinite}
.testi-item .testi-thumb img{border-radius:50%;transition:scale .5s cubic-bezier(.22,1,.36,1)}
.testi-item:hover .testi-thumb img{scale:1.06}


/* --------------------------------------------------------------------------
   11. PROJECTS: slow zoom on hover; on touch screens (no hover) the green
   band with the project name is always shown.
   -------------------------------------------------------------------------- */
.project-box-4 .project-img{overflow:hidden}
.project-box-2.project-box-4 .project-img img{transition:transform .9s cubic-bezier(.22,1,.36,1)}
.project-box-2.project-box-4:hover .project-img img{transform:scale(1.06)}
@media (hover:none){
  .project-box-4:after{transform:scaleY(1)}
  .project-box-2.project-box-4 .project-content{transform:translateY(0);opacity:1;visibility:visible}
}
/* Arrow button: same hover as the portfolio cards' button -- a green disc
   grows from the centre (instead of the instant colour swap), the arrow
   flies out to the right and back in from the left, the button grows a
   little and a white ring pulses out from its border. */
.project-box-2.project-box-4 .project-content .project-btn-2{position:relative}
.project-box-2.project-box-4 .project-content .project-btn-2::after{content:"";position:absolute;inset:-1px;border-radius:50%;pointer-events:none}
.project-box-2.project-box-4 .project-content .project-btn-2 a{position:relative;overflow:hidden;isolation:isolate;transition:scale .35s cubic-bezier(.34,1.4,.64,1),color .3s ease,background-color .3s ease,border-color .3s ease}
.project-box-2.project-box-4 .project-content .project-btn-2 a::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--rr-color-theme-primary);transform:scale(0);transition:transform .45s cubic-bezier(.34,1.4,.64,1);z-index:-1}
.project-box-2.project-box-4 .project-content .project-btn-2 a:hover{scale:1.1;color:var(--rr-color-common-white)}
.project-box-2.project-box-4 .project-content .project-btn-2 a:hover::before{transform:scale(1)}
.project-box-2.project-box-4 .project-content .project-btn-2 a i{display:inline-block}
.project-box-2.project-box-4 .project-content .project-btn-2 a:hover i{animation:xe-arrow-fly .6s cubic-bezier(.65,0,.35,1)}
@keyframes xe-btn-ring{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}100%{box-shadow:0 0 0 16px rgba(255,255,255,0)}}
@keyframes xe-arrow-fly{0%{transform:translateX(0);opacity:1}45%{transform:translateX(24px);opacity:0}46%{transform:translateX(-24px);opacity:0}100%{transform:translateX(0);opacity:1}}


/* --------------------------------------------------------------------------
   12. CLIENT LOGOS: one static, centred row (markup: .xe-logo-row). There
   are only 3 clients, so the old endless marquee just repeated them. The
   hovered logo brightens.
   -------------------------------------------------------------------------- */
.xe-logo-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:24px clamp(32px,6vw,96px)}
.xe-logo{display:flex;align-items:center;justify-content:center}
.xe-logo img{width:120px;height:100px;object-fit:contain;opacity:.55;transition:opacity .4s ease,scale .4s cubic-bezier(.22,1,.36,1)}
.xe-logo:hover img{opacity:1;scale:1.1}
@media only screen and (max-width:767px){.xe-logo-row{gap:16px 28px}.xe-logo img{width:84px;height:70px}}

/* Old endless marquee, kept for later (e.g. once there are enough client
   logos to scroll). To use it: wrap the logos in
   <div class="xe-logo-marquee"><div class="xe-logo-track">...</div></div>,
   repeat the full set of logos once inside the track (aria-hidden="true" on
   the copies) so the loop is seamless, uncomment the rules below, and add
   ".xe-offscreen .xe-logo-track," back to block 16.
.xe-logo-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%)}
.xe-logo-track{display:flex;width:max-content;animation:xe-marquee 32s linear infinite}
.xe-logo-marquee:hover .xe-logo-track{animation-play-state:paused}
.xe-logo-track .xe-logo{flex:0 0 auto;width:220px;padding:0 20px}
.xe-logo-track .xe-logo img{width:100px;height:100px}
@keyframes xe-marquee{to{transform:translateX(-50%)}}
@media only screen and (max-width:767px){.xe-logo-track .xe-logo{width:150px}.xe-logo-track .xe-logo img{width:70px;height:70px}}
*/


/* --------------------------------------------------------------------------
   13. CTA: pulsing ring on the green arrow button (magnetic pull on hover is
   in enhancements.js).
   -------------------------------------------------------------------------- */
.cta-wrap .cta-thumb-wrap .cta-btn::after{content:"";position:absolute;inset:-10px;border-radius:50%;pointer-events:none;animation:xe-pulse 2.4s ease-out infinite}
.cta-wrap .cta-thumb-wrap .cta-btn{transition:all .3s ease-in-out,translate .25s ease-out}
@keyframes xe-pulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.55)}100%{box-shadow:0 0 0 26px rgba(22,163,74,0)}}
/* "Have a project in mind?" sits a little higher, clear of the "GET STARTED"
   letters. `translate` (not transform/margin) so GSAP's fade-in and the
   heading below are untouched. */
.cta-section .section-heading .sub-heading{translate:0 -50px}
@media only screen and (max-width:767px){.cta-section .section-heading .sub-heading{translate:0 -24px}}


/* --------------------------------------------------------------------------
   14. QUOTE FORM: the "Select Topic" field is now a <select> (nice-select).
   Size it like the text inputs around it; placeholder grey until chosen.
   -------------------------------------------------------------------------- */
.request-content .request-form .form-item .form-control.nice-select{width:100%;height:auto;float:none;line-height:inherit;padding:15px 20px;border-radius:0;font-size:14px}
.request-content .request-form .form-item .form-control.nice-select:after{right:22px;width:8px;height:8px}
.request-content .request-form .form-item .form-control.nice-select .current{color:var(--rr-color-common-white)}
.request-content .request-form .form-item .form-control.nice-select:not(.xe-picked) .current,
[data-theme=light] .request-content .request-form .form-item .form-control.nice-select:not(.xe-picked) .current{color:#515357}
.request-content .request-form .form-item .form-control.nice-select .list{width:100%;border-radius:0;max-height:260px;overflow-y:auto}
/* Open list: the plugin paints it white, and the dark theme's white option
   text vanished on it. Dark theme gets a dark list like the inputs (light
   theme keeps main.css's white list), with a green hover/selected state.
   The "Choose a service" placeholder is not a real choice, so it is hidden. */
.request-content .request-form .form-item .form-control.nice-select .list{z-index:20;background-color:#0c0d10;border:1px solid #1e2228;box-shadow:0 18px 40px -12px rgba(0,0,0,.6)}
.request-content .request-form .form-item .form-control.nice-select .option{padding-left:20px;min-height:40px;line-height:40px;color:rgba(255,255,255,.8)}
.request-content .request-form .form-item .form-control.nice-select .option:hover,
.request-content .request-form .form-item .form-control.nice-select .option.focus{background-color:rgba(22,163,74,.15);color:var(--rr-color-common-white)}
.request-content .request-form .form-item .form-control.nice-select .option.selected{background-color:rgba(22,163,74,.22);color:#4ade80;font-weight:600}
.request-content .request-form .form-item .form-control.nice-select .option.disabled{display:none}
/* Each field column fades in with a GSAP transform, which makes it its own
   stacking layer, so the "Get A Quote" button (a later layer) painted over
   the open list and swallowed clicks on the lower options. Lift the column
   that holds the dropdown above the rest of the form. */
.request-content .request-form [class*="col-"]:has(.nice-select){position:relative;z-index:30}
[data-theme=light] .request-content .request-form .form-item .form-control.nice-select .list{border-color:#e5e7eb;box-shadow:0 18px 40px -16px rgba(0,0,0,.25)}
[data-theme=light] .request-content .request-form .form-item .form-control.nice-select .option{color:#4b5563}
[data-theme=light] .request-content .request-form .form-item .form-control.nice-select .option:hover,
[data-theme=light] .request-content .request-form .form-item .form-control.nice-select .option.focus{background-color:rgba(22,163,74,.1);color:var(--rr-color-heading-primary)}
[data-theme=light] .request-content .request-form .form-item .form-control.nice-select .option.selected{background-color:rgba(22,163,74,.14);color:#15803d}


/* --------------------------------------------------------------------------
   15. FOOTER: keep the social icons clear of the fixed scroll-to-top badge.
   -------------------------------------------------------------------------- */
@media(min-width:768px){.footer-section .copyright-content .social-list{margin-right:90px}}


/* --------------------------------------------------------------------------
   16. PERFORMANCE: pause the looping animations while their section is off
   screen (enhancements.js adds .xe-offscreen).
   -------------------------------------------------------------------------- */
.xe-offscreen .slide-img.kenburns,
.xe-offscreen .xe-ring,
.xe-offscreen .cta-btn::after,
.xe-offscreen .about-wrap > .shape img,
.xe-offscreen .about-img-wrap > .img-shape{animation-play-state:paused}


/* --------------------------------------------------------------------------
   17. QUOTE IMAGE (.req-img-2): services-card style hover, but vertical -- a
   green gradient rises from the bottom edge (clipped to the green shape's
   curve so the dark corner stays dark) -- and a short message slides up from
   the bottom (markup: .xe-req-hover).
   The curve is a border-radius, not a mask-image of the shape: with the mask,
   some GPU browsers drew a small stray copy of the portrait beside the shape.
   req-man-bg2.png (515x713) meets its right edge ~70% of the way down.
   -------------------------------------------------------------------------- */
.req-img-2{border-top-right-radius:100% 70%;overflow:hidden}
/* Phones: the box is 450px tall, so the shape is only ~325px wide
   (450 x 515/713); match the box to it so nothing shows past its edge. */
@media only screen and (max-width:767px){.req-img-2{width:325px;max-width:100%}}
/* No native image drag: pressing on the portrait and moving the mouse made
   the browser show a small "ghost" copy of the photo beside the shape.
   pointer-events:none covers every browser (hover still works, it is on
   .req-img-2); -webkit-user-drag is a belt-and-braces for Chrome/Safari. */
.req-img-2 img{-webkit-user-drag:none;user-select:none;pointer-events:none}
.req-img-2{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.req-img-2::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background-image:linear-gradient(0deg,rgba(22,163,74,.9) 0%,rgba(22,163,74,.4) 30%,rgba(22,163,74,0) 60%);background-repeat:no-repeat;background-position:center bottom;background-size:100% 0;transition:background-size .6s cubic-bezier(.65,0,.35,1)}
.req-img-2:hover::after{background-size:100% 100%}
.xe-req-hover{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:90px 36px 110px;background:linear-gradient(0deg,rgba(2,5,10,.9) 0%,rgba(2,5,10,.6) 55%,rgba(2,5,10,0) 100%);opacity:0;transform:translateY(30px);transition:opacity .4s ease,transform .5s cubic-bezier(.22,1,.36,1);pointer-events:none}
.req-img-2:hover .xe-req-hover,.req-img-2.xe-inview .xe-req-hover{opacity:1;transform:translateY(0);transition-delay:.25s}
.xe-req-hover-sub{display:block;margin-bottom:6px;font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--rr-color-theme-primary)}
.req-img-2 .xe-req-hover .xe-req-hover-title{margin-bottom:10px;font-size:26px;line-height:1.2;color:var(--rr-color-common-white)}
.req-img-2 .xe-req-hover p{margin:0;font-size:16px;line-height:1.5;color:rgba(255,255,255,.85)}
@media only screen and (max-width:767px){
  .xe-req-hover{padding:70px 22px 60px}
  .req-img-2 .xe-req-hover .xe-req-hover-title{font-size:21px}
  .req-img-2 .xe-req-hover p{font-size:14px}
}


/* --------------------------------------------------------------------------
   19. QUOTE FORM LABELS + VALIDATION (markup: .xe-req / .xe-opt in the labels,
   .xe-form-status after the button; errors are added by enhancements.js
   block 14b as .xe-error under each field).
   -------------------------------------------------------------------------- */
.request-content .request-form .form-item label .xe-req{color:#ef4444;margin-left:2px;font-weight:700}
.request-content .request-form .form-item label .xe-opt{font-weight:400;opacity:.75}
.request-content .request-form .form-item .xe-error{display:block;margin:-12px 0 16px;font-size:13px;line-height:1.4;color:#f87171}
.request-content .request-form .form-item.has-error .form-control,
.request-content .request-form .form-item.has-error .form-control.nice-select{border-color:#ef4444!important;box-shadow:0 0 0 3px rgba(239,68,68,.15)}
.request-content .request-form .form-item .form-control:focus,
.request-content .request-form .form-item .form-control.nice-select.open{border-color:var(--rr-color-theme-primary);box-shadow:0 0 0 3px rgba(22,163,74,.18);outline:0}
[data-theme=light] .request-content .request-form .form-item .xe-error{color:#dc2626}
.request-content .request-form .form-item textarea.form-control{display:block;height:auto;min-height:110px;resize:vertical}
.request-content .request-form .xe-form-status{margin:22px 0 0;padding:14px 18px;border-left:3px solid var(--rr-color-theme-primary);background:rgba(22,163,74,.1);color:#4ade80;font-size:15px}
[data-theme=light] .request-content .request-form .xe-form-status{color:#15803d}
.request-content .request-form .xe-form-status.is-error{border-left-color:#ef4444;background:rgba(239,68,68,.1);color:#f87171}
[data-theme=light] .request-content .request-form .xe-form-status.is-error{color:#dc2626}
.request-content .request-form button[type=submit]:disabled{cursor:wait;opacity:.7}


/* --------------------------------------------------------------------------
   20. HOME ABOUT SECTION TEXT (markup: .xe-about-lead / .xe-about-text
   inside .about-content on index.html).
   -------------------------------------------------------------------------- */
.about-content .section-heading p.xe-about-lead{max-width:620px;margin-bottom:16px;font-size:19px;line-height:1.6;font-weight:500;color:var(--rr-color-common-white)}
.about-content .section-heading p.xe-about-text{max-width:620px;margin-bottom:30px;font-size:16px;line-height:1.7}
[data-theme=light] .about-content .section-heading p.xe-about-lead{color:var(--rr-color-heading-primary)}
@media only screen and (max-width:575px){
  .about-content .section-heading p.xe-about-lead{font-size:17px}
}
/* two icon items (same content as about.html) between the text and the button */
.xe-about-items{display:flex;column-gap:24px;row-gap:24px;max-width:700px;margin-bottom:40px}
.xe-about-item{flex:1 1 0;min-width:0;display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:start}
.xe-about-item .icon{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--rr-color-theme-primary);background:rgba(22,163,74,.12);border:1px solid rgba(22,163,74,.35);transition:all .3s ease}
.xe-about-item:hover .icon{color:var(--rr-color-common-white);background:var(--rr-color-theme-primary);border-color:var(--rr-color-theme-primary)}
.xe-about-item .title{margin:0 0 6px;font-size:19px;line-height:1.35}
.about-content .section-heading .xe-about-item p{max-width:none;margin:0;font-size:14px;line-height:1.55}
.xe-about-item:hover .icon i{animation:wobble-vertical 1s ease-in-out 1}
@media only screen and (max-width:575px){.xe-about-items{flex-direction:column}}
/* tighter gap between the process steps and the about block on the homepage */
.about-section.xe-about-home{padding-top:60px}
@media(max-width:1199px){.about-section.xe-about-home{padding-top:50px}}

/* --------------------------------------------------------------------------
   21. HERO AI SLIDE: the AI illustration is bright green, so the plain dark
   overlay left the text and the green title bar washed out. A left-to-right
   gradient keeps the heading side dark and lets the artwork show on the right.
   -------------------------------------------------------------------------- */
.slider-item.xe-slide-ai .overlay{opacity:1;background:linear-gradient(90deg,rgba(2,5,10,.92) 0%,rgba(2,5,10,.82) 40%,rgba(2,5,10,.55) 75%,rgba(2,5,10,.45) 100%)}
@media (max-width:767px){.slider-item.xe-slide-ai .overlay{background:rgba(2,5,10,.82)}}

/* --------------------------------------------------------------------------
   22. LIGHT THEME HEADER: a frosted glass bar (80% white, same before and after scrolling) with
   dark menu text and the green logo. The hero photo behind it is very dark,
   and translucent white over dark just looks grey, so the backdrop is also
   brightened: the photo still shows through, but light enough for dark text (img.logo-light in index.html), the same as the waitlist page.
   The template keeps .header-5 a dark glass bar with white text in light
   mode, because it sits over the hero photo.
   -------------------------------------------------------------------------- */
[data-theme=light] .header-5,
[data-theme=light] .header-5.fixed{background-color:transparent;border-bottom:1px solid rgba(17,21,28,.08)}
[data-theme=light] .header-5:before{background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(14px) saturate(140%) brightness(3);backdrop-filter:blur(14px) saturate(140%) brightness(3)}
[data-theme=light] .header-5 .top-bar{border-bottom-color:var(--rr-color-border-light)}
[data-theme=light] .header-5 .top-bar .top-bar-inner .top-bar-list li:not(:last-of-type),
[data-theme=light] .header-5 .top-bar .top-bar-inner .top-bar-right .top-right-list{border-right-color:var(--rr-color-border-light)}
[data-theme=light] .header-5 .top-bar .top-bar-inner .top-bar-list li,
[data-theme=light] .header-5 .top-bar .top-bar-inner .top-bar-right .top-right-list li,
[data-theme=light] .header-5 .top-bar .top-bar-inner .top-bar-right .top-bar-social span,
[data-theme=light] .header-5 .primary-header .primary-header-inner .header-right .header-contact .content span{color:#374151}
[data-theme=light] .header-5 .top-bar a,
[data-theme=light] .header-5 .top-bar .top-bar-inner .top-bar-right .top-bar-social .social-list li,
[data-theme=light] .header-5 .primary-header-inner .header-menu-wrap ul li a,
[data-theme=light] .header-5 .primary-header .primary-header-inner .header-right .header-contact .content a{color:var(--rr-color-heading-primary)}
[data-theme=light] .header-5 .top-bar a:hover,
[data-theme=light] .header-5 .primary-header-inner .header-menu-wrap ul li a:hover,
[data-theme=light] .header-5 .primary-header-inner .header-menu-wrap ul li.active > a,
[data-theme=light] .header-5 .primary-header-inner .header-menu-wrap ul li.menu-item-has-children:hover:after,
[data-theme=light] .header-5 .primary-header .primary-header-inner .header-right .header-contact .content a:hover{color:var(--rr-color-theme-primary)}
[data-theme=light] .header-5 .primary-header-inner .header-menu-wrap ul li.menu-item-has-children:after{color:var(--rr-color-heading-primary)}
[data-theme=light] .header-5 .primary-header .primary-header-inner .header-right .header-contact .icon{background-color:var(--rr-color-theme-primary);color:var(--rr-color-common-white)}
@media (max-width:992px){
   [data-theme=light] .header-5{background-color:transparent}
   /* custom.css hides .header:before at this width; bring the glass back, more opaque */
   [data-theme=light] .header-5:before{display:block;background:rgba(255,255,255,.88)}
   [data-theme=light] .header-5 .primary-header-inner .header-right-wrap .header-right .header-right-item .mobile-side-menu-toggle{color:var(--rr-color-heading-primary)}
}

/* --------------------------------------------------------------------------
   24. HERO FITS THE SCREEN. The theme made every slide 960px tall (550/450px
   on tablet/phone) with fixed font sizes, so on laptop screens the bottom of
   the slide, the tabs and sometimes the buttons sat below the fold.
   - The slide is one screen tall. On desktop the header floats over it, so
     the content is centred in the space between the header (--hdr-h, set by
     main.js) and the tabs. At <=992px the header is a solid bar above the
     slide (custom.css), so the slide is one screen minus the header.
   - Headings, text, buttons and the circle scale with the screen's width AND
     height (min(vw, vh) inside clamp), so short laptop screens shrink the
     text instead of pushing it off screen. The max values are the theme's
     original sizes.
   - The tabs show on phones too (the theme hid them), in a compact size.
   -------------------------------------------------------------------------- */
.slider-section{--xe-tabs-bottom:clamp(18px,4.2vh,52px);--xe-tabs-h:38px;--xe-hero-gap:clamp(18px,4vh,44px)}
/* Solid backdrop: while a slide image is loading (or missing) the slide
   behind no longer shows through the half-transparent overlay. */
.xtroedge-slider .slider-item{background-color:#02050a}
.xtroedge-slider .slider-item .slide-img-wrap{height:100vh;height:100svh;min-height:500px;max-height:1100px}
.xtroedge-slider .slider-item .slider-content-wrap{top:0;bottom:0;transform:none;display:flex;align-items:center;padding-top:calc(var(--hdr-h,146px) + var(--xe-hero-gap));padding-bottom:calc(var(--xe-tabs-bottom) + var(--xe-tabs-h) + var(--xe-hero-gap))}
.xtroedge-slider .slider-item .slider-content-wrap>.container{width:100%}
.xtroedge-slider .slider-item .slider-content-wrap .hero-content-wrap{margin-bottom:0}
.xtroedge-slider .hero-content .sub-title{font-size:clamp(22px,min(3.3vw,4.9vh),50px)}
.xtroedge-slider .hero-content .title{font-size:clamp(46px,min(7.6vw,11.2vh),115px)}
.xtroedge-slider .hero-content .bottom-title{font-size:clamp(28px,min(5vw,7.2vh),75px);margin-bottom:0}
.xtroedge-slider .hero-content .xe-hero-desc{font-size:clamp(15px,min(1.3vw,2.2vh),19px);margin:clamp(10px,2.4vh,26px) 0 clamp(16px,3.4vh,34px)}
.xtroedge-slider .xe-hero-btns .rr-primary-btn,
.xtroedge-slider .xe-hero-btns .xe-btn-outline{padding:clamp(12px,2.1vh,22px) clamp(20px,2vw,30px);font-size:clamp(14px,min(1.1vw,1.9vh),16px)}
.xtroedge-slider .slider-item .slider-content-wrap .hero-content-wrap .slider-btn-wrap .slider-btn{width:clamp(120px,min(11vw,21vh),200px);height:clamp(120px,min(11vw,21vh),200px);font-size:clamp(34px,min(3.3vw,6.2vh),60px)}
.slider-section .slider-tab-wrap{bottom:var(--xe-tabs-bottom)}
@media only screen and (max-width:992px){
  /* capped so a tall tablet in portrait does not get a mostly empty hero */
  .xtroedge-slider .slider-item .slide-img-wrap{height:calc(100vh - var(--hdr-h,70px));height:calc(100svh - var(--hdr-h,70px));min-height:440px;max-height:820px}
  /* The header is above the slide here, not over it. */
  .xtroedge-slider .slider-item .slider-content-wrap{padding-top:var(--xe-hero-gap)}
}
@media only screen and (max-width:767px){
  .slider-section{--xe-tabs-h:46px}
  /* A full-screen hero on a tall phone left a big empty band between the
     buttons and the tabs; about three-quarters of the screen is enough. */
  .xtroedge-slider .slider-item .slide-img-wrap{height:clamp(480px,72vh,620px);height:clamp(480px,72svh,620px);min-height:0}
  /* right padding keeps the third tab clear of the floating chat button */
  .slider-section .slider-tab-wrap{display:block;left:0;right:0;padding:0 84px 0 12px}
  .slider-tab-wrap .swiper-slide .slider-tab-btn{display:flex;align-items:center;justify-content:center;height:var(--xe-tabs-h);padding:4px 6px;font-size:12px;line-height:1.25}
}

/* --------------------------------------------------------------------------
   25. STICKY HEADER: once scrolled, the theme slides .header-5 up 52px to
   tuck the top bar away. The top bar is now commented out in index.html,
   so that slide cut off the main header (half the logo and menu went off
   screen); keep the header fully in view. If the top bar comes back, delete
   this rule.
   -------------------------------------------------------------------------- */
.header-5.fixed{transform:none}

/* --------------------------------------------------------------------------
   26. HOME ABOUT IMAGES ON PHONES: the small image is absolutely placed over
   the big one, and on a narrow screen it covered most of it (two cut-off
   photos stacked). Phones show the big image only, full width.
   -------------------------------------------------------------------------- */
@media only screen and (max-width:767px){
  .about-wrap .about-img-wrap .about-img-2{display:none}
  .about-wrap .about-img-wrap .about-img{max-width:100%}
}
/* Phones: keep the about text short. The lead line already says what we do,
   so drop the second paragraph and the two feature descriptions (the
   feature titles stay). Desktop shows everything. */
@media only screen and (max-width:767px){
  .about-content .section-heading p.xe-about-text,
  .about-content .section-heading .xe-about-item p{display:none}
  .xe-about-items{row-gap:16px;margin-bottom:30px}
  .xe-about-item{align-items:center}
  .xe-about-item .title{margin:0;font-size:17px}
}

/* --------------------------------------------------------------------------
   27. QUOTE FORM ON PHONES: tighter labels, fields and gaps so the shorter
   form (no Company / Website) fits in less scrolling.
   -------------------------------------------------------------------------- */
@media only screen and (max-width:767px){
  .request-content .request-form .form-item label{margin-bottom:8px;font-size:15px}
  .request-content .request-form .form-item .form-control,
  .request-content .request-form .form-item .form-control.nice-select{padding:12px 16px;margin-bottom:14px}
  .request-content .request-form .form-item textarea.form-control{min-height:90px}
  .request-content .request-form .form-group{margin-bottom:0}
}