/* ══════════════════════════════════════════════
       BETTROI — ROOT VARIABLES
    ══════════════════════════════════════════════ */
    :root {
      --primary:     #001F54;
      --secondary:   #475569;
      --theme:       #1855D4;
      --action:      #1855D4;
      --black:       #0A1128;
      --bg:          #0A1128;
      --border:      rgba(0, 31, 84, 0.12);
      --white:       #FFFFFF;
      --bright-blue: #2967EA;
      --navy:        #001F54;
      --ink:         #0A1128;
      --off-white:   #F4F6F9;
      --cream:       #FEFCFB;
      --slate:       #475569;
      --lt-slate:    #94A3B8;
      --bt-border:   #E2E8F0;
    }

    /* ── Loader ── */
    .loader-wrap { display: none !important; }

    /* ── Cursor: use system default, keep explore-text hover behaviour ── */
    .custom-cursor { display: none !important; }
    body, body * { cursor: default !important; }
    a, button, .work-box .image, [role="button"] { cursor: pointer !important; }

    /* ── Progress bar ── */
    .progress-wrap svg.progress-circle path { stroke: var(--bright-blue); }
    .progress-wrap::after { background-color: var(--navy); color: var(--bright-blue); }

    /* ── FOOTER ACCORDION ── */
    .footer-chevron { transition: transform .3s ease; display: inline-block; margin-left: 6px; font-size: 11px; }
    .footer-accordion-title { cursor: pointer; user-select: none; }

    /* ════════════════════
       HERO
    ════════════════════ */
    /* All hero text → white */
    .hero-area .section-title,
    .hero-area .section-title *,
    .hero-area .text,
    .hero-area .text *,
    .hero-area .meta-list ul li,
    .hero-area .meta-list ul li strong { color: #fff !important; }

    /* Hero tag — flat uppercase label, white */
    .hero-tag {
      display: block;
      font-size: 11px;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.55);
      margin-bottom: 20px;
    }

    /* Hero stats strip */
    .meta-list ul {
      display: flex;
      gap: 0;
      list-style: none;
      padding: 0;
      margin: 52px 0 0;
      border-top: 1px solid rgba(255,255,255,0.1);
    }
    .meta-list ul li {
      font-size: 12px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.55);
      line-height: 1.5;
      padding: 28px 48px 0 0;
    }
    .meta-list ul li strong {
      display: block;
      font-size: 36px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 6px;
      letter-spacing: -0.02em;
    }

    /* Hero slider — hide inactive slide content so GSAP text doesn't bleed */
    .hero-area .swiper-slide:not(.swiper-slide-active) .hero-area-inner { opacity: 0 !important; visibility: hidden !important; }
    .hero-area .swiper-slide-active .hero-area-inner { opacity: 1; visibility: visible; }

    /* Hero slider pagination */
    .hero-slider-active { width: 100%; height: 100%; }
    .hero-area .swiper-slide { position: relative; }
    .hero-area .swiper-pagination { bottom: 44px; }
    .hero-area .swiper-pagination-bullet {
      background: rgba(255,255,255,0.3);
      opacity: 1;
      width: 6px; height: 6px;
      transition: all .4s;
    }
    .hero-area .swiper-pagination-bullet-active {
      background: #fff;
      width: 28px;
      border-radius: 3px;
    }

    /* ════════════════════
       ABOUT — DATA-DRIVEN
    ════════════════════ */
    .about-area-2 { background-color: var(--off-white); }
    /* Section title → brightest blue */
    .about-area-2 .section-title,
    .about-area-2 .section-title * { color: var(--bright-blue) !important; }
    .about-area-2 .text { color: var(--slate) !important; }
    .about-area-2 .rr-btn-underline { color: var(--slate); }
    .section-subtitle-3 { color: #666 !important; }
    .section-subtitle-wrapper .thumb { overflow: hidden; border-radius: 12px; }
    .section-subtitle-wrapper .thumb img { width: 100%; height: 260px; object-fit: cover; }

    /* ════════════════════
       SOLUTIONS / WORK
    ════════════════════ */
    .work-area { background-color: var(--off-white); padding-bottom: 100px !important; }
    .work-area .section-title { color: var(--navy); }
    .work-area .content .title a { color: var(--navy); }
    .work-area .content .meta .tag,
    .work-area .content .meta .date { color: var(--slate) !important; }
    /* intelligent ecosystems — maximum impact */
    .work-title {
      font-size: clamp(28px, 13vw, 260px) !important;
      line-height: 1.0 !important;
      letter-spacing: 0.03em !important;
      overflow: visible !important;
    }
    .work-title .first,
    .work-title .last { display: block; }
    .work-title .first { color: var(--bright-blue); }
    .work-title .last  { color: var(--navy); }
    .work-box .content .title a:hover { color: var(--bright-blue); }
    .work-box .thumb .image img { width: 100%; height: 340px; object-fit: cover; border-radius: 8px; }
    .work-box.span-2 .thumb .image img { height: 400px; }

    /* ════════════════════
       PROFESSIONAL SERVICES
    ════════════════════ */
    .service-area { background-color: #FFFFFF !important; }
    /* Section title → brightest blue */
    .service-area .section-title,
    .service-area .section-title * { color: var(--bright-blue) !important; }

    /* Product cards — tucked close to the phone (cols 2/3/4), animation-friendly */
    @media (min-width: 1200px) {
      .services-wrapper-1 .item-1 { grid-column: 2; }
      .services-wrapper-1 .item-3 { grid-column: 3; }
      .services-wrapper-1 .item-5 { grid-column: 4; }
    }
    /* neutralise the template's fan-out translate WITHOUT !important so GSAP fade-anim can run */
    .services-wrapper-1 .item-1,
    .services-wrapper-1 .item-3,
    .services-wrapper-1 .item-5 { transform: none; }

    /* Phone mockup — white background */
    .phone-mockup { background-color: #fff !important; border-color: var(--bt-border) !important; }
    .phone-mockup .mockup-logo img { filter: none !important; }
    .phone-mockup .mockup-text li,
    .phone-mockup .mockup-text li a,
    .phone-mockup .mockup-text li a span,
    .phone-mockup .mockup-text li span { color: var(--navy) !important; }
    .phone-mockup .mockup-text li a:hover,
    .phone-mockup .mockup-text li a:hover span { color: var(--bright-blue) !important; }
    .phone-mockup .mockup-offcanvas path { fill: var(--navy) !important; }
    .mockup-text li { color: #fff !important; }
    .mockup-text li a,
    .mockup-text li a span { color: #fff !important; }
    .mockup-text li a:hover,
    .mockup-text li a:hover span { color: var(--bright-blue) !important; }

    /* Service cards: blue bg, hover → brightest blue */
    .service-box-1 {
      background-color: var(--navy) !important;
      transition: background-color .35s ease, transform .35s ease !important;
    }
    .service-box-1:hover {
      background-color: var(--bright-blue) !important;
      transform: translateY(-4px);
    }
    .service-box-1 .title,
    .service-box-1 .title * { color: #fff !important; }
    .service-box-1 img { filter: brightness(0) invert(1); }

    /* ════════════════════
       WHY CHOOSE US
    ════════════════════ */
    .why-box {
      padding: 30px 20px;
      border-top: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      transition: background-color .3s ease;
      margin: 0 -20px;
    }
    .why-box:last-of-type { border-bottom: 1px solid rgba(255,255,255,0.08); }
    .why-box:hover { background-color: var(--bright-blue); }
    .why-box .name { font-size: 17px; font-weight: 600; margin-bottom: 10px; }
    .why-box .post { font-size: 14px; line-height: 1.8; opacity: 0.75; }

    /* ════════════════════
       MARQUEE — brightest blue BG
    ════════════════════ */
    .marquee-text-area.rr-bg-primary {
      background-color: var(--bright-blue) !important;
    }
    .marquee-text-area .section-title,
    .marquee-text-area .section-title * { color: #fff !important; }

    /* ════════════════════
       CLIENT LOGOS
    ════════════════════ */
    .client-area .section-title,
    .client-area .section-title * { color: #fff !important; }
    .client-slider-active .swiper-slide {
      display: flex; align-items: center; justify-content: center;
    }
    .client-slider-active .swiper-slide img {
      max-height: 42px; width: auto; max-width: 160px; object-fit: contain;
      filter: brightness(0) invert(1);
      opacity: 0.82; transition: opacity .3s ease;
    }
    .client-slider-active .swiper-slide img:hover { opacity: 1; }

    /* ════════════════════
       METRICS / AWARDS — hover brightest blue
    ════════════════════ */
    .award-box {
      border-radius: 8px;
      padding: 20px;
      transition: background-color .3s ease;
      margin: -20px;
    }
    .award-box:hover { background-color: rgba(64,128,255,0.12) !important; }
    .award-box .category { color: rgba(255,255,255,0.5) !important; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
    .award-box .award    { color: #fff !important; }
    .award-box .year     { color: #fff !important; font-size: 22px; font-weight: 700; }
    .award-box:hover .category { color: rgba(255,255,255,0.6) !important; }
    .award-box:hover .year { color: #fff !important; }
    .award-box:hover .award { color: #fff !important; }

    /* ════════════════════
       FOOTER — white bg, navy content
    ════════════════════ */
    .footer-area { background-color: #fff !important; }
    .footer-area,
    .footer-area * { color: var(--navy) !important; }
    .footer-area .title,
    .footer-area .title span,
    .footer-area .title div { color: var(--navy) !important; }
    .footer-area .footer-nav-list li a:hover { color: var(--bright-blue) !important; }
    .footer-area .rr-btn-underline,
    .footer-area .rr-btn-underline::before { color: var(--navy) !important; }
    .footer-area .copyright-area { background-color: var(--off-white); border-top-color: var(--bt-border); }

    /* ════════════════════
       GLOBAL HELPERS
    ════════════════════ */
    .rr-btn { background-color: var(--theme) !important; }
    .rr-btn-underline::after { background-color: var(--bright-blue); }

    /* ════════════════════
       HERO OVERLAY — lighter
    ════════════════════ */
    .hero-area .area-bg::after,
    .hero-area .area-bg::before { background: rgba(0,15,50,0.4) !important; }

    /* ════════════════════
       SERVICE SECTION TITLE — wider span
    ════════════════════ */
    .service-area .section-title-wrapper { max-width: none; }
    .service-area .section-title {
      font-size: clamp(38px, 5vw, 72px) !important;
      line-height: 1.1 !important;
    }

    /* ════════════════════
       CLIENT LOGOS — same bright blue as marquee
    ════════════════════ */
    .client-area.rr-bg-primary { background-color: var(--bright-blue) !important; }
    .client-area .section-title,
    .client-area .section-title * { color: #fff !important; }
    .client-area { padding-bottom: 100px !important; }

    /* Extra bottom padding on key sections */
    .team-area-1 { padding-bottom: 100px !important; }
    .award-area { padding-bottom: 100px !important; }

    /* Team heading — 2 lines: "Practical Solutions" / "for Your Business" */
    .team-area-1 .section-title {
      font-size: clamp(32px, 4.5vw, 64px) !important;
      line-height: 1.15 !important;
    }

    /* ════════════════════
       TEAM SECTION — CTA beside title
    ════════════════════ */
    .team-area-1 .section-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 40px;
    }
    .team-area-1 .team-area-cta {
      flex-shrink: 0;
      padding-bottom: 6px;
    }
    .team-area-1 .team-area-cta a { color: #fff; }
    .team-area-1 .team-area-cta a .underline { color: #fff; }

    /* WHY-BOX icons */
    .why-icon {
      display: block;
      font-size: 36px;
      color: rgba(255,255,255,0.7);
      margin-bottom: 16px;
    }
    .why-box:hover .why-icon { color: #fff !important; }
    .why-box:hover .name,
    .why-box:hover .post { color: #fff !important; }

    /* ════════════════════
       FOOTER — hero title bright blue
    ════════════════════ */
    .footer-area .footer-widget-box.content .title,
    .footer-area .footer-widget-box.content .title span,
    .footer-area .footer-widget-box.content .title div { color: var(--bright-blue) !important; }

    /* ════════════════════
       MOBILE — relax cramped letter/word spacing on titles & body
    ════════════════════ */
    @media (max-width: 991px) {
      .section-title,
      .section-title *,
      .section-title.font-bdogrotesk-regular,
      .section-title.font-bdogrotesk-regular-50 {
        letter-spacing: -0.01em !important;
        word-spacing: 0.04em;
        line-height: 1.12 !important;
      }
      .hero-area .section-title,
      .hero-area .section-title * {
        letter-spacing: 0 !important;
        word-spacing: 0.05em;
        line-height: 1.1 !important;
      }
      .hero-area .text,
      .hero-area .text * {
        letter-spacing: 0.01em;
        word-spacing: 0.03em;
        line-height: 1.7;
      }
      .client-area .section-title,
      .client-area .section-title * {
        letter-spacing: 0 !important;
        word-spacing: 0.06em;
        line-height: 1.3 !important;
      }
    }
    @media (max-width: 575px) {
      .section-title,
      .section-title * { word-spacing: 0.06em; }
      .hero-area .text { font-size: 15px; }
    }

    /* ════════════════════
       MOBILE — SERVICE CARDS
    ════════════════════ */
    @media (max-width: 1199px) {
      .services-wrapper-box {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 24px !important;
      }
      .phone-mockup { display: none !important; }
      .services-wrapper-1 {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 16px !important;
        position: static !important;
        top: auto !important;
        transform: none !important;
      }
      .services-wrapper-1 .service-box-1 {
        width: 100% !important;
        transform: none !important;
        position: static !important;
        max-width: 100% !important;
      }
      .add { display: none !important; }
    }
/* a11y AA contrast overrides */
.team-box-1 .content .post{color:#9AA5B8}

/* a11y AA v2 */
.rr-bg-primary .team-box-1 .content .post,.dark .rr-bg-primary .team-box-1 .content .post,.team-box-1 .content .post{color:#9AA5B8 !important;opacity:1 !important}

/* Big screens (>=1700px): keep the hero composed - cap the display size so
   lines wrap naturally, and drop the stats block below the floating nav */
@media (min-width: 1700px){
  .hero-area .section-title{font-size:clamp(88px,5.5vw,116px);max-width:1000px}
  .hero-area .meta-list{top:130px}
}