/* ==========================================================================
   custom.css -- hand-written site customisations.
   Loaded on every page right AFTER main.css (same cascade position these rules
   had when they lived at the bottom of main.css).
   main.css is now GENERATED from main.scss (npm run css / Live Sass Compiler),
   so never edit main.css by hand: put template changes in main.scss and
   custom rules here.
   ========================================================================== */
.cs-item .cs-thumb {
   aspect-ratio: 3/2;
   overflow: hidden
}

.cs-item .cs-thumb img {
   object-fit: cover;
   object-position: top
}

.project-box-4 .project-img {
   height: auto;
   aspect-ratio: 3/2
}

.testi-item {
   height: 380px;
   display: flex;
   flex-direction: column
}

.testi-item .testi-content {
   display: flex;
   flex-direction: column;
   flex-grow: 1
}

.testi-item .testi-content p {
   display: -webkit-box;
   -webkit-line-clamp: 4;
   -webkit-box-orient: vertical;
   overflow: hidden
}

.testi-carousel .swiper-pagination .swiper-pagination-bullet {
   background-color: #ffffff
}

.testi-carousel .swiper-pagination .swiper-pagination-bullet-active {
   background-color: var(--rr-color-theme-primary);
   border-color: var(--rr-color-theme-primary)
}

/* ==========================================================================
   Light-theme fix: form input text was unreadable.
   Several [data-theme=light] rules override a control's BACKGROUND to
   white/grey but never override the dark theme's text `color`, so typed
   values rendered white-on-white (homepage quote form, .req-wrap-2) or at
   ~1.9:1 contrast (contact form -- #B0B2B7 on #F2F3F4). The theme's own
   colour fix existed only for the .req-wrap-3 variant, so every other
   request form was left broken.
   Entered values use the dark heading token: it reads clearly and keeps the
   typed value more prominent than the grey placeholder (placeholders keep
   their own ::placeholder rules and are unaffected).
   ========================================================================== */
[data-theme=light] .request-content .request-form .form-item .form-control,
[data-theme=light] .blog-contact-form .request-form .form-item .form-control {
   color: var(--rr-color-heading-primary)
}

[data-theme=light] .request-content .request-form .form-item .form-control.nice-select .current,
[data-theme=light] .blog-contact-form .request-form .form-item .form-control.nice-select .current {
   color: var(--rr-color-heading-primary)
}

[data-theme=light] .request-content .request-form .form-item .form-control.nice-select .list {
   background-color: var(--rr-color-common-white)
}

[data-theme=light] .request-content .request-form .form-item .form-control.nice-select .list li {
   color: var(--rr-color-text-body-light)
}

/* ==========================================================================
   Contact page: equalise the two cards.
   Bootstrap's .row stretches the COLUMNS, but the cards inside them size to
   their own content, so the info card (.contact-content, 40px padding) ended
   noticeably higher than the form card (.blog-contact-form, 75px padding) —
   they read as misaligned. Making each card fill its column lines the two
   bottoms up, and trimming the form's oversized vertical padding closes the
   dead space under "Submit Message".
   Scoped to .contact-section (contact.html only) so blog-details,
   project-details and shop-details, which reuse .blog-contact-form, are
   unaffected.
   ========================================================================== */
/* NOTE the child combinators: this must match ONLY the section's outer row.
   A looser `.contact-section .row > [class*="col-"]` also matched the
   `.form-group.row` columns INSIDE the form, turning each field wrapper into a
   flex item that shrank to its content instead of filling the column. */
.contact-section>.container>.row>[class*="col-"] {
   display: flex
}

.contact-section>.container>.row>[class*="col-"]>.contact-content,
.contact-section>.container>.row>[class*="col-"]>.blog-contact-form {
   width: 100%;
   height: 100%
}

.contact-section .blog-contact-form {
   padding: 45px 50px
}

@media only screen and (max-width:767px) {
   .contact-section>.container>.row>[class*="col-"] {
      display: block
   }

   .contact-section .blog-contact-form {
      padding: 30px 20px
   }
}

/* ==========================================================================
   Homepage quote section: keep the new portrait (req-man-new.png) inside the
   green shape. The image is taller than the form card, so at its natural size
   it spilled above the section. Fit it to the column height, anchored bottom.
   ========================================================================== */
.req-img-2 .req-man {
   top: 0;
   left: 0;
   display: flex;
   align-items: flex-end;
   justify-content: center;
   overflow: hidden
}

.req-img-2 .req-man img {
   max-height: 80%;
   max-width: 80%;
   width: auto;
   height: auto
}

/* ==========================================================================
   Services cards (.process-item-3): hover border draw.
   One full cycle per hover: both lines start at the bottom-left corner --
   ::before along the bottom then up the right side, ::after up the left side
   then along the top -- meet at the top-right corner, pause, then retract in
   reverse back to the bottom-left. main.js adds .is-drawing on mouseenter and
   removes it on animationend, so the cycle always finishes (leaving the card
   mid-way does not cut it off) and re-hovering mid-cycle does not restart it.
   Border colour fades in/out over the first/last 3% so the 0x0 box never
   shows as a dot.
   The card is padded 20px (and pulled out by the same negative margin) so its
   box IS the border box: the lines sit 20px outside the text without moving
   the layout, and the green fill below covers exactly the bordered area.
   ========================================================================== */
/* Border draw disabled for now -- remove this comment wrapper to re-enable.
.process-item-3::before,
.process-item-3::after{content:"";position:absolute;left:0;bottom:0;width:0;height:0;box-sizing:border-box;border:2px solid transparent;pointer-events:none;z-index:2}
.process-item-3.is-drawing::before{animation:pi3-draw-br 1.8s ease-in-out forwards}
.process-item-3.is-drawing::after{animation:pi3-draw-lt 1.8s ease-in-out forwards}
*/
@keyframes pi3-draw-br {
   0% {
      width: 0;
      height: 0;
      border-bottom-color: transparent;
      border-right-color: transparent
   }

   3% {
      border-bottom-color: #16a34a;
      border-right-color: #16a34a
   }

   22% {
      width: 100%;
      height: 0
   }

   42% {
      width: 100%;
      height: 100%
   }

   58% {
      width: 100%;
      height: 100%
   }

   78% {
      width: 100%;
      height: 0
   }

   97% {
      border-bottom-color: #16a34a;
      border-right-color: #16a34a
   }

   100% {
      width: 0;
      height: 0;
      border-bottom-color: transparent;
      border-right-color: transparent
   }
}

@keyframes pi3-draw-lt {
   0% {
      width: 0;
      height: 0;
      border-left-color: transparent;
      border-top-color: transparent
   }

   3% {
      border-left-color: #16a34a;
      border-top-color: #16a34a
   }

   22% {
      width: 0;
      height: 100%
   }

   42% {
      width: 100%;
      height: 100%
   }

   58% {
      width: 100%;
      height: 100%
   }

   78% {
      width: 0;
      height: 100%
   }

   97% {
      border-left-color: #16a34a;
      border-top-color: #16a34a
   }

   100% {
      width: 0;
      height: 0;
      border-left-color: transparent;
      border-top-color: transparent
   }
}

/* Green gradient that sweeps in from the left edge on hover -- strong on the
   left, fading out to the right -- the same look as the portfolio cards
   (.cs-item) but horizontal. */
.process-item-3 {
   padding: 20px;
   margin: 20px -20px -20px;
   background-image: linear-gradient(90deg, rgba(22, 163, 74, .92) 0%, rgba(22, 163, 74, .55) 45%, rgba(22, 163, 74, 0) 85%);
   background-repeat: no-repeat;
   background-position: left center;
   background-size: 0 100%;
   transition: background-size .6s cubic-bezier(.65, 0, .35, 1)
}

.process-item-3:hover {
   background-size: 100% 100%
}

.process-item-3 .number-box {
   top: 50px;
   right: 20px
}

.process-item-3 .icon,
.process-item-3 p,
.process-item-3 .number-box span {
   transition: background-color .4s ease, color .4s ease
}

.process-item-3:hover .icon {
   background-color: #111820
}

.process-item-3:hover p {
   color: var(--rr-color-common-white)
}

.process-item-3:hover .number-box span {
   color: rgba(255, 255, 255, .25)
}

@media only screen and (max-width:767px) {
   .process-item-3 {
      margin: 20px 0 -20px
   }
}

/* ==========================================================================
   Project gallery cards (.project-box-4): on hover a sleek dark band rises from
   the bottom edge with green category, white title, and dark button with green ring.
   ========================================================================== */
.project-box-4:after {
   top: auto;
   height: 40%;
   visibility: visible;
   opacity: 1;
   background: #0e141f;
   border-top: 1px solid rgba(255, 255, 255, .08);
   transform: scaleY(0);
   transform-origin: bottom center;
   transition: transform .5s cubic-bezier(.16, 1, .3, 1)
}

.project-box-4:hover:after {
   transform: scaleY(1)
}

.project-box-2.project-box-4 .project-content,
.project-box-2.project-box-4:hover .project-content {
   left: 0;
   right: 0;
   bottom: 0;
   height: 40%;
   padding: 0 30px;
   display: grid;
   grid-template-columns: 1fr auto;
   grid-template-rows: auto auto;
   align-content: center;
   column-gap: 20px;
   transform: translateY(24px);
   transition: transform .5s cubic-bezier(.16, 1, .3, 1), opacity .4s ease, visibility .4s
}

.project-box-2.project-box-4:hover .project-content {
   transform: translateY(0);
   transition-delay: .1s
}

.project-box-2.project-box-4 .project-content span {
   grid-column: 1;
   margin-bottom: 8px;
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: #22c55e !important
}

.project-box-2.project-box-4 .project-content .title {
   grid-column: 1;
   margin-bottom: 0;
   font-size: 26px;
   font-weight: 700;
   line-height: 1.2
}

.project-box-2.project-box-4 .project-content .title a {
   color: #ffffff !important;
   transition: color .3s ease
}

.project-box-2.project-box-4 .project-content .title a:hover {
   color: #22c55e !important
}

.project-box-2.project-box-4 .project-content .project-btn-2 {
   grid-column: 2;
   grid-row: 1 / span 2;
   align-self: center
}

.project-box-2.project-box-4 .project-content .project-btn-2 a {
   height: 52px;
   width: 52px;
   font-size: 18px;
   background-color: #0b0f17 !important;
   border: 1.5px solid #22c55e !important;
   color: #ffffff !important;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .5);
   transition: all .35s cubic-bezier(.34, 1.4, .64, 1)
}

.project-box-2.project-box-4 .project-content .project-btn-2 a i {
   color: #ffffff !important;
   transition: transform .3s ease
}

.project-box-2.project-box-4 .project-content .project-btn-2 a:hover,
.project-box-2.project-box-4:hover .project-content .project-btn-2 a {
   background-color: #16a34a !important;
   border-color: #16a34a !important;
   color: #ffffff !important;
   transform: scale(1.08);
   box-shadow: 0 0 20px rgba(34, 197, 94, .45)
}

@media only screen and (max-width:767px) {

   .project-box-2.project-box-4 .project-content,
   .project-box-2.project-box-4:hover .project-content {
      padding: 0 20px
   }

   .project-box-2.project-box-4 .project-content .title {
      font-size: 20px
   }

   .project-box-2.project-box-4 .project-content .project-btn-2 a {
      height: 44px;
      width: 44px;
      font-size: 15px
   }
}

/* Light mode for homepage project gallery: GREEN band on hover */
[data-theme=light] .project-box-4:after {
   background: #16a34a;
   border-top: none
}

[data-theme=light] .project-box-2.project-box-4 .project-content span {
   color: rgba(255, 255, 255, .9) !important
}

[data-theme=light] .project-box-2.project-box-4 .project-content .title a {
   color: #ffffff !important
}

[data-theme=light] .project-box-2.project-box-4 .project-content .title a:hover {
   color: #ffffff !important;
   opacity: .9
}

[data-theme=light] .project-box-2.project-box-4 .project-content .project-btn-2 a {
   background-color: #ffffff !important;
   border-color: #ffffff !important;
   color: #16a34a !important
}

[data-theme=light] .project-box-2.project-box-4 .project-content .project-btn-2 a i {
   color: #16a34a !important
}

[data-theme=light] .project-box-2.project-box-4 .project-content .project-btn-2 a:hover,
[data-theme=light] .project-box-2.project-box-4:hover .project-content .project-btn-2 a {
   background-color: #ffffff !important;
   color: #15803d !important;
   transform: scale(1.08);
   box-shadow: 0 6px 20px -2px rgba(0, 0, 0, .25)
}

[data-theme=light] .project-box-2.project-box-4 .project-content .project-btn-2 a:hover i {
   color: #15803d !important
}

/* enhancements.css floods the button with a green ::before on hover; on the green
   light-mode band that left a green arrow on green (invisible). Keep it white here. */
[data-theme=light] .project-box-2.project-box-4 .project-content .project-btn-2 a::before {
   display: none
}

/* Homepage gallery uses the *-crop.png thumbs (dark bars trimmed off the
   top/bottom), so match their ~1200x668 shape instead of the 3:2 frame. */
.project-section-7 .project-box-4 .project-img {
   aspect-ratio: 1200/668
}

/* Keep the screenshot in full colour on hover (theme desaturates it). */
.project-box-4:hover .project-img img {
   filter: none
}


/* About page: slowly spin the dashed green circle behind the images. */
.about-img-box .shape.shape-2 {
   animation: about-circle-spin 40s linear infinite
}

@keyframes about-circle-spin {
   to {
      transform: rotate(360deg)
   }
}

/* Same slow spin for the dashed circle in the "Our Mission" section. */
.about-img-wrap-5 .shapes .shape.shape-2 img {
   animation: about-circle-spin 40s linear infinite
}

/* About page images (.about-img-box): on hover a green layer sweeps in
   diagonally from the top-left corner down to the bottom-right. The layer is
   clipped to a triangle anchored at the top-left whose long edge moves
   across the image; at 200% it covers the whole picture. Each image reacts on
   its own. img-2 has a 10px dark frame on its top/left, so its layer starts
   inside that frame. */
/* Hover fill disabled for now -- remove this comment wrapper to re-enable.
.about-img-box .img-1::after,
.about-img-box .img-2::after{content:"";position:absolute;inset:0;background:rgba(22,163,74,.76);clip-path:polygon(0 0,0 0,0 0);transition:clip-path .7s cubic-bezier(.65,0,.35,1);pointer-events:none;z-index:1}
.about-img-box .img-2::after{top:10px;left:10px}
.about-img-box .img-1:hover::after,
.about-img-box .img-2:hover::after{clip-path:polygon(0 0,200% 0,0 200%)}
*/

/* ==========================================================================
   Services page CTA, restyled (.service-cta.cta-v2): the original team photo
   stays as the background, but instead of the flat green multiply it gets a
   dark overlay (heaviest on the left, lighter on the right so the photo shows
   through), and an angled green panel from the left edge holds the copy
   (on <=992px it spans the full width with a slanted bottom edge).
   On desktop the right-hand side is filled edge to edge by an illustration
   (.cta-v2-art, object-fit: cover). The box starts where the slant meets
   the bottom; the picture is padded so it begins just right of where the
   stripe passes the plant, and its left edge fades into a backdrop that
   matches the picture's own dark teal. Hidden on <=992px.
   Scoped to .cta-v2 so other .service-cta blocks keep the old look.
   ========================================================================== */
.service-cta.cta-v2 {
   /* Panel geometry, shared by the panel, its stripe and the illustration. */
   --cta-panel-w: 60%;
   --cta-slant: 170px;
   background: #020c0b;
   overflow: hidden;
   isolation: isolate
}

.cta-v2 .overlay {
   mix-blend-mode: normal;
   background: linear-gradient(90deg, rgba(2, 12, 11, .95) 0%, rgba(2, 12, 11, .8) 45%, rgba(2, 20, 13, .45) 100%)
}

.cta-v2 .service-cta-wrap {
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   row-gap: 28px;
   padding: 90px 0;
   max-width: 620px
}

.cta-v2 .section-heading .sub-heading {
   font-size: 15px;
   letter-spacing: .04em;
   text-transform: uppercase
}

.cta-v2 .section-heading .section-title {
   text-transform: uppercase;
   font-weight: 800;
   line-height: 1.1;
   font-size: 52px;
   color: var(--rr-color-common-white)
}

.cta-v2 .service-cta-wrap .cta-btn {
   background-color: var(--rr-color-common-white);
   border-color: var(--rr-color-common-white);
   color: #0b3a20
}

.cta-v2 .service-cta-wrap .cta-btn:before {
   background-color: #04140b
}

.cta-v2 .service-cta-wrap .cta-btn:hover,
.cta-v2 .service-cta-wrap .cta-btn:focus-visible {
   color: var(--rr-color-common-white);
   border-color: #04140b
}

.cta-v2-shapes {
   position: absolute;
   inset: 0;
   z-index: 0;
   pointer-events: none
}

/* Green panel: full height on the left, right side slanted inwards. */
.cta-v2-shapes .panel {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   width: var(--cta-panel-w);
   background: linear-gradient(135deg, #1aa34c 0%, #168a3f 55%, #127535 100%);
   clip-path: polygon(0 0, 100% 0, calc(100% - var(--cta-slant)) 100%, 0 100%)
}

/* Thin bright stripe running parallel to the panel's slanted edge. */
.cta-v2-shapes .panel-edge {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   width: calc(var(--cta-panel-w) + 32px);
   background: #1fb556;
   clip-path: polygon(calc(100% - 14px) 0, 100% 0, calc(100% - var(--cta-slant)) 100%, calc(100% - var(--cta-slant) - 14px) 100%)
}

.cta-v2-art {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: calc(var(--cta-panel-w) - var(--cta-slant));
   padding-left: calc(var(--cta-slant) - 20px);
   background: radial-gradient(ellipse 70% 60% at 60% 35%, #012520 0%, #011714 70%);
   z-index: 0;
   pointer-events: none
}

.cta-v2-art img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   /* Soft left edge so the picture melts into the backdrop by the stripe. */
   -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%);
   mask-image: linear-gradient(90deg, transparent 0, #000 6%)
}

@media(max-width:1199px) {
   .cta-v2 .section-heading .section-title {
      font-size: 42px
   }
}

@media only screen and (max-width:992px) {
   .cta-v2 .service-cta-wrap {
      padding: 60px 0
   }

   .cta-v2-art {
      display: none
   }
}

@media only screen and (max-width:767px) {
   .cta-v2 .section-heading .section-title {
      font-size: 32px
   }
}

/* CTA v2 on tablet/mobile: the panel spans the full width and slants
   along the bottom instead (the right-hand slant would cut through the
   copy). Extra bottom padding keeps the button clear of the slant. */
@media only screen and (max-width:992px) {
   .service-cta.cta-v2 {
      --cta-slant: 90px
   }

   .cta-v2-shapes .panel {
      width: 100%;
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cta-slant)), 0 100%)
   }

   .cta-v2-shapes .panel-edge {
      width: 100%;
      clip-path: polygon(100% calc(100% - var(--cta-slant) + 16px), 100% calc(100% - var(--cta-slant) + 28px), 0 calc(100% + 28px), 0 calc(100% + 16px))
   }

   .cta-v2 .service-cta-wrap {
      padding-bottom: 110px
   }
}

/* ==========================================================================
   Portfolio cards (.cs-item, projects.html): new hover style, matching the
   homepage gallery. Instead of turning the whole screenshot green with a big
   centred button, a green gradient rises from the bottom edge, the image
   stays in colour with a slight zoom, and a smaller arrow button slides up
   into the bottom-right corner. transform/opacity only.
   ========================================================================== */
.cs-item .cs-thumb {
   overflow: hidden
}

.cs-item .cs-thumb img {
   transition: transform .7s cubic-bezier(.22, 1, .36, 1)
}

.cs-item .cs-thumb:before {
   visibility: visible;
   opacity: 1;
   mix-blend-mode: normal;
   background: linear-gradient(0deg, rgba(22, 163, 74, .92) 0%, rgba(22, 163, 74, .55) 35%, rgba(22, 163, 74, 0) 70%);
   transform: scaleY(0);
   transform-origin: bottom center;
   transition: transform .6s cubic-bezier(.65, 0, .35, 1);
   z-index: 1
}

.cs-item:hover .cs-thumb:before {
   transform: scaleY(1)
}

.cs-item:hover .cs-thumb img {
   transform: scale(1.05)
}

.cs-item .cs-thumb .cs-btn {
   top: auto;
   left: auto;
   right: 24px;
   bottom: 24px;
   height: 64px;
   width: 64px;
   font-size: 24px;
   transform: translateY(30px);
   opacity: 0;
   z-index: 2;
   transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .4s ease, background-color .3s, color .3s;
   transition-delay: 0s
}

.cs-item:hover .cs-thumb .cs-btn {
   transform: translateY(0);
   opacity: 1;
   transition-delay: .25s, .25s, 0s, 0s
}

@media only screen and (max-width:992px) {
   .cs-item .cs-thumb .cs-btn {
      height: 48px;
      width: 48px;
      font-size: 18px;
      right: 16px;
      bottom: 16px
   }
}

/* ==========================================================================
   Contact page info items (.contact-list .list-item): new hover style.
   Instead of the icon box flipping to green at once, a green fill rises
   from the bottom of the box while the icon turns white and plays a small
   animation of its own: the pin drops and bounces, the phone rings, the
   clock hand-spins once. Box colour is pinned so only the fill shows.
   ========================================================================== */
.contact-content .contact-list .list-item .icon {
   position: relative;
   overflow: hidden;
   isolation: isolate
}

.contact-content .contact-list .list-item .icon::before {
   content: "";
   position: absolute;
   inset: 0;
   background: var(--rr-color-theme-primary);
   transform: scaleY(0);
   transform-origin: bottom center;
   transition: transform .5s cubic-bezier(.65, 0, .35, 1);
   z-index: -1
}

.contact-content .contact-list .list-item:hover .icon::before {
   transform: scaleY(1)
}

.contact-content .contact-list .list-item:hover .icon {
   background-color: var(--rr-color-border-1)
}

[data-theme=light] .contact-content .contact-list .list-item:hover .icon {
   background-color: var(--rr-color-common-white)
}

.contact-content .contact-list .list-item .icon i {
   display: inline-block;
   transition: color .3s ease .15s
}

.contact-content .contact-list .list-item:hover .icon i {
   color: var(--rr-color-common-white)
}

.contact-content .contact-list .list-item:hover .icon i {
   animation: ci-bounce .8s ease .1s both
}

.contact-content .contact-list .list-item:hover .icon .fa-location-dot {
   animation: ci-drop .8s cubic-bezier(.3, 1.4, .5, 1) .1s both
}

.contact-content .contact-list .list-item:hover .icon .fa-phone {
   animation: ci-ring .9s ease-in-out .1s both
}

.contact-content .contact-list .list-item:hover .icon .fa-clock {
   animation: ci-spin .9s cubic-bezier(.65, 0, .35, 1) .1s both
}

@keyframes ci-bounce {

   0%,
   100% {
      transform: scale(1)
   }

   40% {
      transform: scale(1.25)
   }

   70% {
      transform: scale(.92)
   }
}

@keyframes ci-drop {
   0% {
      transform: translateY(-140%)
   }

   60% {
      transform: translateY(8%)
   }

   80% {
      transform: translateY(-6%)
   }

   100% {
      transform: translateY(0)
   }
}

@keyframes ci-ring {

   0%,
   100% {
      transform: rotate(0)
   }

   15% {
      transform: rotate(-18deg)
   }

   30% {
      transform: rotate(16deg)
   }

   45% {
      transform: rotate(-12deg)
   }

   60% {
      transform: rotate(10deg)
   }

   75% {
      transform: rotate(-5deg)
   }
}

@keyframes ci-spin {
   from {
      transform: rotate(0)
   }

   to {
      transform: rotate(360deg)
   }
}

/* ==========================================================================
   Contact page map (.map-frame):
   - opens from the centre outwards when it scrolls into view (main.js adds
     .is-visible via IntersectionObserver),
   - a green light runs round the frame continuously (conic gradient whose
     angle is animated through the registered --map-angle property),
   - the map is tinted dark to match the site and returns to full colour on
     hover,
   - a green pulse sits on the office pin (just above the map centre, where
     Google draws the pin head); it hides on hover so
     it does not float in the wrong place while the map is being dragged.
   ========================================================================== */
@property --map-angle {
   syntax: "<angle>";
   inherits: false;
   initial-value: 0deg
}

.map-frame {
   position: relative;
   padding: 3px;
   background: conic-gradient(from var(--map-angle), rgba(22, 163, 74, 0) 0deg, rgba(22, 163, 74, 0) 250deg, #16a34a 320deg, #4ade80 345deg, rgba(22, 163, 74, 0) 360deg), var(--rr-color-border-1);
   animation: map-border-spin 6s linear infinite;
   clip-path: inset(0 50% 0 50%);
   transition: clip-path 1.2s cubic-bezier(.65, 0, .35, 1), box-shadow .5s ease
}

.map-frame.is-visible {
   clip-path: inset(0 0 0 0)
}

.map-frame:hover {
   box-shadow: 0 0 40px rgba(22, 163, 74, .35)
}

.map-frame iframe {
   display: block;
   filter: grayscale(1) invert(.9) hue-rotate(180deg) contrast(.9) brightness(.95);
   transition: filter .6s ease
}

.map-frame:hover iframe {
   filter: none
}

.map-frame .map-pulse {
   position: absolute;
   left: 50%;
   top: 50%;
   width: 18px;
   height: 18px;
   margin: -31px 0 0 -9px;
   border-radius: 50%;
   background: #16a34a;
   box-shadow: 0 0 0 0 rgba(22, 163, 74, .6);
   animation: map-pulse 2s ease-out infinite;
   pointer-events: none;
   transition: opacity .3s
}

.map-frame:hover .map-pulse {
   opacity: 0
}

@keyframes map-border-spin {
   to {
      --map-angle: 360deg
   }
}

@keyframes map-pulse {
   0% {
      box-shadow: 0 0 0 0 rgba(22, 163, 74, .6)
   }

   100% {
      box-shadow: 0 0 0 36px rgba(22, 163, 74, 0)
   }
}

/* ==========================================================================
   Workflow steps (.process-item): extra hover effects on top of the theme's
   (green arc sliding behind the circle + icon wobble):
   - a smaller green disc (72% of the circle) grows from the centre, leaving
     a dark rim so the green shows as an inner accent rather than a full fill,
   - a dashed green ring (the unused .icon-border element) fades in around
     the circle and keeps turning while hovered,
   - the whole step lifts slightly (via `translate`, so it does not fight the
     inline transform GSAP leaves from the fade-in) and the title turns green.
   ========================================================================== */
.process-item {
   transition: translate .5s cubic-bezier(.22, 1, .36, 1)
}

.process-item:hover {
   translate: 0 -8px
}

.process-item .process-icon::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: 50%;
   background: radial-gradient(circle at 50% 40%, #22c55e 0%, #16a34a 60%, #15803d 100%);
   transform: scale(0);
   transition: transform .55s cubic-bezier(.34, 1.3, .64, 1);
   z-index: 0
}

.process-item:hover .process-icon::after {
   transform: scale(.72)
}

.process-item .process-icon img {
   position: relative;
   z-index: 1;
   transition: filter .3s ease .15s
}

.process-item:hover .process-icon img {
   filter: brightness(0) invert(1)
}

.process-item .process-icon .icon-border {
   position: absolute;
   inset: -12px;
   border-radius: 50%;
   border: 2px dashed rgba(22, 163, 74, .8);
   opacity: 0;
   transform: scale(.85);
   transition: opacity .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
   pointer-events: none
}

.process-item:hover .process-icon .icon-border {
   opacity: 1;
   transform: scale(1);
   animation: process-ring-spin 8s linear infinite
}

.process-item .process-content .title {
   transition: color .3s ease
}

.process-item:hover .process-content .title {
   color: var(--rr-color-theme-primary)
}

@keyframes process-ring-spin {
   from {
      transform: scale(1) rotate(0)
   }

   to {
      transform: scale(1) rotate(360deg)
   }
}

/* Service details: give the "Make Strategy / Website Design / ..." cards the
   same hover as the step cards below them (.details-box) -- a green line
   appears on the left edge. */
.service-details-content .service-details-items .service-details-item {
   transition: all .3s ease-in-out
}

.service-details-content .service-details-items .service-details-item:hover {
   border-left: 1px solid var(--rr-color-theme-primary)
}

/* ==========================================================================
   Footer social buttons (.copyright-content .social-list): on hover a green
   fill rises inside the circle, the icon slides out the top and back in from
   the bottom, and the button lifts with a soft green ring. The theme's
   instant background swap is replaced by the fill.
   ========================================================================== */
.copyright-content .social-list li a {
   position: relative;
   overflow: hidden;
   isolation: isolate;
   transition: translate .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease
}

.copyright-content .social-list li a::before {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   background: var(--rr-color-theme-primary);
   transform: scaleY(0);
   transform-origin: bottom center;
   transition: transform .4s cubic-bezier(.65, 0, .35, 1);
   z-index: -1
}

.copyright-content .social-list li a:hover {
   background-color: var(--rr-color-border-1);
   translate: 0 -4px;
   box-shadow: 0 0 0 4px rgba(22, 163, 74, .25), 0 10px 20px -8px rgba(22, 163, 74, .7)
}

.copyright-content .social-list li a:hover::before {
   transform: scaleY(1)
}

.copyright-content .social-list li a:hover i {
   animation: social-icon-slide .5s cubic-bezier(.65, 0, .35, 1)
}

@keyframes social-icon-slide {
   0% {
      transform: translateY(0)
   }

   45% {
      transform: translateY(-150%)
   }

   46% {
      transform: translateY(150%)
   }

   100% {
      transform: translateY(0)
   }
}

/* ==========================================================================
   Homepage about images (.about-wrap .about-img-wrap), polished:
   - the big image pokes out above the panel by 60px instead of 120px, and
     the small one sits 40px up from the panel's bottom edge instead of being
     cut off by it;
   - both get rounded corners and a soft shadow; the small image's hard dark
     frame becomes a rounded frame in the panel colour, so it reads as a card
     laid over the big image in both themes;
   - the (previously unstyled) .img-shape becomes a green dot-grid accent
     tucked behind the big image's top-right corner;
   - hover: the big image zooms slightly inside its frame, the small one
     lifts. Uses the individual `scale`/`translate` properties so it does not
     fight the inline transforms GSAP's .reveal animation leaves behind.
   ========================================================================== */
.about-wrap .about-img-wrap .about-img {
   transform: translateY(-60px);
   border-radius: 14px;
   overflow: hidden;
   box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .55)
}

.about-wrap .about-img-wrap .about-img img {
   display: block;
   width: 100%;
   transition: scale .8s cubic-bezier(.22, 1, .36, 1)
}

.about-wrap .about-img-wrap .about-img:hover img {
   scale: 1.06
}

.about-wrap .about-img-wrap .about-img-2 {
   bottom: 40px;
   border-radius: 14px;
   overflow: hidden;
   border: 8px solid var(--rr-color-bg-1);
   box-shadow: 0 25px 50px -20px rgba(0, 0, 0, .6);
   z-index: 2;
   transition: translate .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s ease
}

.about-wrap .about-img-wrap .about-img-2 img {
   border: 0;
   object-fit: cover;
   display: block
}

.about-wrap .about-img-wrap .about-img-2:hover {
   translate: 0 -8px;
   box-shadow: 0 35px 60px -20px rgba(22, 163, 74, .45)
}

.about-wrap .about-img-wrap>.img-shape {
   position: absolute;
   top: -100px;
   right: -28px;
   width: 170px;
   height: 170px;
   background-image: radial-gradient(rgba(22, 163, 74, .85) 2px, transparent 2.5px);
   background-size: 16px 16px;
   z-index: -1;
   pointer-events: none
}

@media only screen and (max-width:992px) {
   .about-wrap .about-img-wrap .about-img {
      transform: translateY(0)
   }

   .about-wrap .about-img-wrap>.img-shape {
      top: -24px;
      right: -12px
   }
}

[data-theme=light] .about-wrap .about-img-wrap .about-img-2 {
   border-color: var(--rr-color-common-white)
}

/* Homepage about images: square corners and no frame behind the small image. */
.about-wrap .about-img-wrap .about-img,
.about-wrap .about-img-wrap .about-img-2 {
   border-radius: 0
}

.about-wrap .about-img-wrap .about-img-2,
[data-theme=light] .about-wrap .about-img-wrap .about-img-2 {
   border: 0
}

/* ==========================================================================
   Homepage FAQ (.faq-section):
   - smooth open/close: Bootstrap animates .collapsing height, but turns it
     off under prefers-reduced-motion (on by default on Windows Server), so
     the answers snapped. Force a smooth height transition here, fade the
     answer text in, and turn the +/- button smoothly (rotate + colour).
   - the image no longer moves: the row was vertically centred, so every
     height change of the accordion re-centred the image. Align the columns
     to the top and offset the image instead.
   ========================================================================== */
.faq-section .faq-content .accordion .collapsing {
   transition: height .45s cubic-bezier(.65, 0, .35, 1) !important
}

.faq-section .faq-content .accordion .accordion-body {
   transition: opacity .4s ease .1s, translate .4s ease .1s
}

.faq-section .faq-content .accordion .collapse:not(.show) .accordion-body,
.faq-section .faq-content .accordion .collapsing .accordion-body {
   opacity: 0;
   translate: 0 -8px
}

.faq-section .faq-content .accordion .accordion-item .accordion-button:after {
   transition: transform .4s cubic-bezier(.65, 0, .35, 1), background-color .3s ease, border-color .3s ease
}

.faq-section .faq-content .accordion .accordion-item .accordion-button:not(.collapsed):after {
   transform: rotate(180deg);
   border-color: var(--rr-color-theme-primary)
}

@media(min-width:1200px) {
   .faq-section>.container>.row {
      align-items: flex-start !important
   }

   .faq-section .faq-img-1 {
      padding-top: 70px
   }
}

/* About page images (.about-img-box): same treatment as the homepage about
   images -- soft shadow, big image zooms inside its frame on hover, small
   image lifts with a green glow. Its hard dark top/left frame is dropped to
   match. Individual `scale`/`translate` so GSAP's .reveal transforms are
   not overridden. */
.about-img-box .img-1,
.about-img-box .img-2 {
   overflow: hidden;
   box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .55)
}

.about-img-box .img-1 img {
   transition: scale .8s cubic-bezier(.22, 1, .36, 1)
}

.about-img-box .img-1:hover img {
   scale: 1.06
}

.about-img-box .img-2 {
   z-index: 2;
   transition: translate .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s ease
}

.about-img-box .img-2 img {
   border: 0
}

.about-img-box .img-2:hover {
   translate: 0 -8px;
   box-shadow: 0 35px 60px -20px rgba(22, 163, 74, .45)
}

/* ==========================================================================
   About page Mission / Vision / Goal tabs (.about-tab): smooth switching.
   Bootstrap's .fade is only a 0.15s opacity blink and is switched off
   under prefers-reduced-motion (on by default on Windows Server), so the
   text just jumped. Now the old text fades out, the new one fades in while
   rising slightly, and the green on the buttons slides in from the left
   instead of snapping.
   ========================================================================== */
.about-tab .tab-content .tab-pane.fade {
   transition: opacity .3s ease, translate .3s ease !important
}

.about-tab .tab-content .tab-pane.fade:not(.show) {
   opacity: 0;
   translate: 0 14px
}

.about-tab .tab-content .tab-pane.fade.show {
   opacity: 1;
   translate: 0 0
}

.about-tab .nav-tabs .nav-link {
   position: relative;
   overflow: hidden;
   isolation: isolate;
   transition: color .3s ease, translate .3s ease
}

.about-tab .nav-tabs .nav-link::before {
   content: "";
   position: absolute;
   inset: 0;
   background: var(--rr-color-theme-primary);
   transform: scaleX(0);
   transform-origin: left center;
   transition: transform .4s cubic-bezier(.65, 0, .35, 1);
   z-index: -1
}

.about-tab .nav-tabs .nav-link.active,
[data-theme=light] .about-tab .nav-tabs .nav-link.active {
   background-color: var(--rr-color-bg-1);
   color: var(--rr-color-common-white)
}

[data-theme=light] .about-tab .nav-tabs .nav-link.active {
   background-color: var(--rr-color-grey-light)
}

.about-tab .nav-tabs .nav-link.active::before {
   transform: scaleX(1)
}

.about-tab .nav-tabs .nav-link:hover {
   translate: 0 -2px
}

.about-tab .nav-tabs .nav-link:hover:not(.active)::before {
   transform: scaleX(.08)
}

/* ==========================================================================
   Services page image cards (.service-item, not the -2 variant): smooth
   hover. The theme only toggled visibility, so the "Read Details" button
   popped in with no transition and the icon jumped. Now:
   - the photo zooms in slowly,
   - the icon box pops in (scale + slight turn) from the top-left,
   - the button slides up after it and fills white from the left on hover,
   - the title fades to white.
   ========================================================================== */
.service-item:not(.service-item-2) .service-text a {
   transition: color .4s ease
}

.service-item:not(.service-item-2) .service-thumb img {
   transition: scale .9s cubic-bezier(.22, 1, .36, 1)
}

.service-item:not(.service-item-2):hover .service-thumb img {
   scale: 1.08
}

.service-item:not(.service-item-2) .service-thumb .service-icon {
   left: 30px;
   transform: scale(.4) rotate(-20deg);
   transform-origin: top left;
   transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) .05s, opacity .35s ease .05s, visibility .35s, background-color .3s
}

.service-item:not(.service-item-2):hover .service-thumb .service-icon {
   transform: scale(1) rotate(0)
}

.service-item:not(.service-item-2) .service-thumb .service-btn {
   bottom: 30px;
   transform: translate(-50%, 30px);
   overflow: hidden;
   isolation: isolate;
   transition: transform .5s cubic-bezier(.22, 1, .36, 1) .15s, opacity .4s ease .15s, visibility .4s .15s, color .3s ease
}

.service-item:not(.service-item-2):hover .service-thumb .service-btn {
   transform: translate(-50%, 0)
}

.service-item:not(.service-item-2) .service-thumb .service-btn::before {
   content: "";
   position: absolute;
   inset: 0;
   background: var(--rr-color-common-white);
   transform: scaleX(0);
   transform-origin: left center;
   transition: transform .4s cubic-bezier(.65, 0, .35, 1);
   z-index: -1
}

.service-item:not(.service-item-2) .service-thumb .service-btn:hover {
   color: var(--rr-color-theme-primary)
}

.service-item:not(.service-item-2) .service-thumb .service-btn:hover::before {
   transform: scaleX(1)
}

.service-item:not(.service-item-2) .service-thumb .service-btn i {
   transition: transform .3s ease
}

.service-item:not(.service-item-2) .service-thumb .service-btn:hover i {
   transform: rotate(0)
}

/* Portfolio card arrow button (.cs-btn): its own hover. Instead of snapping
   to green, a green disc grows from the centre, the arrow flies out to the
   top-right and back in from the bottom-left, the button grows slightly and
   a green ring pulses outwards. */
.cs-item .cs-thumb .cs-btn,
.cs-item .cs-thumb .cs-btn:hover {
   background-color: var(--rr-color-common-white)
}

.cs-item .cs-thumb .cs-btn {
   isolation: isolate;
   overflow: visible
}

.cs-item .cs-thumb .cs-btn::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
}

.cs-item .cs-thumb .cs-btn::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: 50%;
   box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
   pointer-events: none
}

.cs-item .cs-thumb .cs-btn:hover {
   scale: 1.1;
   color: var(--rr-color-common-white)
}

.cs-item .cs-thumb .cs-btn:hover::before {
   transform: scale(1)
}

.cs-item .cs-thumb .cs-btn:hover::after {
   animation: cs-btn-ring 1.2s ease-out infinite
}

.cs-item .cs-thumb .cs-btn i {
   display: inline-block
}

.cs-item .cs-thumb .cs-btn:hover i {
   animation: cs-arrow-fly .6s cubic-bezier(.65, 0, .35, 1)
}

.cs-item .cs-thumb .cs-btn {
   transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .4s ease, scale .35s cubic-bezier(.34, 1.4, .64, 1), color .3s ease
}

@keyframes cs-btn-ring {
   0% {
      box-shadow: 0 0 0 0 rgba(255, 255, 255, .55)
   }

   100% {
      box-shadow: 0 0 0 18px rgba(255, 255, 255, 0)
   }
}

@keyframes cs-arrow-fly {
   0% {
      transform: rotate(-45deg) translateX(0);
      opacity: 1
   }

   45% {
      transform: rotate(-45deg) translateX(26px);
      opacity: 0
   }

   46% {
      transform: rotate(-45deg) translateX(-26px);
      opacity: 0
   }

   100% {
      transform: rotate(-45deg) translateX(0);
      opacity: 1
   }
}

/* Portfolio card number + title (.cs-content): new hover. The number badge
   turns green with a full spin and a pulsing ring; the title slides right
   and a green underline draws in from the left (the text itself stays
   white instead of snapping to green). */
.cs-item .cs-content span {
   transition: background-color .6s ease, color .6s ease, rotate 1.2s cubic-bezier(.45, 0, .2, 1), box-shadow .6s ease
}

.cs-item:hover .cs-content span {
   rotate: 360deg;
   box-shadow: 0 0 0 6px rgba(22, 163, 74, .2)
}

.cs-item .cs-content .title {
   transition: translate .45s cubic-bezier(.22, 1, .36, 1)
}

.cs-item:hover .cs-content .title {
   translate: 8px 0
}

.cs-item .cs-content .title a {
   background-image: linear-gradient(var(--rr-color-theme-primary), var(--rr-color-theme-primary));
   background-repeat: no-repeat;
   background-position: 0 100%;
   background-size: 0 2px;
   padding-bottom: 4px;
   transition: background-size .5s cubic-bezier(.65, 0, .35, 1), color .3s ease
}

.cs-item:hover .cs-content .title a {
   background-size: 100% 2px
}

.cs-item .cs-content .title a:hover,
.cs-item:hover .cs-content .title a {
   color: var(--rr-color-common-white)
}

[data-theme=light] .cs-item .cs-content .title a:hover,
[data-theme=light] .cs-item:hover .cs-content .title a {
   color: var(--rr-color-heading-primary)
}

/* Mobile/tablet: off-canvas side menus (.sidebar-area, .mobile-side-menu) and
   a few header boxes sit just past the right edge while closed, which made
   the page 8-30px wider than the screen -- touch scrolling then wobbled
   sideways. Clip horizontal overflow at the page level. `clip` (unlike
   `hidden`) does not create a scroll container, so sticky/ScrollSmoother
   and the menus' own slide-in keep working. */
html,
body {
   overflow-x: clip
}

/* Mobile side menu: pin the close (X) button to the menu's top-right corner. */
@media only screen and (max-width:992px) {
   .mobile-side-menu .side-menu-head .mobile-side-menu-close {
      position: absolute;
      top: 14px;
      right: 14px
   }
}

/* Side menu on the inner pages (.sidebar-area): same -- close (X) button in the
   menu's top-right corner. */
.sidebar-area .sidebar-trigger.close {
   top: 14px;
   right: 14px;
   z-index: 2
}

/* ==========================================================================
   Mobile/tablet header (<=992px). The header sits outside #smooth-wrapper and
   was position:relative with a transparent background. Whenever
   ScrollSmoother is active (mouse/trackpad on a narrow window, device
   emulators) the page scrolled underneath it, so the hero text showed
   through behind the logo. Make it a solid fixed bar and push the content
   down by its height (--hdr-h, set by main.js) so nothing hides under it.
   ========================================================================== */
@media only screen and (max-width:992px) {
   .header {
      position: fixed !important;
      top: 0 !important;
      left: 0;
      right: 0;
      background-color: var(--rr-color-bg-1)
   }

   .header:before {
      display: none
   }

   #smooth-content {
      padding-top: var(--hdr-h, 70px)
   }
}

/* While a mobile side menu is open, hide the floating chat button and the
   scroll-to-top badge -- they sit above everything and covered the menu's
   contact details on small phones. */
/* Covers both side menus: the homepage .mobile-side-menu (.is-open) and the
   inner pages' .sidebar-area (body.open-sidebar), on every screen size.
   !important because the chat widget and #scroll-top set their own
   visibility/opacity (and #scroll-top.active turns itself back on). */
body:has(.mobile-side-menu.is-open) #xtro-ai-chat-widget,
body:has(.mobile-side-menu.is-open) #scroll-top,
body:has(.mobile-side-menu.is-open) #scroll-percentage,
body.open-sidebar #xtro-ai-chat-widget,
body.open-sidebar #scroll-top,
body.open-sidebar #scroll-percentage {
   opacity: 0 !important;
   visibility: hidden !important;
   pointer-events: none !important;
   transition: opacity .3s, visibility .3s
}

/* Long address lines wrap inside the narrow menu instead of running off. */
.mobile-side-menu,
.sidebar-area {
   overflow-wrap: anywhere
}

/* ==========================================================================
   Homepage hero headings: letters fly in from the right, spread wide, and
   close up into the word -- one line after another (main.js, "Hero
   headings" block at the end). The headings stay hidden until the script
   starts them (html.hero-text-anim is only set when the script runs, so
   without JS they show normally). The green bar behind the title grows in
   once its letters have landed.
   ========================================================================== */
.hero-text-anim .xtroedge-slider .hero-content .sub-title,
.hero-text-anim .xtroedge-slider .hero-content .title,
.hero-text-anim .xtroedge-slider .hero-content .bottom-title {
   visibility: hidden
}

.xtroedge-slider .hero-content .title:before {
   transform: scaleX(0);
   transform-origin: left center;
   transition: transform .7s cubic-bezier(.65, 0, .35, 1)
}

.xtroedge-slider .hero-content .title.bar-in:before {
   transform: scaleX(1)
}

/* ==========================================================================
   Projects page cards (.pc-card, projects.html only): sharp-cornered card (like the rest of the site) with a
   thin border, full-bleed screenshot on top, then a green category label,
   the project name with an arrow, and a short description.
   - Screenshots are the *-crop.png thumbs (dark bars cut off), shown in the
     same ~1200x668 frame so every card's image has the same height.
   - Cards in a row stretch to the same height (the column is a flex box).
   - Hover: the card lifts, its border turns green, the screenshot zooms in
     slowly and the arrow slides right.
   ========================================================================== */
.cs-portfolio .row>[class*="col-"] {
   display: flex
}

.cs-portfolio .row>.pc-hidden {
   display: none
}

.pc-card {
   position: relative;
   display: flex;
   flex-direction: column;
   width: 100%;
   background: var(--rr-color-bg-1, #0b0f15);
   border: 1px solid rgba(255, 255, 255, .08);
   border-radius: 0;
   overflow: hidden;
   isolation: isolate;
   transition: transform .4s cubic-bezier(.16, 1, .3, 1), border-color .35s ease, box-shadow .4s ease
}

.pc-card:hover {
   transform: translateY(-8px);
   border-color: rgba(34, 197, 94, .55);
   box-shadow: 0 24px 50px -18px rgba(22, 163, 74, .38), 0 0 0 1px rgba(34, 197, 94, .25)
}

.pc-card .pc-thumb {
   position: relative;
   display: block;
   aspect-ratio: 1200/668;
   overflow: hidden;
   background: #05090f
}

.pc-card .pc-thumb img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: top;
   transition: transform .7s cubic-bezier(.16, 1, .3, 1), filter .5s ease
}

.pc-card:hover .pc-thumb img {
   transform: scale(1.05);
   filter: brightness(.68)
}

/* Sleek dark scrim overlay: Category & Title visible by default; Description reveals smoothly on hover */
.pc-card .pc-body {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 2;
   padding: 28px 28px 22px 28px;
   background: #0e141f;
   border-top: 1px solid rgba(255, 255, 255, .08);
   transition: background .35s ease
}

.pc-card:hover .pc-body {
   background: #0a0f18
}

.pc-card .pc-cat {
   display: block;
   margin-bottom: 8px;
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: #22c55e
}

.pc-card .pc-title {
   margin: 0;
   font-size: 26px;
   font-weight: 700;
   line-height: 1.25;
   padding-right: 70px
}

.pc-card .pc-title a {
   color: var(--rr-color-common-white, #fff);
   text-decoration: none;
   transition: color .25s ease
}

.pc-card .pc-title a:hover {
   color: #22c55e
}

/* Round arrow button on the right: dark circle with green border and white arrow */
.pc-card .pc-btn {
   position: absolute;
   right: 28px;
   top: 28px;
   z-index: 3;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 52px;
   height: 52px;
   border-radius: 50%;
   background: #0b0f17;
   border: 1.5px solid #22c55e;
   color: #ffffff;
   font-size: 18px;
   isolation: isolate;
   box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .5);
   transition: all .35s cubic-bezier(.34, 1.4, .64, 1)
}

.pc-card .pc-btn::before {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: 50%;
   background: #16a34a;
   transform: scale(0);
   transition: transform .4s cubic-bezier(.34, 1.4, .64, 1);
   z-index: -1
}

.pc-card .pc-btn::after {
   content: "";
   position: absolute;
   inset: -1px;
   border-radius: 50%;
   pointer-events: none
}

.pc-card .pc-btn i {
   display: inline-block;
   transform: rotate(-45deg);
   color: #ffffff;
   transition: transform .3s ease
}

.pc-card .pc-btn:hover,
.pc-card:hover .pc-btn {
   background-color: #16a34a;
   border-color: #16a34a;
   color: #ffffff;
   transform: scale(1.08);
   box-shadow: 0 0 20px rgba(34, 197, 94, .45)
}

.pc-card .pc-btn:hover::before,
.pc-card:hover .pc-btn::before {
   transform: scale(1)
}

.pc-card .pc-btn:hover::after {
   animation: cs-btn-ring 1.2s ease-out infinite
}

.pc-card .pc-btn:hover i {
   animation: cs-arrow-fly .6s cubic-bezier(.65, 0, .35, 1)
}

@keyframes pc-arrow-fly {
   0% {
      transform: translateX(0);
      opacity: 1
   }

   45% {
      transform: translateX(22px);
      opacity: 0
   }

   46% {
      transform: translateX(-22px);
      opacity: 0
   }

   100% {
      transform: translateX(0);
      opacity: 1
   }
}

/* Description: smooth hover reveal without text clashing */
.pc-card .pc-desc {
   margin: 0;
   font-size: 15px;
   line-height: 1.6;
   color: rgba(255, 255, 255, .82);
   max-height: 0;
   opacity: 0;
   transform: translateY(8px);
   overflow: hidden;
   transition: max-height .45s cubic-bezier(.16, 1, .3, 1), opacity .35s ease, transform .4s cubic-bezier(.16, 1, .3, 1), margin .35s ease
}

.pc-card:hover .pc-desc {
   max-height: 120px;
   opacity: 1;
   transform: translateY(0);
   margin-top: 12px
}

/* Light Theme support */
[data-theme=light] .pc-card {
   background: var(--rr-color-common-white, #fff);
   border-color: #e5e7eb
}

[data-theme=light] .pc-card:hover {
   border-color: rgba(22, 163, 74, .6);
   box-shadow: 0 24px 50px -18px rgba(22, 163, 74, .3), 0 0 0 1px rgba(34, 197, 94, .2)
}

/* Light mode: GREEN info band (matches the homepage gallery); dark mode keeps the dark band */
[data-theme=light] .pc-card .pc-body {
   background: #16a34a;
   border-top-color: rgba(255, 255, 255, .18)
}

[data-theme=light] .pc-card:hover .pc-body {
   background: #15803d
}

[data-theme=light] .pc-card .pc-cat {
   color: rgba(255, 255, 255, .9)
}

[data-theme=light] .pc-card .pc-title a {
   color: var(--rr-color-common-white, #fff)
}

[data-theme=light] .pc-card .pc-title a:hover {
   color: #ffffff;
   opacity: .9
}

[data-theme=light] .pc-card .pc-desc {
   color: rgba(255, 255, 255, .92)
}

[data-theme=light] .pc-card .pc-btn {
   background: #ffffff;
   border-color: #ffffff
}

[data-theme=light] .pc-card .pc-btn i {
   color: #16a34a
}

[data-theme=light] .pc-card .pc-btn::before {
   background: #ffffff
}

[data-theme=light] .pc-card .pc-btn:hover,
[data-theme=light] .pc-card:hover .pc-btn {
   background-color: #ffffff;
   border-color: #ffffff;
   box-shadow: 0 6px 20px -2px rgba(0, 0, 0, .25)
}

[data-theme=light] .pc-card .pc-btn:hover i,
[data-theme=light] .pc-card:hover .pc-btn i {
   color: #15803d
}

/* Touch devices and phones: there is no hover, so the description is always
   shown. The info band then grew over most of the screenshot, so here it sits
   below the image instead of on top of it, and the description is cut to two
   lines. */
@media (hover:none), (max-width:767px) {
   /* relative, not static: still in flow below the image, but it stays the
      containing block for the absolute .pc-btn, so the arrow sits beside
      the title instead of jumping up onto the screenshot. */
   .pc-card .pc-body {
      position: relative;
      bottom: auto;
      flex: 1
   }

   .pc-card .pc-desc {
      max-height: none;
      opacity: 1;
      transform: none;
      margin-top: 10px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden
   }
}

@media(max-width:1199px) {
   .pc-card .pc-title {
      font-size: 22px
   }
}

@media only screen and (max-width:767px) {
   .pc-card .pc-body {
      padding: 24px 20px 20px
   }

   .pc-card .pc-title {
      font-size: 20px;
      padding-right: 60px
   }

   .pc-card .pc-btn {
      width: 46px;
      height: 46px;
      font-size: 17px;
      right: 20px;
      top: 20px
   }

   .pc-card .pc-desc {
      font-size: 14px;
      line-height: 1.55
   }
}

/* Header menu on small desktops/tablet landscape (993-1199px): "Contact Us"
   made the row too long, so it ran into the phone box (the theme even bumps
   the menu to 16px below 1200px). Slightly smaller type and letter-spacing
   keep all five items clear of the logo and phone. */
@media (min-width:993px) and (max-width:1199px) {
   .header .primary-header-inner .header-menu-wrap ul li a {
      font-size: 14px;
      letter-spacing: 1px
   }
}

/* Theme switch: the icons swap ends like a switch -- dark mode shows the
   moon at the bottom of the pill, light mode a solid sun at the top (the
   pill is rotated 90deg, so right:10px is its bottom and right:26px its
   top). The theme had them the other way round, with a regular-weight sun
   that read as a gear. top:1px centres the sun glyph across the pill (it
   sat ~1.5px off-centre on screen). */
.switcher-button .switcher-button-inner-left:before {
   right: 10px
}

[data-theme=light] .switcher-button .switcher-button-inner-left:before {
   right: 26px;
   top: 1px;
   content: "\f185";
   font-weight: 900;
   color: #eab308
}

/* Projects page category filters (.pc-filters): pill buttons with a count;
   the active one is solid green. projects.html shows/hides the cards. */
.pc-filters {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 12px;
   margin-bottom: 50px
}

.pc-filter {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 10px 20px;
   border-radius: 100px;
   border: 1px solid rgba(255, 255, 255, .12);
   background: rgba(255, 255, 255, .03);
   color: rgba(255, 255, 255, .75);
   font-family: var(--rr-ff-heading);
   font-size: 15px;
   font-weight: 600;
   line-height: 1;
   cursor: pointer;
   transition: background-color .3s ease, border-color .3s ease, color .3s ease, translate .3s cubic-bezier(.22, 1, .36, 1)
}

.pc-filter span {
   font-size: 13px;
   font-weight: 500;
   opacity: .6
}

.pc-filter:hover {
   border-color: rgba(22, 163, 74, .6);
   color: var(--rr-color-common-white);
   translate: 0 -2px
}

.pc-filter.is-active {
   background: var(--rr-color-theme-primary);
   border-color: var(--rr-color-theme-primary);
   color: var(--rr-color-common-white)
}

.pc-filter.is-active span {
   opacity: .85
}

[data-theme=light] .pc-filter {
   background: var(--rr-color-common-white);
   border-color: #e5e7eb;
   color: #4b5563
}

[data-theme=light] .pc-filter:hover {
   border-color: rgba(22, 163, 74, .6);
   color: var(--rr-color-heading-primary)
}

[data-theme=light] .pc-filter.is-active {
   background: var(--rr-color-theme-primary);
   border-color: var(--rr-color-theme-primary);
   color: var(--rr-color-common-white)
}

@media only screen and (max-width:767px) {
   .pc-filters {
      gap: 8px;
      margin-bottom: 34px
   }

   .pc-filter {
      padding: 8px 14px;
      font-size: 14px
   }
}

/* Scrollbars in the brand green: the page scrollbar and any scrolling box
   (e.g. the quote form's topic dropdown). Track follows the theme. */
html {
   scrollbar-color: #16a34a #0b0f14
}

[data-theme=light] {
   scrollbar-color: #16a34a #eef0f3
}

.nice-select .list {
   scrollbar-width: thin;
   scrollbar-color: #16a34a transparent
}

::-webkit-scrollbar {
   width: 15px;
   height: 15px
}

::-webkit-scrollbar-track {
   background: #0b0f14
}

[data-theme=light] ::-webkit-scrollbar-track {
   background: #eef0f3
}

::-webkit-scrollbar-thumb {
   background: #16a34a;
   border-radius: 10px;
   border: 2px solid #0b0f14
}

[data-theme=light] ::-webkit-scrollbar-thumb {
   border-color: #eef0f3
}

::-webkit-scrollbar-thumb:hover {
   background: #22c55e
}

.nice-select .list::-webkit-scrollbar {
   width: 6px
}

.nice-select .list::-webkit-scrollbar-track {
   background: transparent
}

.nice-select .list::-webkit-scrollbar-thumb {
   border: 0
}

/* Footer "Contact Us" list: a green icon in a round badge before each line,
   picked by what the line is -- email link, phone link, or the plain
   address -- so every page's footer gets them without markup changes. */
.footer-widget .address-list li {
   align-items: flex-start;
   column-gap: 14px
}

.footer-widget .address-list li::before {
   flex: 0 0 34px;
   height: 34px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: rgba(22, 163, 74, .12);
   color: var(--rr-color-theme-primary);
   font-family: "Font Awesome 6 Pro";
   font-weight: 900;
   font-size: 14px;
   line-height: 1;
   margin-top: -5px;
   transition: background-color .3s ease, color .3s ease
}

.footer-widget .address-list li:has(a[href^="mailto:"])::before {
   content: "\f0e0"
}

.footer-widget .address-list li:has(a[href^="tel:"])::before {
   content: "\f095"
}

.footer-widget .address-list li:not(:has(a))::before {
   content: "\f3c5"
}

.footer-widget .address-list li:hover::before {
   background: var(--rr-color-theme-primary);
   color: var(--rr-color-common-white)
}

/* Sidebar social buttons: Font Awesome's Snapchat ghost is only an outline,
   so it looked thin next to the solid LinkedIn/TikTok glyphs. Draw a filled
   ghost instead (mask tinted with currentColor, so hover colours still apply). */
.side-menu-social .fa-snapchat::before {
   content: "";
   display: block;
   width: 1em;
   height: 1em;
   background-color: currentColor;
   -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.206.793c.99 0 4.347.276 5.93 3.821.529 1.193.403 3.219.299 4.847l-.003.06c-.012.18-.022.345-.03.51.075.045.203.09.401.09.3-.016.659-.12 1.033-.301.165-.088.344-.104.464-.104.182 0 .359.029.509.09.45.149.734.479.734.838.015.449-.39.839-1.213 1.168-.089.029-.209.075-.344.119-.45.135-1.139.36-1.333.81-.09.224-.061.524.12.868l.015.015c.06.136 1.526 3.475 4.791 4.014.255.044.435.27.42.509 0 .075-.015.149-.045.225-.24.569-1.273.988-3.146 1.271-.059.091-.12.375-.164.57-.029.179-.074.36-.134.553-.076.271-.27.405-.555.405h-.03c-.135 0-.313-.031-.538-.074-.36-.075-.765-.135-1.273-.135-.3 0-.599.015-.913.074-.6.104-1.123.464-1.723.884-.853.599-1.826 1.288-3.294 1.288-.06 0-.119-.015-.18-.015h-.149c-1.468 0-2.427-.675-3.279-1.288-.599-.42-1.107-.779-1.707-.884-.314-.045-.629-.074-.928-.074-.54 0-.958.089-1.272.149-.211.043-.391.074-.54.074-.374 0-.523-.224-.583-.42-.061-.192-.09-.389-.135-.567-.046-.181-.105-.494-.166-.57-1.918-.222-2.95-.642-3.189-1.226-.031-.063-.052-.15-.055-.225-.015-.243.165-.465.42-.509 3.264-.54 4.73-3.879 4.791-4.02l.016-.029c.18-.345.224-.645.119-.869-.195-.434-.884-.658-1.332-.809-.121-.029-.24-.074-.346-.119-1.107-.435-1.257-.93-1.197-1.273.09-.479.674-.793 1.168-.793.146 0 .27.029.383.074.42.194.789.3 1.104.3.234 0 .384-.06.465-.105l-.046-.569c-.098-1.626-.225-3.651.307-4.837C7.392 1.077 10.739.807 11.727.807l.419-.015h.06z'/%3E%3C/svg%3E") center/contain no-repeat;
   mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.206.793c.99 0 4.347.276 5.93 3.821.529 1.193.403 3.219.299 4.847l-.003.06c-.012.18-.022.345-.03.51.075.045.203.09.401.09.3-.016.659-.12 1.033-.301.165-.088.344-.104.464-.104.182 0 .359.029.509.09.45.149.734.479.734.838.015.449-.39.839-1.213 1.168-.089.029-.209.075-.344.119-.45.135-1.139.36-1.333.81-.09.224-.061.524.12.868l.015.015c.06.136 1.526 3.475 4.791 4.014.255.044.435.27.42.509 0 .075-.015.149-.045.225-.24.569-1.273.988-3.146 1.271-.059.091-.12.375-.164.57-.029.179-.074.36-.134.553-.076.271-.27.405-.555.405h-.03c-.135 0-.313-.031-.538-.074-.36-.075-.765-.135-1.273-.135-.3 0-.599.015-.913.074-.6.104-1.123.464-1.723.884-.853.599-1.826 1.288-3.294 1.288-.06 0-.119-.015-.18-.015h-.149c-1.468 0-2.427-.675-3.279-1.288-.599-.42-1.107-.779-1.707-.884-.314-.045-.629-.074-.928-.074-.54 0-.958.089-1.272.149-.211.043-.391.074-.54.074-.374 0-.523-.224-.583-.42-.061-.192-.09-.389-.135-.567-.046-.181-.105-.494-.166-.57-1.918-.222-2.95-.642-3.189-1.226-.031-.063-.052-.15-.055-.225-.015-.243.165-.465.42-.509 3.264-.54 4.73-3.879 4.791-4.02l.016-.029c.18-.345.224-.645.119-.869-.195-.434-.884-.658-1.332-.809-.121-.029-.24-.074-.346-.119-1.107-.435-1.257-.93-1.197-1.273.09-.479.674-.793 1.168-.793.146 0 .27.029.383.074.42.194.789.3 1.104.3.234 0 .384-.06.465-.105l-.046-.569c-.098-1.626-.225-3.651.307-4.837C7.392 1.077 10.739.807 11.727.807l.419-.015h.06z'/%3E%3C/svg%3E") center/contain no-repeat
}

/* Header theme toggle (#theme-toogle.header-theme-toggle, first item in
   .header-right on every page): a small pill with moon + sun; the icon for
   the current theme sits on a green chip. Neutral greys so it reads on both
   the dark header and any white one. Replaces the old floating side switcher. */
.header-theme-toggle {
   display: inline-flex;
   align-items: center;
   gap: 2px;
   flex-shrink: 0;
   padding: 3px;
   margin-right: 24px;
   border-radius: 100px;
   border: 1px solid rgba(148, 163, 184, .35);
   background: rgba(148, 163, 184, .1);
   cursor: pointer;
   transition: border-color .3s ease
}

/* thin vertical divider between the toggle and the next header item (phone / menu button), centred in the 24px gap */
.header-theme-toggle {
   position: relative
}

.header-theme-toggle::after {
   content: "";
   position: absolute;
   top: 50%;
   right: -13px;
   width: 1px;
   height: 38px;
   background: rgba(148, 163, 184, .35);
   transform: translateY(-50%);
   pointer-events: none
}

.header-theme-toggle:hover {
   border-color: var(--rr-color-theme-primary)
}

.header-theme-toggle:focus-visible {
   outline: 2px solid var(--rr-color-theme-primary);
   outline-offset: 2px
}

.header-theme-toggle .htt-icon {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   font-size: 13px;
   color: #94a3b8;
   transition: background-color .3s ease, color .3s ease
}

.header-theme-toggle .htt-moon,
[data-theme=light] .header-theme-toggle .htt-sun {
   background: var(--rr-color-theme-primary);
   color: var(--rr-color-common-white)
}

[data-theme=light] .header-theme-toggle .htt-moon {
   background: transparent;
   color: #94a3b8
}

@media only screen and (max-width:767px) {
   .header-theme-toggle {
      margin-right: 14px
   }

   .header-theme-toggle::after {
      right: -8px;
      height: 30px
   }

   .header-theme-toggle .htt-icon {
      width: 24px;
      height: 24px;
      font-size: 11px
   }
}

/* Back to top: a small arrow button (replaces the scroll-percentage ring).
   Stacked centred above the AI chat launcher -- offsets are derived from
   --xac-toggle-* in ai-chat-widget.css, keep them in sync. */
.scroll-top {
   position: fixed;
   right: 61px;
   bottom: 114px;
   z-index: 100;
   width: 40px;
   height: 40px;
   display: grid;
   place-items: center;
   padding: 0;
   border-radius: 50%;
   border: 1px solid rgba(22, 163, 74, .25);
   background: var(--rr-color-common-white);
   color: var(--rr-color-theme-primary);
   font-size: 14px;
   box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .35);
   cursor: pointer;
   opacity: 0;
   visibility: hidden;
   transform: translateY(12px) scale(.8);
   transition: opacity .3s ease, visibility .3s ease, transform .3s ease, background-color .3s ease, color .3s ease
}

.scroll-top.active {
   opacity: 1;
   visibility: visible;
   transform: none
}

.scroll-top:hover {
   background: var(--rr-color-theme-primary);
   color: var(--rr-color-common-white);
   transform: translateY(-3px)
}

@media only screen and (max-width:992px) {
   .scroll-top {
      right: 38px;
      bottom: 98px
   }
}

@media only screen and (max-width:767px) {
   .scroll-top {
      right: 26px;
      bottom: 84px
   }
}

/* Home page course banner (.xe-course, index.html, right below the services
   section): copy + feature icons + CTA on the left, laptop photo on the right
   fading into the card's navy background (#061420, sampled from the photo so
   the seam disappears). Stays dark in both themes (it is a promo banner).
   Below 992px the photo moves under the copy. */
/* margin-top:-1px overlaps the services section above so no hairline of the page background can flash through the seam while the smooth-scroller moves the page by fractional pixels */
.xe-course-section {
   position: relative;
   margin-top: -1px;
   padding: 71px 0 70px;
   background-color: var(--rr-color-bg-1)
}

/* rounded card with a light green border and a soft green shadow */
.xe-course {
   position: relative;
   display: flex;
   align-items: center;
   min-height: 480px;
   border-radius: 24px;
   overflow: hidden;
   isolation: isolate;
   background: #061420;
   border: 1px solid rgba(34, 197, 94, .45);
   box-shadow: 0 0 18px rgba(34, 197, 94, .14), 0 20px 44px -24px rgba(34, 197, 94, .3)
}

/* the photo keeps its own aspect ratio at the card's right edge (capped so it never runs under the copy); its left edge fades into the card colour */
.xe-course-visual {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   aspect-ratio: 1037/745;
   max-width: 60%;
   z-index: 0
}

.xe-course-visual img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: right center;
   -webkit-user-drag: none;
   user-select: none;
   -webkit-user-select: none;
   -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%);
   mask-image: linear-gradient(90deg, transparent 0, #000 26%)
}

.xe-course-content {
   position: relative;
   z-index: 1;
   width: 56%;
   padding: 56px 0 60px 56px
}

.xe-course-badge {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 8px 20px;
   margin-bottom: 22px;
   border-radius: 100px;
   border: 1px solid rgba(34, 197, 94, .55);
   background: rgba(22, 163, 74, .12);
   color: #4ade80;
   font-size: 15px;
   font-weight: 600
}

.xe-course-badge i {
   color: #fff
}

.xe-course-title {
   margin: 0 0 20px;
   color: #fff;
   font-size: 46px;
   font-weight: 800;
   line-height: 1.08;
   letter-spacing: -.01em
}

.xe-course-title span {
   color: var(--rr-color-theme-primary)
}

.xe-course-text {
   max-width: 520px;
   margin: 0 0 30px;
   color: rgba(255, 255, 255, .85);
   font-size: 18px;
   line-height: 1.6
}

.xe-course-features {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   max-width: 560px;
   margin: 0 0 34px;
   padding: 0;
   list-style: none
}

.xe-course-features li {
   display: flex;
   flex-direction: column;
   gap: 12px;
   padding: 0 16px;
   color: #fff;
   font-size: 15px;
   font-weight: 500;
   line-height: 1.35
}

.xe-course-features li:first-child {
   padding-left: 0
}

.xe-course-features li:not(:first-child) {
   border-left: 1px solid rgba(255, 255, 255, .15)
}

.xe-course-features .icon {
   display: grid;
   place-items: center;
   width: 52px;
   height: 52px;
   border-radius: 50%;
   border: 2px solid #22c55e;
   color: #22c55e;
   font-size: 19px;
   transition: background-color .3s ease, color .3s ease
}

.xe-course-features li:hover .icon {
   background: #22c55e;
   color: #fff
}

.xe-course-btn {
   display: inline-flex;
   align-items: center;
   gap: 14px;
   padding: 18px 34px;
   border-radius: 10px;
   background: #22c55e;
   color: #fff;
   font-size: 18px;
   font-weight: 700;
   line-height: 1;
   text-decoration: none;
   transition: background-color .3s ease, transform .3s ease, box-shadow .3s ease
}

.xe-course-btn i {
   transform: rotate(-45deg);
   transition: transform .3s ease-in-out
}

/* hover = the site's .rr-primary-btn ("Discover More"): white overlay sweeps in from the left, arrow turns from diagonal to straight */
.xe-course-btn::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   background: rgba(255, 255, 255, .2);
   transform-origin: right center;
   transform: scale(0, 1);
   transition: transform .4s cubic-bezier(.4, 0, .2, 1);
   pointer-events: none
}

.xe-course-btn:hover {
   color: #fff
}

.xe-course-btn:hover::after {
   transform-origin: left center;
   transform: scale(1, 1)
}

.xe-course-btn:hover i {
   transform: rotate(0)
}

/* the site's light theme darkens headings and paragraphs; keep the banner's white copy */
[data-theme=light] .xe-course .xe-course-title,
[data-theme=light] .xe-course .xe-course-text {
   color: #fff
}

[data-theme=light] .xe-course .xe-course-title span {
   color: var(--rr-color-theme-primary)
}

@media only screen and (max-width:1399px) {
   .xe-course-title {
      font-size: 40px
   }
}

@media only screen and (max-width:1199px) {
   .xe-course {
      min-height: 440px
   }

   .xe-course-content {
      width: 58%;
      padding: 44px 0 48px 40px
   }

   .xe-course-title {
      font-size: 34px
   }

   .xe-course-text {
      font-size: 16px
   }
}

@media only screen and (max-width:991px) {
   .xe-course {
      flex-direction: column;
      align-items: stretch
   }

   .xe-course-content {
      width: 100%;
      padding: 40px 32px 10px
   }

   .xe-course-visual {
      position: relative;
      width: 100%;
      max-width: none;
      aspect-ratio: auto
   }

   .xe-course-visual img {
      height: auto;
      -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%);
      mask-image: linear-gradient(180deg, transparent 0, #000 18%)
   }
}

@media only screen and (max-width:767px) {
   .xe-course-section {
      padding: 50px 0
   }

   .xe-course {
      border-radius: 20px
   }

   .xe-course-content {
      padding: 32px 22px 6px
   }

   .xe-course-title {
      font-size: 28px
   }

   .xe-course-features li {
      padding: 0 10px;
      font-size: 14px
   }

   .xe-course-features .icon {
      width: 46px;
      height: 46px;
      font-size: 17px
   }

   .xe-course-btn {
      width: 100%;
      justify-content: center;
      padding: 16px 24px;
      font-size: 16px
   }
}

/* Course banner animations.
   - "AI" in the title: green shimmer sweeping through the letters + soft glow.
   - Features and CTA: rise in one after another when the banner first scrolls
     into view (enhancements.js adds .xe-anim, then .xe-inview), after which
     each feature icon gets a staggered pulse ring and the button a periodic
     shine. All loops pause off screen (.xe-offscreen) and everything is off
     for prefers-reduced-motion. */
.xe-course-title .xe-ai {
   /* site primary green, with a lighter shine sweeping across */
   background: linear-gradient(100deg, #16a34a 0%, #16a34a 30%, #86efac 50%, #16a34a 70%, #16a34a 100%);
   background-size: 250% 100%;
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   animation: xe-ai-shimmer 3.2s linear infinite, xe-ai-glow 2.4s ease-in-out infinite
}

@keyframes xe-ai-shimmer {
   from {
      background-position: 100% 0
   }

   to {
      background-position: -150% 0
   }
}

@keyframes xe-ai-glow {

   0%,
   100% {
      filter: drop-shadow(0 0 0 rgba(74, 222, 128, 0))
   }

   50% {
      filter: drop-shadow(0 0 14px rgba(74, 222, 128, .55))
   }
}

.xe-course-features .icon {
   position: relative
}

.xe-course-features .icon::after {
   content: "";
   position: absolute;
   inset: -2px;
   border-radius: 50%;
   border: 2px solid #22c55e;
   opacity: 0;
   pointer-events: none
}

.xe-course-btn {
   position: relative;
   overflow: hidden;
   isolation: isolate
}

.xe-course-btn::before {
   content: "";
   position: absolute;
   top: 0;
   bottom: 0;
   left: -60%;
   width: 40%;
   z-index: -1;
   background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
   transform: skewX(-20deg);
   pointer-events: none
}

.xe-course.xe-anim .xe-course-features li,
.xe-course.xe-anim .xe-course-btn {
   opacity: 0;
   translate: 0 28px
}

.xe-course.xe-inview .xe-course-features li,
.xe-course.xe-inview .xe-course-btn {
   animation: xe-rise .7s cubic-bezier(.22, 1, .36, 1) forwards
}

.xe-course.xe-inview .xe-course-features li:nth-child(1) {
   animation-delay: .15s
}

.xe-course.xe-inview .xe-course-features li:nth-child(2) {
   animation-delay: .3s
}

.xe-course.xe-inview .xe-course-features li:nth-child(3) {
   animation-delay: .45s
}

.xe-course.xe-inview .xe-course-btn {
   animation: xe-rise .7s cubic-bezier(.22, 1, .36, 1) .65s forwards, xe-btn-glow 2.2s ease-out 1.5s infinite
}

@keyframes xe-btn-glow {
   0% {
      box-shadow: 0 0 0 0 rgba(34, 197, 94, .65), 0 12px 28px -12px rgba(34, 197, 94, .8)
   }

   70%,
   100% {
      box-shadow: 0 0 0 14px rgba(34, 197, 94, 0), 0 12px 28px -12px rgba(34, 197, 94, .8)
   }
}

@keyframes xe-rise {
   to {
      opacity: 1;
      translate: 0 0
   }
}

.xe-course.xe-inview .xe-course-features .icon::after {
   animation: xe-icon-ring 2.4s ease-out infinite
}

.xe-course.xe-inview .xe-course-features li:nth-child(1) .icon::after {
   animation-delay: 1s
}

.xe-course.xe-inview .xe-course-features li:nth-child(2) .icon::after {
   animation-delay: 1.4s
}

.xe-course.xe-inview .xe-course-features li:nth-child(3) .icon::after {
   animation-delay: 1.8s
}

@keyframes xe-icon-ring {
   0% {
      opacity: .95;
      transform: scale(1)
   }

   80%,
   100% {
      opacity: 0;
      transform: scale(1.7)
   }
}

.xe-course-features .icon {
   transition: background-color .3s ease, color .3s ease, box-shadow .3s ease
}

.xe-course-features .icon i {
   display: inline-block;
   transition: transform .5s cubic-bezier(.34, 1.56, .64, 1)
}

.xe-course.xe-inview .xe-course-features .icon {
   animation: xe-icon-float 3s ease-in-out infinite
}

.xe-course.xe-inview .xe-course-features li:nth-child(1) .icon {
   animation-delay: 1s
}

.xe-course.xe-inview .xe-course-features li:nth-child(2) .icon {
   animation-delay: 1.3s
}

.xe-course.xe-inview .xe-course-features li:nth-child(3) .icon {
   animation-delay: 1.6s
}

@keyframes xe-icon-float {

   0%,
   100% {
      transform: translateY(0)
   }

   50% {
      transform: translateY(-7px)
   }
}

.xe-course.xe-inview .xe-course-features li:nth-child(1) .icon i {
   animation: xe-glyph-pulse 1.8s ease-in-out 1s infinite
}

.xe-course.xe-inview .xe-course-features li:nth-child(2) .icon i {
   animation: xe-glyph-wiggle 2.4s ease-in-out 1.3s infinite
}

.xe-course.xe-inview .xe-course-features li:nth-child(3) .icon i {
   animation: xe-glyph-tilt 2.2s ease-in-out 1.6s infinite
}

@keyframes xe-glyph-pulse {

   0%,
   100% {
      transform: scale(1)
   }

   50% {
      transform: scale(1.22)
   }
}

@keyframes xe-glyph-wiggle {

   0%,
   60%,
   100% {
      transform: rotate(0)
   }

   70% {
      transform: rotate(-14deg)
   }

   80% {
      transform: rotate(12deg)
   }

   90% {
      transform: rotate(-6deg)
   }
}

@keyframes xe-glyph-tilt {

   0%,
   100% {
      transform: rotate(0)
   }

   25% {
      transform: rotate(-12deg)
   }

   75% {
      transform: rotate(12deg)
   }
}

.xe-course .xe-course-features li:hover .icon {
   background: #22c55e;
   color: #fff;
   box-shadow: 0 0 22px rgba(34, 197, 94, .6)
}

.xe-course .xe-course-features li:hover .icon i {
   animation: xe-glyph-spin .6s cubic-bezier(.34, 1.56, .64, 1)
}

@keyframes xe-glyph-spin {
   from {
      transform: rotate(0) scale(.8)
   }

   to {
      transform: rotate(360deg) scale(1)
   }
}

.xe-course.xe-inview .xe-course-btn::before {
   animation: xe-btn-shine 3.5s ease-in-out 1.4s infinite
}

@keyframes xe-btn-shine {
   0% {
      left: -60%
   }

   30%,
   100% {
      left: 130%
   }
}

.xe-offscreen .xe-course-title .xe-ai,
.xe-offscreen .xe-course-features .icon,
.xe-offscreen .xe-course-features .icon i,
.xe-offscreen .xe-course-features .icon::after,
.xe-offscreen .xe-course-btn,
.xe-offscreen .xe-course-btn i,
.xe-offscreen .xe-course-btn::before {
   animation-play-state: paused
}

@media (prefers-reduced-motion:reduce) {

   .xe-course-title .xe-ai,
   .xe-course-features .icon,
   .xe-course-features .icon i,
   .xe-course-features .icon::after,
   .xe-course-btn i,
   .xe-course-btn::before {
      animation: none !important
   }

   .xe-course-title .xe-ai {
      background: none;
      -webkit-text-fill-color: #4ade80
   }
}

/* Home "Our Process" (.xe-process-overlay): the big "AGENCY" outline image
   sits absolutely BEHIND the four process cards instead of taking its own
   band below them -- negative z-index inside the section's stacking context
   (.process-section is position:relative;z-index:1), so the icons and text
   paint on top. Centred on the cards row. */
/* centred with left/right:0 + auto margins, NOT translate: GSAP (the scroll drift in enhancements.js) resets the CSS translate property on elements it animates */
.xe-process-overlay .process-text {
   position: absolute;
   left: -100px;
   right: 100px;
   bottom: 145px;
   z-index: -1;
   width: 100%;
   max-width: 1400px;
   margin: 0 auto;
   padding: 0 15px;
   pointer-events: none
}

.xe-process-overlay .process-text img {
   width: 100%;
   height: auto
}

@media only screen and (max-width:992px) {
   .xe-process-overlay .process-text {
      top: 0;
      bottom: 0;
      height: fit-content;
      margin: auto
   }
}

/* Site-wide: images can't be click-dragged (no ghost copy following the
   mouse). Firefox is handled by the dragstart listener in main.js. */
img {
   -webkit-user-drag: none;
   user-drag: none
}

/* ==========================================================================
   FB Content Monetization page: new-batch announcement (content + sidebar).
   Uses theme tokens only, so it follows the light/dark toggle.
   ========================================================================== */
.batch-announcement {
   border: 1px solid var(--rr-color-theme-primary);
   border-left-width: 4px;
   background-color: var(--rr-color-bg-1);
   padding: 35px 40px;
   margin-bottom: 50px
}

.batch-announcement .batch-badge {
   display: inline-block;
   background-color: var(--rr-color-theme-primary);
   color: #fff;
   font-size: 14px;
   font-weight: 600;
   padding: 5px 14px;
   margin-bottom: 18px
}

.batch-announcement .batch-title {
   font-size: 28px;
   margin-bottom: 12px
}

.batch-announcement .batch-date {
   font-size: 17px;
   margin-bottom: 15px
}

.batch-announcement .batch-date i {
   color: var(--rr-color-theme-primary);
   margin-right: 6px
}

.batch-announcement .batch-subtitle {
   font-size: 18px;
   line-height: 1.6;
   margin-bottom: 20px
}

.batch-announcement .batch-list {
   list-style: none;
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 10px 20px;
   margin-bottom: 28px;
   padding: 0
}

.batch-announcement .batch-list li {
   color: var(--rr-color-common-white);
   font-weight: 500
}

.batch-announcement .batch-list li i {
   color: var(--rr-color-theme-primary);
   margin-right: 8px
}

.batch-announcement .batch-cta {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 15px 25px
}

.batch-announcement .batch-note {
   font-weight: 600;
   color: var(--rr-color-theme-primary)
}

.batch-announcement .batch-tagline {
   margin: 22px 0 0;
   font-weight: 600;
   letter-spacing: .5px
}

.batch-widget .batch-widget-date {
   font-size: 22px;
   font-weight: 700;
   color: var(--rr-color-theme-primary);
   margin-bottom: 12px;
   line-height: 1.3
}

.batch-widget .batch-widget-date span {
   display: block;
   font-size: 15px;
   font-weight: 500;
   color: var(--rr-color-text-body)
}

[data-theme=light] .batch-announcement {
   background-color: var(--rr-color-grey-light)
}

[data-theme=light] .batch-announcement .batch-list li {
   color: var(--rr-color-heading-primary)
}

.batch-widget p {
   margin-bottom: 22px
}

@media only screen and (max-width:767px) {
   .batch-announcement {
      padding: 25px 20px
   }

   .batch-announcement .batch-title {
      font-size: 22px
   }

   .batch-announcement .batch-list {
      grid-template-columns: 1fr
   }
}

/* Service pages promo box: WhatsApp (primary) + "Get a Free Quote" (outline) buttons. */
.batch-announcement .batch-btn-whatsapp {
   text-transform: none
}

.batch-announcement .batch-btn-whatsapp .wa-icon {
   flex-shrink: 0;
   margin-right: 10px
}

.batch-announcement .batch-btn-outline {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-family: var(--rr-ff-heading);
   font-size: 16px;
   font-weight: 600;
   line-height: 1;
   padding: 23px 30px;
   border: 1px solid var(--rr-color-theme-primary);
   color: var(--rr-color-theme-primary);
   transition: all .3s ease-in-out
}

.batch-announcement .batch-btn-outline:hover {
   background-color: var(--rr-color-theme-primary);
   color: var(--rr-color-common-white)
}

.batch-widget .rr-primary-btn {
   text-transform: none
}

/* ==========================================================================
   Service detail pages: Font Awesome icons in the skill cards, and the
   "Related Projects" row (reuses .pc-card from the projects page).
   ========================================================================== */
.service-details-item .icon i {
   display: block;
   font-size: 46px;
   line-height: 1;
   color: var(--rr-color-theme-primary)
}

.sd-projects {
   row-gap: 24px
}

.sd-projects>[class*="col-"] {
   display: flex
}

.sd-projects .pc-card .pc-body {
   padding: 22px 22px 18px
}

.sd-projects .pc-card .pc-cat {
   font-size: 12px;
   letter-spacing: .1em
}

.sd-projects .pc-card .pc-title {
   font-size: 20px;
   padding-right: 60px
}

.sd-projects .pc-card .pc-btn {
   width: 44px;
   height: 44px;
   font-size: 16px;
   right: 22px;
   top: 22px
}

.sd-projects .pc-card .pc-desc {
   font-size: 14px;
   line-height: 1.55
}

/* Training page (service-details-fb-monetization.html): course facts sidebar,
   benefit icons in place of step numbers, and icon spacing in buttons. */
.course-glance-list {
   list-style: none;
   margin: 0;
   padding: 0
}

.course-glance-list li {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 13px 0;
   border-bottom: 1px solid rgba(128, 128, 128, .2)
}

.course-glance-list li:last-child {
   border-bottom: 0;
   padding-bottom: 0
}

.course-glance-list li i {
   width: 22px;
   font-size: 20px;
   text-align: center;
   color: var(--rr-color-theme-primary)
}

.course-glance-list li span {
   flex: 1;
   opacity: .75
}

.course-glance-list li strong {
   font-weight: 600;
   text-align: right
}

.details-box .number i {
   font-size: 20px;
   line-height: 1
}

.batch-btn-whatsapp>i,
.batch-widget .rr-primary-btn>i {
   margin-right: 10px;
   font-size: 18px
}

.batch-widget .rr-primary-btn .wa-icon {
   margin-right: 10px;
   vertical-align: -4px
}

.details-box .number .wa-icon {
   width: 22px;
   height: 22px
}

.batch-badge i {
   margin-right: 6px
}

/* Header: 6 menu items (Training added) need tighter spacing on laptop widths */
@media (min-width:992px) and (max-width:1599px) {
   .header .primary-header-inner .header-menu-wrap ul li {
      margin: 0 12px
   }

   .header .primary-header-inner .header-menu-wrap ul li a {
      letter-spacing: 1.2px
   }
}

@media (min-width:992px) and (max-width:1199px) {
   .header .header-contact .content {
      display: none
   }
}

.enroll-note {
   margin-top: 30px;
   padding: 14px 18px;
   border-left: 3px solid var(--rr-color-theme-primary);
   background: rgba(22, 163, 74, .06)
}

.enroll-note a {
   color: var(--rr-color-theme-primary);
   font-weight: 600;
   white-space: nowrap;
   transition: color .2s ease
}

.enroll-note a:hover {
   color: #22c55e;
   text-decoration: underline
}
/* Service detail pages: shorter header (desktop ~490px instead of ~600px) with the
   shared 3D service-header-bg.png; the image is already dark, so a lighter overlay */
.page-header--service .overlay{background-color:rgba(2,5,10,.45)}
@media (min-width:993px){
  .page-header--service .page-header-content{padding:250px 0 120px}
}

/* About page counters: keep "100+" on one line (digits were wrapping in col-lg-3) */
.counter-item .title,.counter-item .title .odometer{white-space:nowrap;flex-shrink:0}
@media (min-width:1400px){.counter-item .title{font-size:84px}}
@media (min-width:1200px) and (max-width:1399px){.counter-item .title{font-size:70px}}
@media (min-width:992px) and (max-width:1199px){.counter-item .title{font-size:56px}.counter-item p{font-size:14px}}

/* About page intro: extra paragraph + short line under each about-item */
.about-content-2 .section-heading p{margin:24px 0 0}
.about-content-2 .section-heading p.xe-about-more{margin:16px 0 35px}
.about-content-2 .about-items{align-items:flex-start}
.about-content-2 .about-items{flex-wrap:nowrap;column-gap:30px;max-width:100%}
.about-content-2 .about-items .about-item{align-items:start;flex:1 1 0;min-width:0}
.about-content-2 .about-items .about-item .xe-about-item-text{margin:8px 0 0;font-size:15px;line-height:1.55}
@media (max-width:767px){.about-content-2 .about-items{flex-wrap:wrap}.about-content-2 .about-items .about-item{flex:1 1 100%}}
/* About page icons: same green-circle Font Awesome icons as the homepage about block */
.about-content-2 .about-items .about-item{grid-template-columns:60px 1fr}
.about-content-2 .about-items .about-item .icon{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--rr-color-theme-primary);background:rgba(22,163,74,.12);border:1px solid rgba(22,163,74,.35);transition:all .3s ease}
.about-content-2 .about-items .about-item:hover .icon{color:var(--rr-color-common-white);background:var(--rr-color-theme-primary);border-color:var(--rr-color-theme-primary)}
.about-content-2 .about-items .about-item:hover .icon i{animation:wobble-vertical 1s ease-in-out 1}

/* About page work-process cards: hover lift, green sweep line, glow, badge fill, arrow nudge.
   Uses the standalone `translate` property so it doesn't fight GSAP's inline transform (.fade-top). */
.process-box{position:relative;overflow:hidden;z-index:1;border:1px solid transparent;transition:translate .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease,border-color .4s ease}
.process-box::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--rr-color-theme-primary);transition:width .5s cubic-bezier(.22,1,.36,1)}
.process-box::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 80% at 0% 0%,rgba(22,163,74,.16) 0%,rgba(22,163,74,0) 60%);opacity:0;transition:opacity .4s ease}
.process-box .number,.process-box .title{transition:all .35s ease}
.process-box .read-more i{transition:transform .35s ease}
.process-box:hover{translate:0 -8px;border-color:rgba(22,163,74,.45);box-shadow:0 22px 45px -20px rgba(22,163,74,.45)}
.process-box:hover::before{width:100%}
.process-box:hover::after{opacity:1}
.process-box:hover .number{background:var(--rr-color-theme-primary);color:var(--rr-color-common-white)}
.process-box:hover .title{color:var(--rr-color-theme-primary)}
.process-box:hover .read-more i{transform:translateX(5px)}
@media (prefers-reduced-motion:reduce){.process-box,.process-box::before,.process-box .read-more i{transition:none}.process-box:hover{translate:none}}

/* Service detail badge: inline SVG rocket instead of the emoji */
.batch-announcement .batch-badge{display:inline-flex;align-items:center;gap:8px}
.batch-badge .batch-badge-icon{flex:0 0 auto;width:16px;height:16px;transition:transform .35s ease}
.batch-announcement:hover .batch-badge-icon{transform:translate(2px,-2px)}
.batch-announcement .batch-badge i{margin-right:0}

/* --------------------------------------------------------------------------
   Contact page form (#xe-contact-form): labels, real <select>s (nice-select),
   validation errors, loading button, reply note and thank-you message.
   Behaviour lives in assets/js/contact-form.js.
   -------------------------------------------------------------------------- */
#xe-contact-form .form-item label{display:block;margin-bottom:8px;font-size:15px;font-weight:500;color:var(--rr-color-common-white)}
#xe-contact-form .form-item label .xe-req{color:#ef4444;margin-left:2px;font-weight:700}
#xe-contact-form .form-item label .xe-opt{font-weight:400;opacity:.7}
#xe-contact-form .form-item .form-control{border:1px solid transparent;transition:border-color .25s ease,box-shadow .25s ease}
#xe-contact-form .form-item .form-control:focus,
#xe-contact-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}
#xe-contact-form .form-item .form-control.nice-select{width:100%;float:none;border-radius:0;font-size:16px}
#xe-contact-form .form-item .form-control.nice-select .current{color:var(--rr-color-common-white)}
#xe-contact-form .form-item .form-control.nice-select:not(.xe-picked) .current{color:var(--rr-color-text-body)}
#xe-contact-form .form-item .form-control.nice-select .list{z-index:20;max-height:260px;overflow-y:auto;border-radius:0;margin-top:2px;background-color:#0c0d10;border:1px solid #1e2228;box-shadow:0 18px 40px -12px rgba(0,0,0,.6)}
#xe-contact-form .form-item .form-control.nice-select .option{min-height:42px;line-height:42px;color:rgba(255,255,255,.8)}
#xe-contact-form .form-item .form-control.nice-select .option:hover,
#xe-contact-form .form-item .form-control.nice-select .option.focus,
#xe-contact-form .form-item .form-control.nice-select .option.selected.focus{background-color:rgba(22,163,74,.15);color:var(--rr-color-common-white)}
#xe-contact-form .form-item .form-control.nice-select .option.disabled{display:none}
#xe-contact-form .form-item .xe-error{display:block;margin:-18px 0 16px;font-size:13px;line-height:1.4;color:#f87171}
#xe-contact-form .form-item.has-error .form-control{border-color:#ef4444!important;box-shadow:0 0 0 3px rgba(239,68,68,.15)}
#xe-contact-form textarea.form-control{resize:vertical;min-height:140px}
#xe-contact-form .xe-submit-row{display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px}
#xe-contact-form .xe-reply-note{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--rr-color-text-body)}
#xe-contact-form .xe-reply-note i{color:var(--rr-color-theme-primary)}
#xe-contact-form button[type=submit]{display:inline-flex;align-items:center;gap:10px}
#xe-contact-form button[type=submit]:disabled{cursor:wait;opacity:.85}
#xe-contact-form .xe-spinner{display:none;width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:xe-spin .7s linear infinite}
#xe-contact-form button.is-loading .xe-spinner{display:inline-block}
@keyframes xe-spin{to{transform:rotate(360deg)}}
#xe-contact-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] #xe-contact-form .form-item label{color:var(--rr-color-heading-primary)}
[data-theme=light] #xe-contact-form .form-item .form-control.nice-select .current{color:var(--rr-color-heading-primary)}
[data-theme=light] #xe-contact-form .form-item .form-control.nice-select:not(.xe-picked) .current{color:#515357}
[data-theme=light] #xe-contact-form .form-item .form-control.nice-select .list{background-color:#fff;border-color:#e5e7eb;box-shadow:0 18px 40px -16px rgba(0,0,0,.25)}
[data-theme=light] #xe-contact-form .form-item .form-control.nice-select .option{color:#4b5563}
[data-theme=light] #xe-contact-form .form-item .form-control.nice-select .option:hover,
[data-theme=light] #xe-contact-form .form-item .form-control.nice-select .option.focus{color:var(--rr-color-heading-primary)}
[data-theme=light] #xe-contact-form .form-item .xe-error{color:#dc2626}
[data-theme=light] #xe-contact-form .xe-form-status{color:#15803d}
#xe-contact-form .xe-form-status.is-error{border-left-color:#ef4444;background:rgba(239,68,68,.1);color:#f87171}
[data-theme=light] #xe-contact-form .xe-form-status.is-error{color:#dc2626}

/* Header "Waitlist" menu item (all main pages): green dot with a pulsing ring
   in front of the label, linking to outroh-waitlist.html. */
.xe-pulse{position:relative;display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:#16a34a;vertical-align:middle;top:-1px}
.xe-pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:#16a34a;animation:xe-pulse-ring 1.6s ease-out infinite}
@keyframes xe-pulse-ring{from{transform:scale(1);opacity:.7}to{transform:scale(2.8);opacity:0}}

/* ==========================================================================
   Light theme frosted header (all inner pages: .inner-header). The same look
   as the homepage header (enhancements.css block 22): 80% white glass with the backdrop blurred and brightened, so the dark banner
   photos still show through but dark menu text stays readable. The template
   instead keeps white menu text in light mode and turns the bar dark once
   scrolled. The green logo is img.xe-logo-light next to img.xe-logo-dark in
   each page's .header-logo.
   ========================================================================== */
.xe-logo-light,
[data-theme=light] .xe-logo-dark{display:none}
[data-theme=light] .xe-logo-light{display:inline-block}
[data-theme=light] .inner-header,
[data-theme=light] .inner-header.fixed{background-color:transparent;border-bottom:1px solid rgba(17,21,28,.08)}
[data-theme=light] .inner-header:before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(14px) saturate(140%) brightness(3);backdrop-filter:blur(14px) saturate(140%) brightness(3);pointer-events:none}
/* The header sits 20px below the top until scrolled (.header top:20px); stretch
   the glass up over that gap so no strip of bare photo shows above it. */
[data-theme=light] .inner-header:not(.fixed):before{top:-20px}
[data-theme=light] .inner-header .primary-header-inner .header-menu-wrap ul li a{color:var(--rr-color-heading-primary)}
[data-theme=light] .inner-header .primary-header-inner .header-menu-wrap ul li a:hover,
[data-theme=light] .inner-header .primary-header-inner .header-menu-wrap ul li.active > a{color:var(--rr-color-theme-primary)}
[data-theme=light] .inner-header .primary-header-inner .header-menu-wrap ul .menu-item-has-children:after{color:var(--rr-color-heading-primary)}
[data-theme=light] .inner-header .primary-header-inner .header-menu-wrap ul .menu-item-has-children.active:after,
[data-theme=light] .inner-header .primary-header-inner .header-menu-wrap ul .menu-item-has-children:hover:after{color:var(--rr-color-theme-primary)}
[data-theme=light] .inner-header .primary-header-inner .header-right-wrap .header-right .sidebar-trigger{border-color:#d1d5db}
[data-theme=light] .inner-header .primary-header-inner .header-right-wrap .header-right .sidebar-trigger svg{color:var(--rr-color-heading-primary)}
/* <=992px the header is a solid fixed bar over scrolling content and the
   rule above hides .header:before; bring the glass back, more opaque. */
@media only screen and (max-width:992px){
   [data-theme=light] .inner-header{background-color:transparent}
   [data-theme=light] .inner-header:before{display:block;top:0;background:rgba(255,255,255,.88)}
}

/* Header dropdowns (Services, Company), all pages and both themes. The
   template paints the current page's sub-item green on the <li> with white
   text, but the <a> inside has its own dark/white background that hides the
   green; paint the <a> green as well. */
.header .primary-header-inner .header-menu-wrap ul li li.active > a,
[data-theme=light] .header .primary-header-inner .header-menu-wrap ul li ul li.active > a{background-color:var(--rr-color-theme-primary);color:var(--rr-color-common-white)}

/* ==========================================================================
   Footer newsletter (all pages; the footer is dark in both themes): status
   line and invalid email for the widget rendered by assets/js/newsletter.js.
   ========================================================================== */
.xe-newsletter-form .xe-nl-status{margin:14px 0 0;font-size:14px;line-height:1.5;color:#4ade80}
.xe-newsletter-form .xe-nl-status.is-error{color:#f87171}
.xe-newsletter-form .form-control[aria-invalid=true]{border-color:#ef4444!important}
.xe-newsletter-form .submit:disabled{cursor:wait;opacity:.8}

/* Training page poster (service-details-fb-monetization.html): the theme gives
   .service-details-img a fixed 500px height with object-fit:cover, which is
   fine for photos but cropped the poster's text and coin on narrow screens.
   Show the whole poster at its own 1200x670 shape instead. */
.service-details-img.xe-poster-img{height:auto}
.service-details-img.xe-poster-img img{height:auto;aspect-ratio:1200/670;object-fit:contain}

/* Newsletter thank-you popup (dialog.xe-nl-modal, built by newsletter.js). */
.xe-nl-modal{width:min(420px,calc(100% - 32px));margin:auto;padding:40px 32px 32px;border:1px solid rgba(255,255,255,.08);background:var(--rr-color-bg-1);color:var(--rr-color-text-body);text-align:center;box-shadow:0 40px 100px -30px rgba(0,0,0,.6)}
.xe-nl-modal::backdrop{background:rgba(2,5,10,.72);backdrop-filter:blur(4px)}
.xe-nl-modal[open]{animation:xe-nl-pop .25s ease-out}
@keyframes xe-nl-pop{from{opacity:0;transform:translateY(16px) scale(.98)}}
.xe-nl-modal-icon{display:inline-grid;place-items:center;width:64px;height:64px;margin-bottom:18px;border-radius:50%;background:rgba(22,163,74,.12);color:var(--rr-color-theme-primary);font-size:28px}
.xe-nl-modal h3{margin:0 0 10px;font-size:24px;color:var(--rr-color-common-white)}
.xe-nl-modal p{margin:0 0 24px;font-size:15px;line-height:1.6}
.xe-nl-modal .rr-primary-btn{border:0;padding:16px 40px}
[data-theme=light] .xe-nl-modal{background:#fff;border-color:#e4e4e4;color:#5f6368}
[data-theme=light] .xe-nl-modal h3{color:var(--rr-color-heading-primary)}

/* About page Mission / Vision / Goal tabs on phones: with 20px margins the
   third button wrapped onto its own line, so the row looked misaligned.
   Keep all three in one row as equal-width buttons. */
@media only screen and (max-width:767px){
   .about-tab .nav-tabs{flex-wrap:nowrap;gap:8px;margin-bottom:30px}
   .about-tab .nav-tabs .nav-link{flex:1 1 0;min-width:0;margin-right:0!important;padding:12px 6px;font-size:14px;text-align:center;white-space:nowrap}
}

/* About page counters (.counter-2) on phones: one per row, each centred on
   its own width, made a ragged zig-zag. Show them as a tidy 2 x 2 grid with
   the number above its label. */
@media only screen and (max-width:767px){
   .counter-2 .row{row-gap:32px}
   .counter-2 .row>[class*="col-"]{flex:0 0 50%;max-width:50%}
   .counter-2 .counter-item{flex-direction:column;justify-content:flex-start;text-align:center}
   .counter-2 .counter-item .title{font-size:52px}
   .counter-2 .counter-item p{margin:8px 0 0;font-size:14px;line-height:1.35}
}

/* Contact page info items (Address / Phone & Email / Hours) on phones: the
   theme stacked the icon above the text. Keep the icon beside its details,
   with a smaller box so the text still has room. */
@media only screen and (max-width:767px){
   .contact-content .contact-list .list-item{grid-template-columns:48px 1fr;grid-gap:14px;align-items:start}
   .contact-content .contact-list .list-item .icon{width:48px;height:48px;font-size:20px}
   .contact-content .contact-list .list-item .content .title{font-size:17px;margin-bottom:6px}
   .contact-content .contact-list .list-item .content p,
   .contact-content .contact-list .list-item .content span,
   .contact-content .contact-list .list-item .content a{font-size:14px;line-height:1.55}
   .contact-content .contact-list .list-item .content span{display:block}
   .contact-content .contact-list .list-item:not(:last-of-type){margin-bottom:18px;padding-bottom:18px}
}

/* Sharp corners on every form field, all pages, like the rest of the site.
   Bootstrap rounds .form-control / .form-select, and the footer newsletter
   box and its button had 4px corners. */
.form-control,
.form-select,
.nice-select,
.footer-widget .footer-form .form-control,
.footer-widget .footer-form .submit{border-radius:0}

/* Project cards (.pc-card: Projects page and the service pages' Related
   Projects) -- smoother hover on mouse devices. The description used to open
   with a max-height trick (0 -> 120px), so the band jumped and the timing was
   off. Now its grid row grows from 0fr to 1fr, which animates to the text's
   real height, while the text fades and rises in a beat later. The lift and
   the image zoom use a longer, softer ease. Touch/phone layout is unchanged. */
@media (hover:hover) and (min-width:768px){
   .pc-card{transition:transform .6s cubic-bezier(.22,1,.36,1),border-color .45s ease,box-shadow .6s cubic-bezier(.22,1,.36,1)}
   .pc-card .pc-thumb img{transition:transform 1.1s cubic-bezier(.22,1,.36,1),filter .7s ease}
   .pc-card .pc-body{display:grid;grid-template-rows:auto auto 0fr;transition:grid-template-rows .6s cubic-bezier(.22,1,.36,1),background .45s ease}
   .pc-card:hover .pc-body{grid-template-rows:auto auto 1fr}
   .pc-card .pc-desc,
   .pc-card:hover .pc-desc{max-height:none;min-height:0;margin-top:0}
   .pc-card .pc-desc{transform:translateY(10px);transition:opacity .45s ease,transform .6s cubic-bezier(.22,1,.36,1)}
   .pc-card:hover .pc-desc{transition-delay:.12s}
   /* spacing above the text lives inside the row, so it is clipped too when closed */
   .pc-card .pc-desc::before{content:"";display:block;height:12px}
}

/* Home "Our Projects" cards (.project-box-4): same softer ease for the band,
   the text and the image zoom. */
.project-box-4:after{transition:transform .7s cubic-bezier(.22,1,.36,1)}
.project-box-2.project-box-4 .project-content,
.project-box-2.project-box-4:hover .project-content{transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .5s ease,visibility .5s}