/* ==========================================================================
   melange.css — custom site styles
   Merged from: custom.css, figma-theme.css, button-anim.css
   Load after shared stylesheet + form.css. Do not edit the source slices directly;
   re-run scripts/build-melange-assets.js after changing css/*.css sources, or
   edit this file directly and drop the build step.
   ========================================================================== */

/* --- custom.css --- */
/* ==========================================================================
   Melange Digital — Tourism Board landing page
   Custom CSS extracted from index.html inline <style> blocks.
   Load this AFTER the shared stylesheet and form.css so overrides still win
   in the same order they did when they lived inline in <head>/<body>.
   Sections below are in the same top-to-bottom order as they appear on the page.
   ========================================================================== */

/* ===== Screen-reader-only utility (for SEO/semantic hidden headings) ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== Global: pre-hide rule for anim targets (FOUC guard) ===== */
   /* DISABLED — this rule permanently hid every major heading (incl. .hero-heading-h1)
      whenever Webflow never added .w-mod-ix3 on <html>. That class is only added inside
      site-home.js after `Webflow.require("ix3").ready()` AND `getInstance()` succeed;
      if IX3 stalls (GSAP/SplitText load after site-home, getInstance() null, etc.) the
      class never lands and this higher-specificity `visibility:hidden !important` beats
      the force-visible overrides below — so h1/h2 copy looks like it "didn't load".
      FOUC is already covered by the explicit opacity/visibility force-visible block. */
   /* html.w-mod-js:not(.w-mod-ix3) :is(.pricing-heading-h2, .c2a-title, .crafting-heading, .testimonial-heading-h2, .home-heading-h2, .navigation-link.for-footer, .our-work-heading, .heading-20, .achevement-heading-h2, .creative-mind-heading, .hero-heading-h1, .about-card-2) {visibility: hidden !important;} */

/* ===== Global: force-visible override for IX2-stuck elements ===== */
   /* DEFINITIVE FIX — see chat for full explanation. Summary: these elements use the vendor
      "slideInBottom" (or similar) preset, which sets opacity:0 + transform:translateY(100px) as their
      PERMANENT INITIAL STATE on script init (useFirstGroupAsInitialState:true), and only clears it once
      a specific SCROLL_INTO_VIEW event fires for that exact element. That event depends on accurate
      scroll position via GSAP ScrollTrigger, which this page's Lenis smooth-scroll never re-syncs to
      (the standard `lenis.on('scroll', ScrollTrigger.update)` call is missing) — so the event often
      never fires, and the element stays permanently invisible and shifted down 100px while still
      occupying its full layout space (transform doesn't remove it from flow). That is what produced
      both the "ghosted" text and the large blank gaps.
      An earlier fix attempted `[style*="opacity:0"]`, matching the literal style text — but the moment
      this script re-applies that state via JS, the browser serializes it as `opacity: 0` WITH a space,
      which silently stopped matching. This version targets the stable `data-w-id` attribute instead,
      which the script reads from but never rewrites, so it cannot be defeated the same way. The inline
      `style="opacity:0"` has also been removed directly from each element's HTML (not just overridden),
      so there is no initial invisible state to begin with, before any JS even runs. */
   [data-w-id="6d188073-2487-31fa-c36a-0d1621970df1"],
   [data-w-id="aca08924-3373-f5fc-69ef-f496c3c5cc2e"],
   [data-w-id="515745fa-8925-8639-84db-e1751e217fc7"],
   /* 4c59f5ea..., 04bc2df1..., and 5daca492... intentionally removed from this list — all three were
      only ever the .card-1/.card-2/.card-3 identifiers deleted in the Our Work carousel fixes (see
      comments at each card), so none of them appear in the HTML anymore and keeping them here would
      be dead code referencing nothing. */
   [data-w-id="f3b16a16-0c4c-a740-a426-e15765d9f019"],
   [data-w-id="b8631148-6abb-dc69-9508-3392cf0c6905"],
   [data-w-id="ceee1f72-6273-7a84-75d4-8e50d7167e60"],
   [data-w-id="11e564bd-7a9f-0c4f-98be-f25e923e08b8"],
   [data-w-id="1e851da6-c909-1d8a-dab8-79ffee927f74"] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
   }
   /* FIX: removed the old "belt-and-suspenders" [style*="opacity:0"] catch-all. It was a global
      selector matching ANY element on the page with an inline opacity:0 style — not just the known
      IX2-stuck ones — so it would have force-shown any future JS-driven modal, dropdown, or menu that
      legitimately starts hidden via inline opacity:0, breaking that JS's own show/hide logic. The
      explicit data-w-id list above already covers every element actually confirmed stuck by this bug,
      so this catch-all is no longer needed and is safer removed than scoped. */
   .pricing-heading-h2, .pricing-heading-h2 *,
   .c2a-title, .c2a-title *,
   .crafting-heading, .crafting-heading *,
   .testimonial-heading-h2, .testimonial-heading-h2 *,
   .home-heading-h2, .home-heading-h2 *,
   .our-work-heading, .our-work-heading *,
   .heading-20, .heading-20 *,
   .achevement-heading-h2, .achevement-heading-h2 *,
   .creative-mind-heading, .creative-mind-heading *,
   .hero-heading-h1, .hero-heading-h1 *,
   .profile-card, .profile-card * {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
   }
   .creative-mind-heading, .creative-mind-heading *,
   .hero-heading-h1, .hero-heading-h1 * {
    color: var(--black-100) !important;
   }
   /* FIX: .navigation-link.for-footer is hidden by the html.w-mod-js pre-IX2 rule above (it's in
      that selector list) but was missing from this force-visible block — every other affected class
      has an entry here, this one didn't, so footer nav links were left permanently invisible if their
      IX2 reveal never fired. Given its own rule (rather than folded into the block above) because that
      block also forces color: var(--black-100), which is meant for dark headings on light sections —
      applying it here would make the footer links black text on the footer's dark background, trading
      one invisibility bug for another. This rule only restores opacity/visibility/transform. */
   .navigation-link.for-footer, .navigation-link.for-footer * {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
   }

/* ===== Hero heading tweaks / GLOBAL LAYOUT SYSTEM / CAAS section ===== */
.home-heading-h2{
margin:0!important;
max-width:700px;
line-height:1.1!important;
}
.innovation-heading-div p{
margin:0;
align-self:center;
}
.home-shift-heading{
max-width:none!important;
margin-bottom:24px!important;
}
.home-shift-line{
max-width:720px;
}
@media (max-width:991px){
.innovation-heading-div,
.network-grid{
grid-template-columns:1fr;
gap:24px;
}
.home-heading-h2,
.home-shift-heading{
max-width:100%!important;
}
}
/* =======================================
   GLOBAL LAYOUT SYSTEM
======================================= */

.container-main,
.container-4,
.container-5,
.container-6,
.container-7,
.container-8,
.container-10{
    max-width:1400px !important;
    margin:0 auto;
    padding-left:40px;
    padding-right:40px;
}

@media (max-width:991px){

.container-main,
.container-4,
.container-5,
.container-6,
.container-7,
.container-8,
.container-10{
    padding-left:24px;
    padding-right:24px;
}

}


/* Hero only */
#home{
    padding:var(--hero-pad-top) 0 var(--hero-pad-bottom);
}

section{
    position:relative;
}

section:not(:first-of-type)::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:min(1400px,92%);
    height:1px;
    background:rgba(0,0,0,.06);
}
.home-video-section,
.home-shift-section,
.home-innovation-section,
.section-6{
    background:#ffffff;
}

.home-logo-section,
.home-network-section,
.home-our-work-section,
.home-infra-section,
.section-7,
.section-8{
    background:#ffffff;
}
.hero-italic{
    display:block;
    margin-top:12px;
}
.home-caas-section{

    padding:var(--section-pad-y) 0;

    background:#ffffff;

}

.caas-header{

    max-width:760px;

    margin-bottom:var(--section-header-gap);

}

.caas-label{

    font-size:13px;

    text-transform: none;

    letter-spacing:.08em;

    color:var(--black-60);

    font-weight:600;

    margin-bottom:18px;

}

.caas-heading{

    text-align:center!important;

    margin-bottom:24px;
     line-height:1.08;

}


.caas-acronym{
    display:inline-block;
    color:var(--violet-100) !important;
    font-family: var(--melange-display) !important;
    font-style: normal;
    font-weight:600;
    font-size:1.18em;
    transform:translateY(2px);
}

.caas-intro{

    max-width:620px;

    font-size:18px;

    line-height:1.75;

    color:var(--black-60);

}

.caas-flow{

    display:grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap:28px 32px;

    align-items:start;

}

.caas-step{

    padding-top:28px;

    border-top:none;

}

.caas-number{

    display:block;

    margin-bottom:16px;

    font-family:"Alan Sans",sans-serif;

    font-size:48px;

    color: var(--melange-highlight);

}

.caas-step h3{

    font-size: var(--type-title, 22px);

    letter-spacing:.08em;

    margin-bottom:14px;

}

.caas-step p{

    font-size:15px;

    line-height:1.65;

    color:var(--black-60);

}

.caas-arrow{

    display:none;

}

@media(max-width:991px){

.caas-flow{

    grid-template-columns:1fr;

    gap:36px;

}

.caas-arrow{

    display:none;

}

}

/* ===== Logo section (marquee + logo pills) ===== */
     /* Both marquee rows previously relied on vendor IX2 JS, which only had a registered animation
        for the first row's element ID — the second row's ID was never registered, so it sat static.
        Replaced with a self-contained CSS animation so both rows scroll identically and reliably. */
/* ===== Logo / infra marquees — kill shared vw hacks + CSS % loops (iOS glitch source) ===== */
.main .marquee_wrap,
.main .static-marquee_logos,
.home-logo-section .marquee_wrap,
.home-logo-section .static-marquee_logos,
.home-logo-section .marquee-segment,
.home-infra-section .marquee-segment {
  width: max-content !important;
  min-width: 0 !important;
  max-width: none !important;
  justify-content: flex-start !important;
}

.home-logo-section .marquee-css-scroll,
.home-infra-section .infra-track {
  animation: none !important;
  overflow: visible !important;
  width: max-content !important;
  transform: translate3d(0, 0, 0);
}

.home-logo-section .logo-section.pixel-marquee,
.home-infra-section .infra-marquee.pixel-marquee,
.home-infra-section .infra-marquee {
  overflow: hidden !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  pointer-events: none !important;
  touch-action: none !important;
}

.home-logo-section .pixel-marquee__track,
.home-infra-section .pixel-marquee__track,
.home-logo-section .marquee-css-scroll,
.home-infra-section .infra-track,
.home-logo-section .marquee-logo,
.home-infra-section .infra-marquee-logo,
.home-infra-section .infra-logo-item,
.home-logo-section .marquee-segment,
.home-infra-section .marquee-segment {
  pointer-events: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

.home-logo-section .static-marquee_logos,
.home-logo-section .marquee-segment,
.home-infra-section .marquee-segment {
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  flex-wrap: nowrap !important;
  gap: 48px !important;
}

@media (max-width: 991px) {
  .main .marquee_wrap,
  .main .static-marquee_logos,
  .home-logo-section .marquee_wrap,
  .home-logo-section .static-marquee_logos {
    width: max-content !important;
  }
}
@media (max-width: 479px) {
  .main .marquee_wrap,
  .main .static-marquee_logos,
  .home-logo-section .marquee_wrap,
  .home-logo-section .static-marquee_logos {
    width: max-content !important;
  }
}

/* Soft edge fade without -webkit-mask (mask + transform blanks on iOS) */
.home-logo-section .logo-section,
.home-infra-section .infra-marquee {
  position: relative;
}
.home-logo-section .logo-section::before,
.home-logo-section .logo-section::after,
.home-infra-section .infra-marquee::before,
.home-infra-section .infra-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  z-index: 2;
  pointer-events: none;
}
.home-logo-section .logo-section::before,
.home-infra-section .infra-marquee::before {
  left: 0;
  background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0));
}
.home-logo-section .logo-section::after,
.home-infra-section .infra-marquee::after {
  right: 0;
  background: linear-gradient(270deg, #fff, rgba(255, 255, 255, 0));
}
     .logo-pill {
      width: auto;
      min-width: 140px;
      max-width: none;
      height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 0 22px 0 18px;
      white-space: nowrap;
      border: 1px solid var(--black-10);
      border-radius: 30px;
      font-family: var(--melange-body);
      font-size: 14px;
      font-weight: 600;
      color: var(--black-100);
    }
     .logo-pill--muted {
      color: var(--black-60);
      font-weight: 500;
    }
    .home-logo-section{
    padding:var(--section-pad-y-sm) 0 var(--section-pad-y);
}
.logo-section{
    max-width:none !important;
}

/* ===== Video section (hidden until hero-video.mp4 is ready) ===== */
     .home-video-section {
      display: none;
      padding: var(--section-pad-y) 0;
     }
     .video-section-header {
      text-align: center;
      margin-bottom: var(--section-header-gap);
     }
     .video-label {
      font-size: 12px;
      letter-spacing: 2px;
      text-transform: none;
      color: var(--melange-highlight);
      font-weight: 600;
      margin-bottom: 12px;
     }
     .video-heading {
      font-family: var(--melange-display);
      font-size: clamp(32px, 5vw, 56px);
      font-weight: 400;
      color: #1b1d1e;
      margin: 0;
      line-height: 1.1;
     }
     .video-wrapper {
      position: relative;
      width: 100%;
      border-radius: 20px;
      overflow: hidden;
      background: #1b1d1e;
      aspect-ratio: 16 / 9;
      box-shadow: 0 32px 80px rgba(0,0,0,0.18);
     }
     .hero-video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
     }
     .video-overlay {
      position: absolute;
      bottom: 24px;
      right: 24px;
     }
     .video-play-btn {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: rgba(255,255,255,0.15);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,0.25);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s;
     }
     .video-play-btn:hover {
      background: rgba(255,255,255,0.25);
     }

/* ===== Shift section ===== */

.home-shift-section{
    padding:var(--section-pad-y-sm) 0;
}

.home-shift-section .container-4{
    max-width:920px;
    margin:0 auto;
}

.home-shift-heading{
    max-width:none;
    margin:0 auto;
    text-align:center!important;
    font-size:clamp(38px,4vw,56px)!important;
    line-height:1.12!important;
    letter-spacing:-1.2px;
}

.home-shift-line{
    max-width:720px;
    margin:28px auto 36px;
    text-align:center;
    font-size:18px;
    line-height:1.8;
    color:var(--black-60);
}

.home-shift-proof-label{
    max-width:720px;
    margin:0 auto;
    padding-top:36px;
    border-top:1px solid var(--black-10);

    text-align:center;
    text-transform: none;
    letter-spacing:.08em;
    font-size:12px;
    font-weight:600;
    color:var(--black-100);
}

.home-shift-section .count-block{
    margin-top:28px;
}

/* ===== Proof / impact stats band (relocated after CAAS to match Figma order) ===== */
.home-proof-section{
    padding:var(--section-pad-y) 0;
}

.home-proof-section .container-4{
    max-width:920px;
    margin:0 auto;
}

.home-proof-section .home-shift-proof-label{
    border-top:0;
    padding-top:0;
}

.home-proof-section .count-block{
    margin-top:36px;
}

.count-div{

    display:flex;
    justify-content:center;
    align-items:flex-end;
    gap:4px;

}

.count{

    font-family: var(--melange-display);
    font-size:clamp(72px,6vw,96px);
    line-height:.9;
    letter-spacing:-2px;
    color:var(--black-100);

}

.plus{

    font-family: var(--melange-display);
    font-size:40px;
    line-height:1;
    margin-bottom:10px;
    color:var(--black-100);

}

@media (max-width:991px){

.home-shift-section{

    padding:var(--section-pad-y) 0 var(--section-pad-y-sm);

}

.home-shift-heading{

    font-size:clamp(38px,8vw,52px)!important;

}

.home-shift-line{

    font-size:18px;

}

.home-shift-proof-label{

    margin-top:0;

}

.count{

    font-size:64px;

}

.plus{

    font-size:32px;
    margin-bottom:8px;

}

}

/* ===== About / Positioning section ===== */
   .repurposed-heading-fix,
.repurposed-heading-fix *{
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    color:var(--black-100) !important;
}

.repurposed-heading-fix .span-italic-txt {
  color: var(--melange-highlight) !important;
  -webkit-text-fill-color: var(--melange-highlight) !important;
}

.home-about-section{
    padding:var(--section-pad-y) 0;          /* equal top & bottom */
    display:flex;
    align-items:center;
}

.positioning-wrap{
    max-width:900px;
    margin:0 auto;
    text-align:center;
}

.positioning-wrap h2{
    margin:0;
}

.positioning-line{
    margin:24px auto 0;
    max-width:760px;
    /* FIX: this paragraph only had margin/max-width set, so it fell back to the
       base .descp font-size (16px) with no line-height override — which meant it
       inherited the reset body line-height of 20px (a 1.25 ratio), reading visibly
       tighter than every sibling intro paragraph on the page (home-shift-line,
       network-stat-label, etc. all use ~1.6-1.7). Matched to that same rhythm. */
    font-size:18px;
    line-height:1.7;
}

/* ===== Network / D.A.T.A. section ===== */
      
.home-network-section{
    padding:var(--section-pad-y) 0;
    margin-bottom:0;
}

/* No section rule line — keep a little air above the header */
.home-network-section::before{
    content:none;
    display:none;
}

.home-network-section .container-4{
    max-width:1400px;
    margin:0 auto;
}

/* Split composition (UI Brain): headline + body + figure left, media right —
   one section, no separate intro band / divider above the sphere. */
.network-layout{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(280px, 1fr);
    column-gap:clamp(28px, 4vw, 56px);
    row-gap:32px;
    align-items:center;
    /* No border-top — intro used to sit above this and read as a second section */
}

.network-layout__copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    max-width:560px;
}

/* Headline lives in the split, so allow wrap (global crafting-heading nowrap would clip) */
.home-network-section .network-heading.crafting-heading{
    white-space:normal !important;
    text-align:left !important;
    margin:0 0 16px !important;
    max-width:14ch; /* force “Cultural Voices” onto its own line */
    line-height:1.12 !important;
}

.home-network-section .network-heading .span-txt{
    display:inline-block;
}

.home-network-section .network-intro-line{
    margin:0 0 28px !important;
    max-width:36em;
    text-align:left !important;
    font-size:var(--type-body, 16px) !important;
    line-height:1.65 !important;
    color:rgba(15, 3, 48, 0.78) !important;
}

.network-stat-block{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    margin:0 0 12px;
}

.network-stat{
    font-family: var(--melange-display);
    font-size:clamp(56px, 6vw, 72px);
    line-height:0.9;
    letter-spacing:-0.02em;
    color:var(--melange-highlight);
    margin:0;
}

.network-geo{
    margin:0;
    max-width:28em;
    width:100%;
    font-size:var(--type-body, 16px);
    line-height:1.5;
    color:rgba(15, 3, 48, 0.62);
    white-space:normal;
    overflow-wrap:break-word;
}

.network-stat-label{
    margin:0;
    font-size:var(--type-body, 16px);
    line-height:1.35;
    font-weight:500;
    color:var(--melange-ink);
    white-space:normal;
}

/* —— Network image sphere ——
   Layout height stays capped; visual size grows via scale so the section
   doesn’t get taller when we enlarge the globe. */
.home-network-section,
.home-network-section .container-4,
.network-layout{
    overflow:visible;
}

.network-sphere-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    max-width:100%;
    aspect-ratio:1 / 1;
    height:auto;
    min-height:0;
    max-height:min(520px, 72vw);
    margin:0;
    padding:0;
    overflow:visible;
    background:
      radial-gradient(circle at 50% 50%, rgba(199, 107, 252, 0.08), transparent 64%);
}

.network-sphere{
    position:relative;
    width:100%;
    height:100%;
    max-height:none;
    aspect-ratio:auto;
    margin:0;
    user-select:none;
    touch-action:pan-y;
    cursor:grab;
    perspective:1000px;
    transform:none;
}

.network-sphere.is-dragging{
    cursor:grabbing;
    transform:none;
}

.network-sphere__stage{
    position:relative;
    width:100%;
    height:100%;
    z-index:10;
}

.network-sphere__node{
    position:absolute;
    left:50%;
    top:50%;
    margin:0;
    border:0;
    padding:0;
    background:transparent;
    cursor:pointer;
    border-radius:50%;
    overflow:hidden;
    box-shadow:0 10px 28px rgba(15, 3, 48, 0.18);
    transform:translate(-50%, -50%);
    /* No transform transition — RAF updates every frame; lag made idle look flat */
    transition:box-shadow 0.2s ease-out;
    will-change:transform, opacity, left, top;
    -webkit-tap-highlight-color:transparent;
}

.network-sphere__node img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    /* Portrait assets — bias up so faces stay inside the circle */
    object-position:center 18%;
    pointer-events:none;
}

.network-sphere__node:focus-visible{
    outline:2px solid #6e1eee;
    outline-offset:3px;
}

/* Spotlight modal */
.network-sphere-modal{
    position:fixed;
    inset:0;
    z-index:200;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(15, 3, 48, 0.42);
    animation:networkSphereFadeIn 0.28s ease-out;
}

.network-sphere-modal[hidden]{
    display:none !important;
}

.network-sphere-modal__card{
    position:relative;
    width:min(420px, 100%);
    background:#fff;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 24px 60px rgba(15, 3, 48, 0.28);
    animation:networkSphereScaleIn 0.28s ease-out;
}

.network-sphere-modal__media{
    position:relative;
    aspect-ratio:1 / 1;
    background:#f3f3f5;
}

.network-sphere-modal__media img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 18%;
    display:block;
}

.network-sphere-modal__close{
    position:absolute;
    top:10px;
    right:10px;
    width:36px;
    height:36px;
    border:none;
    border-radius:999px;
    background:rgba(15, 3, 48, 0.55);
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}

.network-sphere-modal__close:hover{
    background:rgba(15, 3, 48, 0.75);
}

.network-sphere-modal__body{
    padding:18px 20px 20px;
}

.network-sphere-modal__title{
    margin:0 0 6px;
    font-family:var(--melange-display);
    font-size:var(--type-title, 22px);
    color:var(--melange-ink);
}

.network-sphere-modal__desc{
    margin:0;
    font-family:var(--melange-body);
    font-size:var(--type-body, 16px);
    line-height:1.5;
    color:rgba(15, 3, 48, 0.72);
}

@keyframes networkSphereFadeIn{
    from{ opacity:0; }
    to{ opacity:1; }
}
@keyframes networkSphereScaleIn{
    from{ transform:scale(0.92); opacity:0; }
    to{ transform:scale(1); opacity:1; }
}

@media (prefers-reduced-motion: reduce){
    .network-sphere-modal,
    .network-sphere-modal__card{
        animation:none;
    }
    .network-sphere__node{
        transition:none;
    }
}

/* Responsive */

@media(max-width:991px){

.network-layout{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
    row-gap:48px;
}

.network-layout__copy{
    align-items:center;
    max-width:640px;
    text-align:center;
    position:relative;
    z-index:2;
    margin-bottom:8px;
    padding-bottom:4px;
}

.home-network-section .network-heading.crafting-heading{
    text-align:center !important;
    max-width:none;
}

.home-network-section .network-intro-line{
    text-align:center !important;
}

.network-stat-block{
    align-items:center;
}

.network-stat{
    font-size:clamp(52px, 12vw, 68px);
}

.network-geo{
    text-align:center;
}

.network-sphere-wrap{
    height:auto;
    min-height:0;
    max-height:min(420px, 90vw);
    margin:16px 0 0;
    justify-content:center;
    aspect-ratio:1 / 1;
    /* Keep orbiting discs inside the media column — no bleed into copy above */
    overflow:hidden;
    padding:6%;
    box-sizing:border-box;
    z-index:1;
}

.network-sphere{
    width:100%;
    height:100%;
    max-height:none;
    transform:none;
}

.network-sphere.is-dragging{
    transform:none;
}

}

@media(max-width:767px){

.network-layout{
    row-gap:56px;
}

.network-layout__copy{
    margin-bottom:12px;
}

.network-sphere-wrap{
    min-height:0;
    max-height:min(340px, 86vw);
    margin:20px 0 0;
    aspect-ratio:1 / 1;
    overflow:hidden;
    padding:8%;
}

.network-sphere{
    width:100%;
    height:100%;
    max-height:none;
    transform:none;
}

.network-sphere.is-dragging{
    transform:none;
}

}

/* ===== Innovation section: heading fix ===== */
      /* This heading reuses .home-heading-h2 for typography only. The original template wires that class AND
         this element's old data-w-id into two separate vendor IX2 animations (a per-character color fade and a
         slide-in), which fire redundantly on the same node and render as overlapping/ghosted text. Force the
         final visible state directly so nothing tries to animate it. */
      .builtfor-heading-fix,
      .builtfor-heading-fix * {
       opacity: 1 !important;
       visibility: visible !important;
       transform: none !important;
       color: var(--black-100) !important;
      }

      .builtfor-heading-fix .span-txt {
       color: var(--melange-highlight) !important;
       -webkit-text-fill-color: var(--melange-highlight) !important;
      }

      .innovation-heading-wrap {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: var(--section-title-gap);
       max-width: 920px;
       margin: 0 auto var(--section-header-gap);
       text-align: center;
      }

      .innovation-heading-wrap .home-heading-h2 {
       max-width: none;
       text-align: center;
      }

      .builtfor-sub {
       margin: 0;
       max-width: 100%;
       color: var(--black-60);
       font-size: 16px;
       line-height: 1.5;
       font-family: var(--melange-body);
       text-align: center;
       white-space: nowrap;
      }
      @media (max-width: 767px) {
       .builtfor-sub {
        white-space: normal;
       }
      }

/* ===== Innovation section: layout ===== */
     /* .home-innovation-section has no padding-top in the original stylesheet at all — it relied on
        whatever section preceded it for spacing. Add it explicitly so this section doesn't sit flush
        against whatever comes before it. */
     .home-innovation-section{
 padding:var(--section-pad-y) 0;
}
     /* .innovation-item is flex-column with justify-content:space-between, designed for exactly
        2 children (icon + label) in the original template. Adding a 3rd child (the description)
        meant space-between pushed the heading to the vertical middle and the description to the
        very bottom of each tile, with uneven gaps. Override to flex-start so all 3 stack naturally
        from the top, with any leftover height (from align-items:stretch matching the tallest tile)
        simply remaining as quiet space at the bottom. */
     .home-innovation-section .innovation-item {
      justify-content: flex-start;
      gap: 16px;
     }
     .builtfor-descp {
      color: var(--black-60);
      font-size: 14px;
      line-height: 1.5;
      margin-top: 0;
     }
.home-innovation-section .innovation-heading-wrap {
  margin-bottom: 0;
}

     .innovation-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:24px;
    margin-top: 0;
}

@media(max-width:991px){

.innovation-grid{
    grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:767px){

.innovation-grid{
    grid-template-columns:1fr;
}

}
.home-innovation-section .container-5{
    padding-top:0 !important;
    padding-bottom:0 !important;
    min-height:auto !important;
    /* One content column — grid + CTA share the same edges */
    max-width: 1400px !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    box-sizing: border-box !important;
}

/* Kill shared max-width:1272px + flex-start on the grid — it left-aligned a
   narrower card row while .call-to-action spanned the full container. */
.home-innovation-section .innovation-wrapper,
.home-innovation-section .innovation-grid {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}
.home-innovation-section .innovation-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  justify-content: stretch !important;
}
.home-innovation-section .call-to-action {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* Shared .heading-25 { max-width: 115px } forced Intelligence-Led / Approval-Savvy
   onto two lines — clear it so white-space: nowrap can hold. */
.home-innovation-section h3.heading-25,
.home-innovation-section .heading-25 {
  max-width: none !important;
  white-space: nowrap !important;
}

/* ===== Audiences section: image + text cards ===== */
.home-audiences-section .audiences-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px;
  width: 100% !important;
  max-width: none !important;
  margin-top: 0;
  box-sizing: border-box !important;
  align-items: stretch;
}
.home-audiences-section .audiences-card {
  margin: 0;
  padding: 20px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(57, 16, 123, 0.08);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  box-sizing: border-box;
}
.home-audiences-section .audiences-card:nth-child(1) {
  background-color: hsla(271.3761467889908, 76.22%, 71.96%, 0.20);
}
.home-audiences-section .audiences-card:nth-child(2) {
  background-color: hsla(350, 83.08%, 74.51%, 0.20);
}
.home-audiences-section .audiences-card:nth-child(3) {
  background-color: hsla(211.04895104895104, 100.00%, 71.96%, 0.20);
}
.home-audiences-section .audiences-card:nth-child(4) {
  background-color: hsla(28.211920529801322, 100.00%, 70.39%, 0.20);
}
.home-audiences-section .audiences-card-media {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(57, 16, 123, 0.06);
}
.home-audiences-section .audiences-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-audiences-section .audiences-card .heading-25 {
  max-width: none !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  margin: 0;
}
.home-audiences-section .audiences-card .builtfor-descp {
  margin: 0;
}
@media (max-width: 991px) {
  .home-audiences-section .audiences-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 767px) {
  .home-audiences-section .audiences-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ===== Our Work carousel ===== */
    .repurposed-heading-fix2,
.repurposed-heading-fix2 *{
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    color:var(--black-100) !important;
}

.repurposed-heading-fix2 .span-italic-txt,
.repurposed-heading-fix2 .span-txt {
  color: var(--melange-highlight) !important;
  -webkit-text-fill-color: var(--melange-highlight) !important;
}

/* ---------- Section ---------- */

.home-our-work-section{
    padding:var(--section-pad-y-lg) 0;
}

/* FIX: this rule previously targeted the bare `.container-6` class with no !important, so it was
   silently losing to the "GLOBAL LAYOUT SYSTEM" block's `.container-6{ max-width:1400px !important;
   padding-left:40px !important; padding-right:40px !important; }` — max-width, padding-left, AND
   padding-right were all being overridden, not just max-width. Every sibling section in this file that
   needs to override the global container rule already scopes to its own section class (see
   `.home-shift-section .container-4`, `.home-network-section .container-4`,
   `.home-innovation-section .container-5` above) — this one didn't, and it's the only one whose
   override values actually differ from the global ones, which is why the missing scoping/!important
   went unnoticed until now. Brought in line with that pattern, with !important added to each property
   that the global rule also marks !important. */
/* FIX #2 (July 2026): the rule below originally gave this container a huge calculated
   padding-left (matching the centered 1400px column — e.g. ~280px on a 1920px-wide screen)
   paired with padding-right:0, as a deliberate "bleed to the true right edge" carousel design.
   In practice this reads as broken, not intentional: the whole track sits inset ~280px on the
   left then runs flush to the viewport edge on the right, at every scroll position — not just
   the last card. Replaced with the same symmetric gutter every other section on this page uses
   (40px desktop / 24px ≤991px), so this section's alignment matches the rest of the page instead
   of standing out. The .div-block-214 padding-right:40px/24px added in the previous fix is
   harmless now (it just adds a little extra trailing space after the last card) and doesn't need
   to be removed. */
.home-our-work-section .container-6{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
}

@media(max-width:991px){

.home-our-work-section .container-6{
    padding-left:24px !important;
    padding-right:24px !important;
}

}

/* ---------- Heading ---------- */

.div-block-215{
    display:flex;
    flex-direction:column;
    gap:0;
    width:100%;
    /* Visible so carousel side nav isn't clipped; track itself scrolls */
    overflow: visible;
}

/* ---------- Horizontal gallery — autoplay + trackpad + side nav overlays ---------- */
.work-carousel {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow: visible;
}

.home-our-work-section {
  overflow: visible;
}

/* Quiet by default; clearer on carousel hover / button focus so they stay findable */
.work-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(27, 29, 30, 0.28);
  box-shadow: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0.35;
  transition: background-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease,
    border-color 0.2s ease;
}

.work-carousel:hover .work-carousel-nav,
.work-carousel:focus-within .work-carousel-nav {
  opacity: 0.72;
}

.work-carousel-nav:hover,
.work-carousel-nav:focus-visible {
  opacity: 1 !important;
  background: rgba(57, 16, 123, 0.55);
  border-color: rgba(255, 255, 255, 0.55);
  transform: translateY(-50%) scale(1.06);
}

.work-carousel-nav:active {
  transform: translateY(-50%) scale(0.97);
}

.work-carousel-nav--prev {
  left: 6px;
}

.work-carousel-nav--next {
  right: 6px;
}

.work-carousel-nav svg {
  width: 16px;
  height: 16px;
}

.div-block-214{
  --work-card-gap: 24px;
  /* Equal end gutters so 3 cards sit fully in frame, visually balanced */
  --work-side-pad: clamp(40px, 3.5vw, 56px);

display:flex !important;
flex-direction:row !important;
flex-wrap:nowrap !important;

gap: var(--work-card-gap);

overflow-x:auto !important;
overflow-y:hidden;

scrollbar-width:none;

-webkit-overflow-scrolling:touch;

scroll-snap-type:none;

scroll-behavior:auto;
scroll-padding-inline: var(--work-side-pad);

/* Allow vertical page scroll over the track; horizontal is handled in JS */
touch-action: pan-x pan-y;
cursor: default;
user-select: none;
-webkit-user-select: none;

width:100% !important;
min-width:0 !important;

padding: 0 var(--work-side-pad) 20px;
box-sizing:border-box;
  justify-content:flex-start !important;
    align-items:stretch !important;

}

.div-block-214::-webkit-scrollbar{
    display:none;
}

@media (max-width: 767px) {
  .work-carousel-nav {
    width: 44px;
    height: 44px;
    opacity: 0.65;
  }
  .work-carousel-nav svg {
    width: 14px;
    height: 14px;
  }
}

@media (hover: none) {
  /* Touch: keep a light persistent cue since there's no hover reveal */
  .work-carousel-nav {
    opacity: 0.55;
  }
}

/* ---------- Cards ---------- */

.card-1,
.card-2,
.card-3,
.card-4,
.card-5,
.card-6,
.card-7,
.card-8,
.card-9,
.card-10{

    flex:0 0 430px !important;

    display:flex !important;
    flex-direction:column;

    scroll-snap-align:start;

    transition:.35s ease;

    /* FIX: defensive safety net — in case any card in this carousel still has an unknown/hidden IX2
       pin binding, force position:relative + transform:none so a GSAP pin-spacer (position:fixed) or
       stray transform can't pull a card out of this carousel's flex flow. !important is required to
       beat inline styles GSAP would otherwise set directly on the element. */
    position:relative !important;
    transform:none !important;

}

.small-card{

    display:flex;
    flex-direction:column;
    flex:1;

}

.div-block-196{

    position:relative;
    height:220px;

    display:flex;
    align-items:center;
    justify-content:center;

}

.work-card-placeholder{

    width:140px;
    height:140px;

    border-radius:24px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:linear-gradient(135deg,#1b1d1e,#3a3d40);

    color:#fff;

    font-family: var(--melange-display);;
    font-size:46px;

}

.div-block-196 img.avatar{

    max-width:100%;
    max-height:100%;

    width:auto;
    height:auto;

    object-fit:contain;

}

.div-block-197{

    position:absolute;
    top:0;
    right:0;

}

.heading-7{

    margin-top:26px;
    line-height:1.35;

}

.work-card-description{

    margin-top:16px;
    margin-bottom:28px;

    font-size:15px;
    line-height:1.7;

    color:var(--black-60);

}

.chips{

    margin-top:auto;

    display:flex;
    flex-wrap:wrap;
    gap:10px;

}

.link-block-2{

    white-space:nowrap;

}

/* ---------- Touch: allow horizontal swipe/drag on the work track ---------- */
@media (hover:none) and (pointer:coarse){
    .div-block-214{
        scroll-snap-type: none !important;
        overflow-x: auto !important;
        touch-action: pan-x pan-y !important;
        cursor: grab;
    }
}

/* ---------- Mobile ---------- */

/* Side pads / card widths for .div-block-214 are set by the work-carousel
   rules (3-up / 2-up / 1-up). Older 991px asymmetric padding + 88vw card
   widths were removed so three cards stay fully visible and balanced. */

/* ===== Testimonial Stagger Section ===== */
/* ===== Testimonial Stagger Section ===== */
.home-testimonial-stagger-section{
    padding:var(--section-pad-y) 0;
    background:#ffffff;
    overflow:hidden;
}

/* Full-width container — stage bleeds edge to edge */
.testimonial-stagger-container{
    width:100%;
    max-width:100%;
    margin:0;
    padding:0;
}

/* Header stays aligned with the page grid */
.testimonial-stagger-header{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2;
    padding: 0 40px;
    margin-bottom: var(--section-header-gap);
}

.testimonial-heading-h2{
    margin: 0;
    line-height: 1.08;
}

/* ---------- Stage (cards container) — spans full viewport ---------- */
.testimonial-stagger-stage{
    position:relative;
    width:100%;
    /* Room for 365px card + mild center lift; cards sit high via JS anchor */
    height:500px;
    overflow:hidden;
}

/* ---------- Cards ---------- */
.stagger-card{
    position:absolute;
    left:50%;
    top:50%;
    cursor:pointer;
    border:2px solid var(--black-10);
    border-radius:16px;
    padding:32px;
    transition:transform .6s cubic-bezier(.22,1,.36,1),
                opacity .6s cubic-bezier(.22,1,.36,1),
                background .6s cubic-bezier(.22,1,.36,1),
                border-color .6s cubic-bezier(.22,1,.36,1),
                box-shadow .6s cubic-bezier(.22,1,.36,1);
    display:flex;
    flex-direction:column;
    opacity:0;
    will-change:transform;
    overflow:hidden;
    box-sizing:border-box;

    /* FIX: card had no explicit size, so translateX math below (which depends on card
       width) had nothing to reference, and there was no fallback box to even see.
       Matches the React reference's cardSize values (365px desktop / 290px ≤639px). */
    width:365px;
    height:365px;

    /* FIX: this was the actual bug — no transform was ever applied based on a card's
       distance from center, so every card rendered stacked exactly on top of the next
       at dead center (only distinguishable by opacity/z-index from .is-center/.is-away).
       --position must be set inline per card by JS as an integer: 0 for the center card,
       -1/+1 for its immediate neighbors, -2/+2 for the next pair out, etc. — mirroring
       the `position` prop in the original React component. If your JS currently only
       toggles .is-center/.is-away classes without setting --position, it needs a small
       update (see note below the CSS) or this transform has nothing to act on and every
       card will sit at center with --position defaulting to 0. */
    --position: 0;
    transform:
        translate(-50%, -50%)
        translateX(calc(243.33px * var(--position)))
        translateY(var(--stagger-y, 0px))
        rotate(var(--stagger-rot, 0deg));
}

/* FIX: pure-CSS approximation of the reference's `position % 2` alternating tilt/lift
   (odd positions tilt +2.5deg and drop 15px, even non-zero positions tilt -2.5deg and
   lift 15px). CSS can't do modulo, so this is done with nth-of-type parity as a stand-in
   — works correctly as long as cards are rendered in the DOM in strict left-to-right
   stage order after each move (which the original component's array-rotation approach
   guarantees). If your JS instead just re-orders classes without re-ordering the DOM
   nodes, switch to inline --stagger-y/--stagger-rot custom properties set alongside
   --position instead of relying on this selector. */
.stagger-card:nth-of-type(odd){
    --stagger-y: 10px;
    --stagger-rot: 1.5deg;
}
.stagger-card:nth-of-type(even){
    --stagger-y: -10px;
    --stagger-rot: -1.5deg;
}

.stagger-card.is-center{
    z-index:10;
    background:#6e1eee;
    border-color: var(--melange-highlight);
    opacity:1;
    --stagger-y: 0px;
    --stagger-rot: 0deg;
}

.stagger-card.is-away{
    z-index:1;
    background:#fff;
    border-color:var(--black-10);
    opacity:.85;
}

.stagger-card:hover.is-away{
    border-color: var(--melange-highlight);
    opacity:1;
}

/* Card image */
.stagger-card-img{
    width:48px;
    height:56px;
    object-fit:cover;
    object-position:center top;
    margin-bottom:20px;
    box-shadow:3px 3px 0px #fff;
    border-radius:4px;
}

.stagger-card.is-center .stagger-card-img{
    box-shadow:3px 3px 0px rgba(255,255,255,.2);
}

/* Card quote — flex child; clamps so it never runs under attribution */
.stagger-card-quote{
    font-family: var(--melange-display);
    font-size:clamp(15px,1.8vw,18px);
    font-weight:400;
    line-height:1.35;
    margin:0 0 12px;
    flex:1 1 auto;
    min-height:0;
    overflow:hidden;
    color:var(--black-100);
    text-align:left;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:7;
}

.stagger-card.is-center .stagger-card-quote{
    color:#fff;
}

/* Card attribution — in normal flow under the quote (not absolute overlay) */
.stagger-card-attr{
    position:static;
    flex:0 0 auto;
    margin:0;
    margin-top:auto;
    padding-top:4px;
    font-size:13px;
    font-style:italic;
    color:var(--black-60);
    line-height:1.35;
    white-space:normal;
    overflow:hidden;
    text-overflow:unset;
    text-align:left;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
}

.stagger-card.is-center .stagger-card-attr{
    color:rgba(255,255,255,.8);
}

/* ---------- Controls — stay aligned with page grid ---------- */
.testimonial-stagger-controls{
    display:flex;
    justify-content:center;
    gap:16px;
    margin-top:16px;
    margin-bottom:8px;
    padding:0 40px;
}

.stagger-nav-btn{
    width:56px;
    height:56px;
    border:2px solid var(--black-10);
    background:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:all .25s ease;
    color:var(--black-100);
}

.stagger-nav-btn:hover{
    background:#6e1eee;
    border-color: var(--melange-highlight);
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(110,30,238,.25);
}

.stagger-nav-btn:active{
    transform:translateY(0);
}

.stagger-nav-btn:focus-visible{
    outline:2px solid #6e1eee;
    outline-offset:2px;
}

.stagger-nav-btn svg{
    width:22px;
    height:22px;
}

/* ---------- Responsive ---------- */
@media(max-width:900px){
    .testimonial-stagger-header{
        padding:0 24px;
        margin-bottom: 20px;
    }
    .testimonial-stagger-stage{
        height:460px;
    }
    .stagger-card-img{
        width:40px;
        height:48px;
        margin-bottom:16px;
    }
    .testimonial-stagger-controls{
        padding:0 24px;
    }
}

@media(max-width:639px){
    .testimonial-stagger-header{
        padding:0 20px 8px;
        margin-bottom: 12px;
    }
    .testimonial-stagger-stage{
        height:auto;
        min-height:440px;
        overflow:hidden;
    }
    .stagger-card{
        padding:18px 16px 16px;
        width:min(86vw, 300px);
        height:auto !important;
        min-height:min(110vw, 360px);
        max-height:none;
    }
    .stagger-card-quote{
        -webkit-line-clamp:9;
        font-size:14px;
        line-height:1.4;
        overflow:visible;
        display:block;
        -webkit-box-orient:initial;
    }
    .stagger-card-attr{
        -webkit-line-clamp:4;
        margin-top:10px;
    }
}

/* ===== Infrastructure section ===== */

.home-infra-section{
    padding:var(--section-pad-y) 0;
}

.infra-heading{
    font-size:36px;
    text-align:center;
    margin-bottom:var(--section-gap-md);
}

.infra-row{
    display:flex;
    align-items:flex-start;
    gap:32px;
    margin-bottom:40px;
}

.infra-row:last-child{
    margin-bottom:0;
}

.infra-row-label{
    width:220px;
    flex-shrink:0;

    font-size:13px;
    font-weight:600;
    letter-spacing:.6px;
    text-transform: none;

    color:var(--black-60);

    padding-top:18px;
}

.infra-marquee{
    flex:1;
    overflow:hidden;
    position:relative;
    -webkit-mask-image:none;
    mask-image:none;
}

.infra-track{
    display:flex;
    align-items:center;
    gap:0;
    width:max-content;
    flex-wrap:nowrap;
}

.infra-track-logos {
    gap: 48px;
}

.home-infra-section .infra-logo-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: auto;
    height: 56px;
    padding: 0;
    box-sizing: border-box;
}

.home-infra-section .infra-marquee-logo {
    display: block;
    height: 40px;
    width: auto;
    max-width: 160px;
    max-height: 40px;
    object-fit: contain;
    object-position: center;
    opacity: 0.92;
    filter: none;
    transition: opacity 0.2s ease;
}

.home-infra-section .infra-marquee-logo:hover {
    opacity: 1;
}

.home-infra-section .infra-marquee-logo:not([src]),
.home-infra-section .infra-marquee-logo[src=""] {
    display: none;
}

/* Square / compact marks that read small at 40px */
.home-infra-section .infra-logo-item--lg {
    width: auto;
    height: 72px;
    padding: 0;
}
.home-infra-section .infra-marquee-logo--lg {
    height: 56px !important;
    max-height: 56px !important;
    max-width: 160px !important;
    width: auto !important;
}

.infra-pill{

    display:flex;
    align-items:center;
    gap:12px;

    padding:10px 18px;

    border:1px solid var(--black-10);
    border-radius:999px;

    background:#fff;

    color:var(--black-100);
    font-size:14px;
    font-weight:500;

    transition:.25s ease;

    white-space:nowrap;
}

.infra-pill:hover{

    transform:translateY(-2px);

    border-color:rgba(27,29,30,.2);

    box-shadow:0 10px 30px rgba(0,0,0,.04);

}

.infra-pill img,
.infra-pill .pill-logo{

    height:18px;
    width:auto;

    max-width:30px;

    object-fit:contain;

    flex-shrink:0;

}

.logo-wide img,
.logo-wide .pill-logo{

    max-width:44px;

}
.infra-marquee-left .infra-track{
    animation:none;
    transform:translate3d(0,0,0);
}

.infra-marquee-right .infra-track{
    animation:none;
    transform:translate3d(0,0,0);
}

/* Marquee is display-only — touch must not pause/glitch the layer (esp. iOS) */
.home-infra-section .infra-marquee,
.home-infra-section .infra-track,
.home-infra-section .infra-logo-item,
.home-infra-section .infra-marquee-logo {
    pointer-events:none !important;
    -webkit-user-select:none;
    user-select:none;
    touch-action:none;
}

@keyframes infra-scroll-left{
    from{
        transform:translate3d(0,0,0);
    }
    to{
        transform:translate3d(-50%,0,0);
    }
}

@keyframes infra-scroll-right{
    from{
        transform:translate3d(-50%,0,0);
    }
    to{
        transform:translate3d(0,0,0);
    }
}

@media(max-width:991px){

.infra-row{

    flex-direction:column;

    gap:18px;

}

.infra-row-label{

    width:100%;

    padding-top:0;

}

}

@media(max-width:767px){

.infra-heading{

    font-size:30px;

}

.home-infra-section .infra-logo-item {
    width: auto;
    height: 48px;
    padding: 0;
}

.home-infra-section .infra-marquee-logo {
    height: 32px;
    max-height: 32px;
    max-width: 128px;
}

.home-infra-section .infra-logo-item--lg {
    width: auto;
    height: 60px;
    padding: 0;
}
.home-infra-section .infra-marquee-logo--lg {
    height: 48px !important;
    max-height: 48px !important;
    max-width: 136px !important;
}

.infra-track-logos {
    gap: 32px;
}

}

/* ===== Pricing / Report cards section ===== */
     .report-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: stretch;
      align-items: stretch;
      gap: 28px;
      margin-top: 0;
      width: 100%;
     }
     /* Full-width report card — badge → title → body → KPIs → list → footer */
     .report-card {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      flex: 1 1 100%;
      width: 100%;
      max-width: 100%;
      margin: 0;
      padding: 40px !important;
      /* 24px header→stats (tighter), 32px elsewhere — KPI is the mid moment */
      gap: 32px;
      font-family: var(--melange-body);
     }
     .report-grid:has(
       .report-card:not(.report-card--dormant):not([hidden])
       ~ .report-card:not(.report-card--dormant):not([hidden])
     ) .report-card:not(.report-card--dormant):not([hidden]) {
      flex: 1 1 calc(50% - 14px);
      max-width: calc(50% - 14px);
     }
     .report-card__top {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      margin-bottom: -8px; /* net ~24px to stats with card gap 32 */
      text-align: center;
     }
     .report-card .plan-bedge {
      display: flex;
      justify-content: center;
     }
     .report-card__title {
      font-family: var(--melange-display) !important;
      font-size: clamp(24px, 2.6vw, 36px) !important;
      line-height: 1.15 !important;
      margin: 0 !important;
      text-align: center;
      max-width: none !important;
      white-space: nowrap !important;
     }
     .report-card__descp {
      margin: 0 auto !important;
      text-align: center;
      line-height: 1.5 !important;
      color: var(--black-60);
      font-family: var(--melange-body) !important;
      font-size: var(--type-body, 16px) !important;
      max-width: none;
     }
     .report-card__descp--muted {
      color: #1b1d1e66 !important;
     }
     /* KPI strip — loud mid-card moment */
     .report-card__stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      width: 100%;
      margin: 0;
      padding: 28px 8px;
      text-align: center;
      border-radius: 16px;
      background: rgba(110, 30, 238, 0.04);
     }
     .report-stat {
      min-width: 0;
      padding: 0 24px;
     }
     .report-stat + .report-stat {
      border-left: 1px solid rgba(57, 16, 123, 0.12);
     }
     .report-card__features {
      border-left: none;
      padding: 0;
      align-items: stretch;
      width: 100%;
      max-width: none;
      margin: 0;
     }
     .report-card__features .feature-txt {
      text-align: left;
      font-family: var(--melange-display) !important;
      font-weight: 600 !important;
      font-size: var(--type-body, 16px) !important;
      margin-bottom: 16px;
      color: var(--melange-ink) !important;
     }
     /* 3-col only on wide desktops; 2-col through ~1200px */
     .report-card__features .feature-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px 32px;
     }
     @media (min-width: 1200px) {
      .report-card__features .feature-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
     }
     .report-card__features .list-item-8 {
      height: auto;
      align-items: flex-start;
      gap: 10px;
     }
     .report-card__features .image-4 {
      width: 16px;
      height: 16px;
      flex: 0 0 16px;
      margin-top: 3px;
      filter: brightness(0) saturate(100%) invert(18%) sepia(90%) saturate(4500%) hue-rotate(258deg) brightness(95%);
     }
     .report-card__features .text-block-28 {
      text-align: left;
      font-family: var(--melange-body) !important;
      font-size: var(--type-body, 16px) !important;
      line-height: 1.4 !important;
      color: var(--melange-ink) !important;
     }
     /* Footer: meta left + CTA right — one baseline */
     .report-card__footer {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 16px 24px;
      margin: 0;
      padding-top: 24px;
      border-top: 1px solid rgba(57, 16, 123, 0.12);
     }
     .report-card__meta {
      margin: 0;
      text-align: left;
      color: rgba(15, 3, 48, 0.7);
      font-family: var(--melange-body) !important;
      font-size: var(--type-body, 16px) !important;
      line-height: 1.35 !important;
     }
     .report-card__cta.let-s-collaborate {
      flex-shrink: 0;
      white-space: nowrap;
      margin: 0 !important;
     }
     @media (max-width: 767px) {
      .report-card {
        padding: 28px 20px !important;
        gap: 24px;
      }
      .report-card__top {
        margin-bottom: 0;
      }
      .report-card__stats {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 8px 16px;
      }
      .report-stat {
        padding: 16px 0;
      }
      .report-stat + .report-stat {
        border-left: none;
        border-top: 1px solid rgba(57, 16, 123, 0.12);
      }
      .report-card__features .feature-list {
        grid-template-columns: 1fr;
      }
      .report-card__footer {
        flex-direction: column;
        align-items: flex-start;
      }
     }
     .badge--muted {
      background-color: #1b1d1e0a;
      color: #1b1d1e66;
      border: 1px solid #1b1d1e11;
     }
     .report-card--placeholder {
      background-color: transparent;
      border: 1.5px dashed #1b1d1e26;
     }
     /* Kept in DOM for Issue 02 — remove class + hidden attr to publish */
     .report-card--dormant,
     .report-card--dormant[hidden] {
      display: none !important;
     }
     .report-card__title--muted {
      color: #1b1d1e44 !important;
     }
     .report-card__placeholder-spacer {
      flex: 1;
      min-height: 24px;
     }
     .report-card__notify {
      margin-top: 28px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      color: var(--melange-highlight);
      font-size: 14px;
      font-weight: 500;
      text-decoration: none;
     }
     .report-card__notify-arrow {
      transition: transform 0.2s;
     }
     .report-card__notify:hover .report-card__notify-arrow {
      transform: translateX(3px);
     }
     @media (max-width: 479px) {
      .report-grid {
       margin-top: 24px;
      }
      .report-grid:has(
        .report-card:not(.report-card--dormant):not([hidden])
        ~ .report-card:not(.report-card--dormant):not([hidden])
      ) .report-card:not(.report-card--dormant):not([hidden]) {
        flex: 1 1 100%;
        max-width: 100%;
      }
     }
     .section-7{
    padding:var(--section-pad-y) 0;
}

/* ===== Leadership section ===== */
     .home-leadership-section{
      padding:var(--section-pad-y) 0;
     }
     .leadership-grid{
      display:flex;
      gap:40px;
      flex-wrap:wrap;
      justify-content:center;
      margin-top:36px;
     }
     .leader-card{
      width:220px;
      text-align:center;
     }
     .leader-blob{
      position:relative;
      width:180px;
      height:180px;
      margin:0 auto 24px;
      border-radius:42% 58% 65% 35% / 45% 40% 60% 55%;
      overflow:hidden;
      display:flex;
      align-items:flex-end;
      justify-content:center;
     }
     .leader-blob--purple{ background:linear-gradient(135deg,#4928fd,#2d1a99); }
     .leader-blob--orange{ background:linear-gradient(135deg,#ff8a4c,#e85d2f); }
     .leader-blob--yellow{ background:linear-gradient(135deg,#ffd166,#f2a900); }
     .leader-blob--cyan{ background:linear-gradient(135deg,#4cd1ff,#1f9fd9); }
     .leader-photo{
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:top center;
     }
     .leader-name{
      font-family: var(--melange-display);;
      font-size:20px;
      font-weight:400;
      margin:0 0 4px;
      color:var(--black-100);
     }
     .leader-role{
      font-size:13px;
      color:var(--black-60);
      margin:0 0 10px;
     }
     .leader-link{
      font-size:13px;
      color: var(--melange-highlight);
      text-decoration:underline;
     }

/* ===== Founder section ===== */
     .home-founder-section {
      padding-top: 80px;
      padding-bottom: var(--section-pad-y);
     }
     .founder-line {
      font-size: 16px;
      line-height: 1.5;
      margin-top: 10px;
     }
     .founder-grid{

    display:grid;

    grid-template-columns:360px 1fr;

    gap:var(--section-gap);

    align-items:center;

}
    .founder-portrait{
    width:100%;
    display:flex;
    justify-content:center;
}

.founder-image{

    width:320px;
    height:400px;

    object-fit:cover;

    border-radius:24px;

    display:block;

    box-shadow:0 20px 60px rgba(0,0,0,.08);

}
     @media (max-width:767px){

.founder-grid{

    grid-template-columns:1fr;

    gap:40px;

    text-align:center;

}

.founder-copy h2{

    text-align:center!important;

}

.founder-image{

    width:260px;

    height:325px;

}

}
     .section-8{
    padding:var(--section-pad-y) 0;
}

/* ===== Lead form section (layout only — Zoho form internals stay in css/form.css) ===== */
.home-leadform-section .container-6{
    width:min(94vw,1480px);
}    
.home-leadform-section {
      padding-top: 80px;
      padding-bottom: var(--section-pad-y);
     }
     .leadform-grid {
    display:grid;
    grid-template-columns: 3fr 2fr;
    gap:var(--section-gap);
    align-items:stretch;
}
     .leadform-offer {
      text-align: left;
      display: flex;
      flex-direction: column;
      height: 100%;
      min-height: 0;
     }
     .leadform-heading {
      text-align: left !important;
      line-height: 1.2 !important;
      font-family: var(--melange-display) !important;
     }
     .leadform-heading__l1 {
      white-space: nowrap;
     }
     .leadform-copy {
      color: var(--black-60);
      font-size: var(--type-body, 16px);
      font-family: var(--melange-body) !important;
      line-height: 1.7;
      margin: 20px 0 0;
      text-align: left;
     }
     .leadform-whatyouget {
      margin-top: 14px;
      display: flex;
      flex-direction: column;
      gap: 0.45em;
      flex: 1 1 auto;
      justify-content: flex-start;
     }
     .leadform-whatyouget-title {
      color: var(--black-100);
      font-weight: 600;
      font-size: var(--type-body, 16px);
      font-family: var(--melange-body) !important;
      margin-top: 24px;
      margin-bottom: 0;
      padding-top: 20px;
      border-top: 1px solid var(--black-10);
      text-align: left;
     }
     .leadform-bullet {
      color: var(--black-60);
      font-size: var(--type-body, 16px);
      font-family: var(--melange-body) !important;
      line-height: 1.7;
      padding-left: 18px;
      position: relative;
      margin-bottom: 0;
      text-align: left;
     }
     .leadform-bullet::before {
      content: "•";
      position: absolute;
      left: 0;
      color: var(--black-60);
     }
     .leadform-contact-line {
      margin-top: auto;
      padding-top: 24px;
      color: var(--black-60);
      font-size: var(--type-body, 16px);
      font-family: var(--melange-body) !important;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.35em 0.75em;
      text-align: left;
     }
     .leadform-contact-item {
      white-space: nowrap;
     }
     .leadform-contact-sep {
      color: var(--black-60);
      opacity: 0.65;
     }
     .leadform-card {
      width:100%;
    max-width:none;
    position:relative;
    top:0;
    align-self: start;
    height: auto;
     }
     .leadform-card .zf-frmTitle,
     .leadform-card .zf-tempHeadContBdr .zf-frmTitle {
      text-align: center !important;
      font-family: var(--melange-display) !important;
     }
     .leadform-card .zf-tempHeadContBdr {
      text-align: center;
     }
     .leadform-card .zf-frmDesc {
      font-family: var(--melange-display) !important;
     }
     .leadform-card .zf-labelName,
     .leadform-card .zf-checkChoice,
     .leadform-card .zf-instruction,
     .leadform-card .zf-tempContDiv input,
     .leadform-card .zf-tempContDiv textarea,
     .leadform-card .zf-tempContDiv select {
      font-family: var(--melange-body) !important;
      text-align: left;
     }
     .leadform-card-title {
      font-family: var(--melange-display);
      font-size: var(--type-title, 22px);
      color: var(--black-100);
      margin: 0 0 20px;
     }
     .leadform-goals-label {
      font-size: var(--type-body, 16px);
      font-weight: 600;
      color: var(--black-100);
      margin-bottom: 12px;
     }
     .leadform-checkbox-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
     }
     .leadform-checkbox {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: var(--type-body, 16px);
      color: var(--black-100);
      cursor: pointer;
     }
     .leadform-checkbox input {
      margin-top: 3px;
      width: 16px;
      height: 16px;
      accent-color: var(--black-100);
      flex-shrink: 0;
     }
     /* the template's .contact_message-field sets light-gray (#eaeaea) text, nearly invisible on this white card — override for legibility */
     .leadform-card .contact_message-field {
      color: var(--black-100);
     }
    @media (max-width:991px){

    .leadform-grid{
        grid-template-columns:1fr;
        gap:36px;
    }

    .leadform-heading__l1{
        white-space:normal;
    }

}

@media (max-width:767px){

    .leadform-card{
        padding:24px;
    }

}

/* ===== Footer / flex-block-2 responsive grid ===== */
    .flex-block-2 {
     grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    @media (max-width: 767px) {
     .flex-block-2 {
      grid-template-columns: 1fr 1fr;
     }
    }
    @media (max-width: 479px) {
     .flex-block-2 {
      grid-template-columns: 1fr;
     }
    }
    /* =======================================================
   PREMIUM AWARDS MARQUEE
======================================================= */

.home-awards-section{
    position:relative;
    overflow:hidden;
    padding:var(--section-pad-y) 0;
    background:#ffffff;
}

/* Keep the shared section hairline (::before). Soft grid sits on ::after. */
.home-awards-section::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background-image:
        linear-gradient(rgba(0,0,0,.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(0,0,0,.025) 1px,transparent 1px);
    background-size:64px 64px;
    opacity:.18;
    z-index:0;
}
.home-awards-section > * {
    position: relative;
    z-index: 1;
}

.awards-header{
    max-width:960px;
    margin:0 auto var(--section-header-gap);
    text-align:center;
}

.awards-intro{
    margin-top:20px;
    color:var(--black-60);
    font-size:16px;
    line-height:1.8;
    white-space: nowrap;
}
@media (max-width: 991px) {
  .awards-intro {
    white-space: normal;
  }
}

.awards-marquee{
    display:flex;
    flex-direction:column;
    gap:32px;
}

/* Compact award cards inside the marquee */
.home-awards-section .award-card{
    width:360px;
    min-height:268px;
    padding:28px 26px 30px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.home-awards-section .award-accent{
    left:26px;
    right:26px;
}

.home-awards-section .award-icon{
    width:auto;
    min-width:72px;
    max-width:100%;
    height:64px;
    padding:10px 14px;
    border-radius:14px;
    margin-bottom:20px;
    background:#fff;
    border:1px solid rgba(110,30,238,.12);
    box-shadow:0 4px 14px rgba(110,30,238,.06);
    display:flex;
    align-items:center;
    justify-content:center;
}

.home-awards-section .award-icon--dark{
    background:#0a0a0a;
    border-color:rgba(255,255,255,.08);
    box-shadow:0 4px 14px rgba(0,0,0,.18);
}

.home-awards-section .award-icon--wide{
    min-width:168px;
    padding:10px 16px;
}

.home-awards-section .award-icon-img{
    width:auto;
    max-width:148px;
    max-height:44px;
    height:auto;
    object-fit:contain;
    display:block;
}

.home-awards-section .award-icon--wide .award-icon-img{
    max-width:200px;
    max-height:40px;
}

.home-awards-section .award-event{
    font-family:var(--melange-body);
    font-size:14px;
    font-weight:600;
    letter-spacing:.02em;
    color:var(--melange-ink);
    opacity:.92;
    margin:0 0 14px;
}

.home-awards-section .award-card h3{
    font-family:var(--melange-display);
    font-size: var(--type-title, 22px);
    line-height:1.32;
    margin:0;
    color:var(--melange-ink);
    flex:1;
}

.awards-track-left .awards-row{
    animation:awards-left 38s linear infinite;
}

.awards-track{
    overflow:hidden;
    -webkit-mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);
    mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);
}

.awards-row{
    display:flex;
    gap:28px;
    width:max-content;
    will-change:transform;
}

@keyframes awards-left{
    from{transform:translate3d(0,0,0);}
    to{transform:translate3d(-50%,0,0);}
}

@keyframes awards-right{
    from{transform:translate3d(-50%,0,0);}
    to{transform:translate3d(0,0,0);}
}

.award-card{
    width:400px;
    flex:none;
    background:#f3f3f5;
    border:1px solid rgba(57,16,123,.08);
    border-radius:22px;
    padding:34px;
    box-shadow:0 18px 50px rgba(110,30,238,.04);
    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;
    position:relative;
}

/* Award card hover removed — keep resting styles only */

.award-accent,
.home-awards-section .award-accent {
    display: none !important;
}

.award-icon{
    width:46px;
    height:46px;
    border-radius:50%;
    border:1px solid rgba(110,30,238,.1);
    background:linear-gradient(135deg,rgba(250,229,255,.55),rgba(255,255,255,.9));
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:26px;
}

.award-icon-img{
    width:32px;
    height:32px;
    object-fit:contain;
    display:block;
}

.award-card h3{
    font-family: var(--melange-display);;
    font-size: var(--type-title, 22px);
    line-height:1.3;
    margin:0 0 18px;
    color:var(--black-100);
}

.award-org{
    font-family: var(--melange-body);
    font-size:12px;
    letter-spacing:.18em;
    text-transform: none;
    color:var(--black-60);
}

.award-year{
    margin-top:8px;
    margin-bottom:18px;
    font-size:14px;
    color:var(--black-50);
}

.award-card p{
    font-size:15px;
    line-height:1.75;
    color:var(--black-70);
}

@media (max-width:991px){

    .home-awards-section .award-card{
        width:320px;
        min-height:252px;
    }

}

@media (max-width:767px){

    .home-awards-section{
        padding:var(--section-pad-y-sm) 0;
    }

    .home-awards-section .award-card{
        width:300px;
        min-height:240px;
        padding:24px 22px 26px;
    }

    .home-awards-section .award-card h3{
        font-size: var(--type-title, 20px);
    }

    .awards-track-left .awards-row{
        animation-duration:32s;
    }

}


/* --- figma-theme.css --- */
/* ==========================================================================
   Figma design system — FINAL MELANGE WEBSITE (node 126:709)
   Layered on top of the shared stylesheet + custom.css. Scroll/animation hooks untouched.
   ========================================================================== */

:root {
  --melange-ink: #0F0330;
  --melange-highlight: #C76BFC;
  --melange-accent: #6E1EEE;
  --melange-accent-2: #6E1EEE;
  --melange-accent-deep: #49149d;
  --melange-cta-mid: #9a30b9;
  --melange-cta-border: #e797ff;
  --melange-nav-pill: #802af1;
  --melange-wash: #ffffff;
  --melange-wash-2: #ffffff;
  --melange-cream: #ffffff;
  --melange-lilac: #ffffff;
  --melange-display: "Alan Sans", sans-serif;
  --melange-body: "Poppins", sans-serif;
  --melange-italic: "Alan Sans", sans-serif;
  --violet-100: #6E1EEE;
  --violet-20: #6E1EEE33;
  --purple-100: #9a30b9;
  --black-100: #0F0330;
  --black-60: rgba(15, 3, 48, 0.72);
  --black-10: rgba(15, 3, 48, 0.12);
  --section-pad-y: 55px;
  --section-pad-y-lg: 55px;
  --section-pad-y-sm: 48px;
  --section-pad-y-xs: 40px;
  /* Header block → body content (cards, grids, marquees) */
  --section-header-gap: 40px;
  /* h2 → supporting line inside a header */
  --section-title-gap: 16px;
  --section-gap: var(--section-header-gap);
  --section-gap-md: var(--section-header-gap);
  --hero-pad-top: 96px;
  --hero-pad-bottom: 48px;
  /* Sticky nav height (JS keeps this exact). Divider aligns to nav bottom on jump. */
  --nav-sticky-offset: 69px;
}

/* —— Type —— */
.body,
body {
  font-family: var(--melange-body);
  color: var(--melange-ink);
  background: #ffffff;
  background-attachment: scroll;
}

.hero-heading-h1,
.crafting-heading,
.home-heading-h2,
.our-work-heading,
.testimonial-heading-h2,
.pricing-heading-h2,
.achevement-heading-h2,
.creative-mind-heading,
.heading-20,
.video-heading,
.infra-heading,
.leadform-heading,
.network-stat,
.count,
.plus,
.report-card__title,
.pricing {
  font-family: var(--melange-display) !important;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.para-txt,
.descp,
.builtfor-descp,
.caas-intro,
.caas-step p,
.divider-with-text,
.trusted-text,
.nav-link-4,
.work-card-description,
.leadform-copy,
.awards-intro,
.network-stat-label,
.network-geo,
.data-filter-title,
.text-block-30,
.text-block-34,
.text-block-35,
.text-block-36,
.text-block-37,
.text-block-38,
.text-block-39,
.plan-descp,
.feature-txt,
.text-block-28 {
  font-family: var(--melange-body) !important;
}

.span-txt,
.hero-italic,
.span-italic-txt,
.text-span-6,
.text-span-9,
.text-span-14,
.text-span-15,
.text-span-16,
.trusted-accent,
.hero-accent,
.hero-report-prompt,
.report-card__notify,
.report-stat-value {
  font-family: var(--melange-display) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  color: var(--melange-highlight) !important;
  -webkit-text-fill-color: var(--melange-highlight) !important;
}

.trusted-accent,
.hero-report-prompt,
.report-card__notify,
.report-stat-value {
  font-family: var(--melange-body) !important;
  font-style: normal !important;
}

.trusted-accent {
  font-family: var(--melange-display) !important;
  font-style: normal !important;
  font-weight: 600 !important;
}

.report-stat-value {
  font-family: var(--melange-display) !important;
  font-style: normal !important;
  font-weight: 600 !important;
}

/* Force-visible heading override from custom.css pins black — reclaim Figma purple */
.pricing-heading-h2,
.pricing-heading-h2 *,
.c2a-title,
.c2a-title *,
.crafting-heading,
.crafting-heading *,
.testimonial-heading-h2,
.testimonial-heading-h2 *,
.home-heading-h2,
.home-heading-h2 *,
.our-work-heading,
.our-work-heading *,
.heading-20,
.heading-20 *,
.achevement-heading-h2,
.achevement-heading-h2 *,
.creative-mind-heading,
.creative-mind-heading *,
.hero-heading-h1,
.hero-heading-h1 * {
  color: var(--melange-ink) !important;
}

.hero-heading-h1 .hero-italic,
.hero-heading-h1 .span-txt,
.hero-heading-h1 .hero-accent,
.crafting-heading .span-italic-txt,
.crafting-heading .span-txt,
.home-heading-h2 .span-txt,
.our-work-heading .span-italic-txt,
.our-work-heading .span-txt,
.pricing-heading-h2 .text-span-6,
.achevement-heading-h2 .text-span-16,
.creative-mind-heading .text-span-14,
.heading-20 .text-span-9,
.video-heading .span-italic-txt,
.trusted-heading .trusted-accent,
.trusted-heading .span-txt,
.testimonial-heading-h2 .span-txt,
.repurposed-heading-fix .span-italic-txt,
.builtfor-heading-fix .span-txt,
.repurposed-heading-fix2 .span-italic-txt,
.repurposed-heading-fix2 .span-txt,
.crafting-heading.caas-heading .caas-cap,
.crafting-heading.caas-heading .caas-cap * {
  color: var(--melange-highlight) !important;
  -webkit-text-fill-color: var(--melange-highlight) !important;
}

/* —— Atmosphere / soft section washes (match Figma R2 / purple rectangles) —— */
.gradient-background {
  /* FIX: without an explicit out-of-flow position, the shared stylesheet's 70vh absolute wash
     (and this sheet’s own `.main > * { position: relative; z-index: 1 }` rule
     later in the file, which beats a bare `.gradient-background { position }`
     on specificity) kept the wash in document flow and pushed the hero ~70vh
     down — a large empty band under the fixed nav. Fixed + inset:0 + z-index:0
     (!important to beat `.main > *`) pins it as a full-viewport backdrop that
     never takes layout space; height:auto cancels the shared stylesheet's 70vh so inset can
     stretch edge-to-edge. */
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: auto !important;
  z-index: 0 !important;
  background: #ffffff !important;
  opacity: 1 !important;
  pointer-events: none;
}

.home-logo-section,
.home-about-section,
.home-network-section,
.home-our-work-section,
.home-infra-section,
.section-7,
.section-8,
.home-our-team-sec {
  background: transparent !important;
}

.home-video-section,
.home-shift-section,
.home-innovation-section,
.home-caas-section,
.home-testimonial-stagger-section,
.home-awards-section,
.home-leadform-section {
  background: #ffffff !important;
}

/* Purple "measured in what moved" stats band — in the Figma layout this sits
   between CAAS and Our Work as its own solid-purple block, while the shift
   narrative above it stays on the pale wash. */
.home-proof-section {
  background: #ffffff !important;
}

.home-infra-section {
  background: #ffffff !important;
}

section:not(:first-of-type)::before {
  background: rgba(15, 3, 48, 0.08);
}

/* Anchor jumps: park the section top (divider) flush under the sticky nav. */
#home,
#about-us,
#services,
#governments,
#work,
#pricing,
#award,
#team,
#faq,
#lead-form {
  scroll-margin-top: var(--nav-sticky-offset);
}

/* Guarantee the shared hairline on every nav destination (nothing may replace ::before) */
#work::before,
#services::before,
#pricing::before,
#award::before,
#team::before,
#lead-form::before,
#faq::before,
#governments::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  width: min(1400px, 92%) !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: rgba(15, 3, 48, 0.08) !important;
  background-image: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* —— Nav: full-width bar (no outer / menu pills); active link keeps its pill —— */
.div-block-47 {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  z-index: 100 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  border-bottom: 1px solid rgba(57, 16, 123, 0.1);
  box-shadow: 0 1px 0 rgba(57, 16, 123, 0.04);
  pointer-events: auto;
}

.div-block-47 .navbar-logo-left,
.div-block-47 .navbar-logo-left-container,
.div-block-47 .navbar-wrapper-3,
.div-block-47 a,
.div-block-47 button {
  pointer-events: auto;
}

.navbar-logo-left {
  border-bottom: none !important;
  width: 100% !important;
}

.navbar-logo-left-container,
.navbar-logo-left-container.shadow-three {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

.navbar-wrapper-3 {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 14px clamp(20px, 4vw, 48px) !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  box-shadow: none !important;
  isolation: isolate;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px;
}

.nav-logo {
  height: 40px !important;
  width: auto !important;
  max-width: 170px;
  object-fit: contain;
  display: block;
}

.navbar-brand-2 {
  padding: 0 !important;
}

/* Remove the nested menu pill shell */
.nav-menu-two-2 {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

.nav-menu-two-2 .list-item-14 {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  gap: 4px !important;
  display: flex !important;
  align-items: center !important;
}

.nav-link-4 {
  color: #1b1d1ecc !important;
  font-weight: 500;
  font-size: 16px;
  font-family: var(--melange-body) !important;
  border-radius: 40px !important;
  background: transparent !important;
  padding: 10px 14px !important;
  border: 1px solid transparent;
  transition: background-color 0.22s ease, color 0.22s ease, padding 0.22s ease, border-color 0.22s ease;
}

.nav-link-4:hover {
  color: var(--melange-ink) !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* Keep active-state pill only */
.nav-menu-two-2 .list-item-14 .nav-link-4.is-active {
  background: var(--melange-nav-pill) !important;
  color: #fff !important;
  border-radius: 40px !important;
  padding: 10px 22px !important;
  border: 1px solid rgba(154, 48, 185, 0.28);
}
.nav-menu-two-2 .list-item-14 .nav-link-4.is-active:hover {
  background: var(--melange-nav-pill) !important;
  color: #fff !important;
}

/* Shared Melange CTA — matches nav "Let's collaborate" */
.c2a-button,
.let-s-collaborate,
#home .hero-download-btn,
#home .button.hero-download-btn,
.zf-submitColor,
input.zf-submitColor,
.zf-submitColor input,
.back-to-home-btn {
  background: linear-gradient(90deg, var(--melange-accent), var(--melange-cta-mid)) !important;
  border: 2px solid var(--melange-cta-border) !important;
  border-radius: 30px !important;
  color: #fff !important;
}

/* Label left, arrow flush right — avoid the icon sitting mid-pill */
.c2a-button,
.let-s-collaborate,
#home .hero-download-btn,
#home .button.hero-download-btn,
.back-to-home-btn {
  justify-content: flex-start !important;
  gap: 12px !important;
}

.c2a-button .text-block-5,
.let-s-collaborate .text-block-13,
#home .hero-download-btn .text-block-6,
#home .button.hero-download-btn .text-block-6,
.back-to-home-btn .text-block-40 {
  color: #fff !important;
  font-family: var(--melange-body);
  font-weight: 500;
}

.c2a-button .btn-icon,
.let-s-collaborate .div-block-21,
.hero-btn-icon,
.back-to-home-btn .div-block-23 {
  background: #fff !important;
  border-radius: 999px;
  margin-left: auto;
  flex-shrink: 0;
}

/* —— Hero (Figma: left copy + right destination visual) —— */
#home {
  padding: var(--hero-pad-top) 0 var(--hero-pad-bottom) !important;
  overflow: hidden;
}

#home .container-main {
  max-width: 1400px !important;
  text-align: left !important;
  align-items: stretch !important;
}

/* FIX: hero was a narrow 2-column grid (headline capped at 560px), which broke
   the copy onto the wrong lines and shrank the Singapore image. Figma is an
   OVERLAY: a large image bleeding off the right (~1475px, starts ~19% from the
   left) with the headline (~995px ≈ 64% of frame) sitting on top of the faded
   left portion. Switched to a relative block so the image can be absolutely
   positioned behind the copy. */
.hero-figma {
  display: block;
  position: relative;
  min-height: clamp(500px, 50vw, 700px);
  width: 100%;
  text-align: left;
}

.hero-figma__content {
  position: relative;
  text-align: left;
  max-width: min(900px, 64%);
  padding-top: clamp(18px, 3vw, 46px);
  z-index: 3;
}

.hero-eyebrow {
  font-family: var(--melange-body);
  font-weight: 500;
  font-size: var(--type-body, 16px);
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--melange-highlight);
  margin: 0 0 16px;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  text-align: left;
}

#home .hero-heading-h1 {
  /* FIX: Figma wraps the headline to 4 lines ("India doesn't book /
     destinations. / It books the people / it trusts."). Sized so each sentence
     breaks into two lines like the design, and constrained so the text span
     (~620px) matches the Figma headline width. */
  font-size: clamp(40px, 4.8vw, 66px) !important;
  line-height: 1.1 !important;
  max-width: 600px;
  color: var(--melange-ink) !important;
  margin: 0 0 22px !important;
  text-align: left !important;
}

/* FIX: Figma headline is one uniform bold sans treatment — the second sentence
   is NOT an italic serif and NOT accent-colored. Neutralise the earlier italic
   span so the whole headline reads as a single style/colour. */
#home .hero-heading-h1 .hero-line-2 {
  display: block;
  margin-top: 0;
  font-style: normal !important;
  font-family: var(--melange-display) !important;
  color: var(--melange-ink) !important;
}

#home .hero-heading-h1 .hero-accent {
  font-family: var(--melange-display) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  color: var(--melange-highlight) !important;
  -webkit-text-fill-color: var(--melange-highlight) !important;
  white-space: nowrap;
}

#home .para-txt {
  max-width: 430px;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: var(--melange-ink) !important;
  margin: 0 0 30px 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
  padding-top: 0 !important;
}

/* FIX: cluster is now a horizontal row: [prompt + button] | divider | [stats]. */
.hero-cta-cluster {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 26px;
  flex-wrap: nowrap;
}

.hero-cta-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Prompt + button share a center axis; prompt locked to 2 lines. */
.hero-report-prompt {
  font-family: var(--melange-body);
  font-size: 14px;
  line-height: 1.3;
  color: var(--melange-highlight);
  margin: 0;
  max-width: 260px;
  text-align: center;
}

/* FIX: dotted vertical divider now spans the full height of the left column
   (prompt above the button), separating it from the stats on the right. */
.hero-cta-divider {
  flex: 0 0 auto;
  align-self: stretch;
  width: 0;
  border-left: 2px dotted rgba(57, 16, 123, 0.35);
}

#home .hero-download-btn,
#home .button.hero-download-btn {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 8px 8px 8px 26px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

/* FIX: white circular arrow badge on the Download button (matches Figma). */
.hero-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #fff;
  flex: 0 0 auto;
}

.hero-btn-icon img {
  width: 12px;
  height: 12px;
  display: block;
}

#home .hero-download-btn .text-block-6,
#home .button.hero-download-btn .text-block-6 {
  font-size: 14px;
  line-height: 1.2;
}

/* NOTE: the shared CTA button hover animation (label fades out + arrow glides to
   the pill centre, plus a subtle lift) lives in this file (button-anim section)
   and is driven by js/melange.js so it applies consistently across EVERY page. */

#home .hero-cta-cluster .trusted-text {
  color: var(--melange-ink) !important;
  font-family: var(--melange-display);
  font-weight: 600;
  /* Sized to read against the full-height dotted divider */
  font-size: var(--type-title, 22px);
  line-height: 1.4;
  max-width: none;
  white-space: nowrap;
  text-align: left;
  margin: 0 !important;
}

/* FIX: image is now the Figma overlay — absolute, filling the hero height with a
   small top/bottom bleed and running off the right edge (Figma image bleeds
   ~14% past the right). Left edge ~12% so the faded portion sits under the copy. */
.hero-figma__visual {
  position: absolute;
  top: -24px;
  bottom: 0; /* was -34px — pull up so less of the image bottom shows */
  right: -6%;
  width: 90%;
  border-radius: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

/* Hero photo: soft left fade for headline; light right-edge feather only */
.hero-figma__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  /* Bias up so the bottom of the photo is cropped a bit more */
  object-position: 62% 32%;
  transform: none;
  transform-origin: center center;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 18%, #000 42%, #000 94%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 18%, #000 78%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 18%, #000 42%, #000 94%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 18%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.hero-figma__glow {
  display: none;
}

@media (max-width: 991px) {
  /* FIX: overlay only works with room to bleed — on tablet/mobile revert to a
     simple stacked layout (image above copy, no absolute positioning). */
  .hero-figma {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .hero-figma__content {
    max-width: 100%;
    order: 2;
  }
  #home .hero-heading-h1 {
    max-width: 100%;
  }
  .hero-figma__visual {
    position: relative;
    order: 1;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    min-height: 280px;
    aspect-ratio: 16 / 10;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 24px;
  }
  .hero-figma__visual img {
    mask-image: none;
    -webkit-mask-image: none;
    border-radius: 20px;
    object-position: 60% 40%;
    transform: none;
  }
  #home {
    padding: 52px 0 40px !important;
  }
  .navbar-logo-left-container,
  .navbar-logo-left-container.shadow-three {
    padding: 0 !important;
  }
  .navbar-wrapper-3 {
    padding: 12px 16px !important;
    border-radius: 0 !important;
  }
}

/* —— Trusted by —— */
.home-logo-section {
  padding: var(--section-pad-y-sm) 0 var(--section-pad-y) !important;
  overflow: visible;
}

.logo-marquee-section {
  margin-top: 0 !important;
}

.home-logo-section .marquee_wrap {
  width: max-content !important;
  min-width: 0 !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.home-logo-section .static-marquee_logos,
.home-logo-section .marquee-segment {
  display: inline-flex !important;
  align-items: center !important;
  width: max-content !important;
  min-width: 0 !important;
  gap: 48px !important;
  flex-shrink: 0 !important;
  justify-content: flex-start !important;
}

.home-logo-section .logo-marquee-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: auto;
  height: 88px;
  padding: 0;
  box-sizing: border-box;
}

.home-logo-section .marquee-logo {
  display: block;
  height: 72px;
  width: auto;
  max-width: 200px;
  max-height: 72px;
  object-fit: contain;
  object-position: center;
  opacity: 0.9;
  filter: none;
  transition: opacity 0.2s ease;
}

.home-logo-section .marquee-logo:hover {
  opacity: 1;
}

.home-logo-section .marquee-logo:not([src]),
.home-logo-section .marquee-logo[src=""] {
  display: none;
}

.logo-sec-container.w-container,
.home-logo-section .logo-sec-container {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.trusted-heading-wrap {
  display: block;
  width: 100%;
  max-width: 920px;
  margin: 0 auto 28px;
  padding: 0 24px;
  text-align: center;
}

.trusted-heading {
  display: block !important;
  font-family: var(--melange-display) !important;
  font-size: clamp(28px, 3.4vw, 40px) !important;
  font-weight: 600 !important;
  color: var(--melange-ink) !important;
  text-align: center !important;
  line-height: 1.28 !important;
  margin: 0 !important;
  max-width: none;
}

.trusted-heading .trusted-accent,
.trusted-heading .span-txt {
  color: var(--melange-highlight) !important;
  -webkit-text-fill-color: var(--melange-highlight) !important;
  font-family: var(--melange-display) !important;
  font-style: normal !important;
  font-weight: 600 !important;
}

.home-logo-section .logo-section {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  transform: none !important; /* nested transform + animated child glitched on iOS */
  position: relative;
  overflow: hidden;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Legacy pill styles — kept for infra section; hero marquee uses .logo-marquee-item */
.home-logo-section .logo-pill {
  border: 1.5px solid rgba(110, 30, 238, 0.22) !important;
  background: rgba(250, 229, 255, 0.65) !important;
  color: var(--melange-ink) !important;
  border-radius: 40px !important;
  font-family: var(--melange-body) !important;
  font-weight: 500 !important;
  height: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 24px 0 18px !important;
}

/* FIX: each pill has <img class="pill-logo" src="" alt="…"> — set src to your
   logo file and the image appears left of the label. Empty src hides the slot
   so text-only pills still look correct until assets are added. */
.pill-logo {
  height: 22px;
  width: auto;
  max-width: 72px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}
.pill-logo:not([src]),
.pill-logo[src=""] {
  display: none;
}

.home-logo-section .logo-pill .pill-logo {
  height: 24px;
  max-width: 64px;
}

.home-infra-section .infra-pill .pill-logo {
  height: 20px;
  max-width: 36px;
}

.home-infra-section .infra-pill.logo-wide .pill-logo {
  max-width: 48px;
}

.home-logo-section .logo-pill--muted {
  background: rgba(245, 239, 249, 0.85) !important;
  color: var(--melange-ink) !important;
  opacity: 0.92;
}

/* Edge fades come from mask-image on .logo-section — hide legacy white overlays */
.home-logo-section .left-overlay-div,
.home-logo-section .right-overlay-div {
  display: none !important;
}

/* —— Our Work header —— */
.work-section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto var(--section-header-gap);
  gap: var(--section-title-gap);
}

.work-section-header .our-work-heading {
  max-width: none;
  margin: 0 !important;
  text-align: center !important;
  white-space: nowrap;
}

@media (max-width: 991px) {
  .work-section-header .our-work-heading {
    white-space: normal;
    font-size: clamp(28px, 5vw, 40px) !important;
  }
}

.work-section-sub {
  max-width: 100% !important;
  margin: 0 auto !important;
  text-align: center !important;
  color: var(--melange-ink) !important;
  opacity: 0.78;
  font-size: 16px;
  line-height: 1.5;
  white-space: nowrap;
}
@media (max-width: 991px) {
  .work-section-sub {
    white-space: normal;
  }
}

/* —— Video —— */
.video-label {
  font-family: var(--melange-body);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: none;
  color: var(--melange-ink);
}

.video-heading {
  color: var(--melange-ink) !important;
}

.video-wrapper {
  border-radius: 24px !important;
  overflow: hidden;
}

/* —— Shift / about / CAAS —— */
.home-shift-heading,
.repurposed-heading-fix {
  text-align: center;
  margin-left: auto !important;
  margin-right: auto !important;
  color: var(--melange-ink) !important;
}

.home-shift-line,
.positioning-line {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.home-shift-line {
  max-width: 720px;
  color: var(--black-60) !important;
  font-size: var(--type-body, 16px);
  line-height: 1.8;
  margin: 28px auto 36px;
}

.home-shift-line strong {
  color: var(--black-100);
  font-weight: 600;
}

.home-shift-proof-label {
  max-width: 720px;
  margin: 0 auto;
  padding-top: 36px;
}

.positioning-line {
  max-width: 860px;
  color: var(--melange-ink) !important;
}

.network-section-intro {
  text-align: center;
  max-width: 1220px;
  margin: 0 auto var(--section-header-gap);
}

.network-section-intro h2 {
  margin-bottom: 16px;
}

.network-intro-line {
  margin: 0;
  max-width: 36em;
  font-size: var(--type-body, 16px);
  line-height: 1.65;
  text-align: left;
  color: var(--melange-ink);
}

.caas-header {
  max-width: 760px !important;
  margin: 0 auto var(--section-header-gap) !important;
  text-align: center;
}

.caas-heading {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 20px !important;
  font-family: var(--melange-display) !important;
  font-weight: 600 !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  line-height: 1.15 !important;
}

/* FIX: the title now reads as heavy 800 with the body letters in a deep near-navy
   ink so the accent initials pop against them (Figma shows a strong dark/violet
   contrast, not the near-uniform mid-purple the old flat ink produced). */
.crafting-heading.caas-heading,
.crafting-heading.caas-heading * {
  color: #26094f !important;
  -webkit-text-fill-color: #26094f !important;
  background: none !important;
}

/* FIX: a solid bright violet makes each initial (C-A-A-S) pop against the deep-ink
   body (the old gradient-clip blended into the navy and could vanish where
   background-clip:text is unsupported).
   IMPORTANT: the GSAP SplitText animation on `.crafting-heading` wraps the glyphs
   in nested `.gsap_split_word`/`.gsap_split_char` divs INSIDE `.caas-cap`. The
   `.caas-heading *` ink rule above then recolours those inner divs navy once the
   split runs — which is why the initials flashed violet then reverted. Targeting
   `.caas-cap *` (higher specificity) keeps the split children violet too. */
.crafting-heading.caas-heading .caas-cap,
.crafting-heading.caas-heading .caas-cap * {
  color: var(--melange-highlight) !important;
  -webkit-text-fill-color: var(--melange-highlight) !important;
  background: none !important;
  font-weight: 600 !important;
}

.caas-intro {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  color: var(--melange-ink) !important;
  max-width: 720px;
  font-size: 16px !important;
  line-height: 1.55 !important;
}

.home-shift-proof-label {
  color: var(--melange-ink) !important;
  font-family: var(--melange-body);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  text-align: center;
}

.count,
.plus {
  color: var(--melange-highlight) !important;
  -webkit-text-fill-color: var(--melange-highlight) !important;
}

.home-shift-section .descp {
  color: var(--melange-ink) !important;
}

/* CAAS steps — 4 equal columns, no arrows */
.caas-flow {
  width: 100% !important;
  position: relative;
  padding-top: 8px;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 28px 32px !important;
  align-items: start !important;
}

/* FIX: was a single continuous line spanning all 4 columns via .caas-flow::before.
   Figma gives each numbered step its OWN dotted rule above it. Removed the
   continuous line and put a dotted border-top on each step instead. */
.caas-flow::before {
  display: none !important;
}

.caas-arrow {
  display: none !important;
}

/* FIX: Figma shows short DASHES that fade in from the left above each step, not
   the round dotted border used before. A repeating-linear-gradient draws the
   dash pattern and a left-to-right mask fades the leading edge to transparent. */
.caas-step {
  position: relative;
  border-top: none !important;
  padding-top: 26px !important;
}

.caas-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-image: repeating-linear-gradient(
    to right,
    rgba(110, 30, 238, 0.5) 0,
    rgba(110, 30, 238, 0.5) 7px,
    transparent 7px,
    transparent 14px
  );
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 42%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 42%, #000 100%);
}

/* FIX: numerals were solid bright accent; Figma renders them as a light,
   faded lavender so the labels/body carry the weight. */
.caas-number {
  color: rgba(110, 30, 238, 0.32) !important;
  font-family: var(--melange-display) !important;
  font-weight: 800 !important;
  font-size: 48px !important;
  line-height: 1;
  margin-bottom: 16px !important;
  display: block;
}

.caas-step h3 {
  color: var(--melange-ink) !important;
  font-family: var(--melange-display) !important;
  font-size: var(--type-title, 22px) !important;
  letter-spacing: 0.08em;
  text-transform: none;
  margin-bottom: 14px !important;
}

.caas-step p {
  color: var(--melange-ink) !important;
  opacity: 0.78;
  font-size: var(--type-body, 16px) !important;
  line-height: 1.65 !important;
}

@media (max-width: 991px) {
  .caas-flow {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
}

/* —— Network —— */
.network-stat {
  color: var(--melange-highlight) !important;
  -webkit-text-fill-color: var(--melange-highlight) !important;
  /* Midweight figure: above old 48px lock, below oversized 120px */
  font-size: clamp(64px, 6.5vw, 80px) !important;
  line-height: 0.9 !important;
}

.network-stat-label,
.network-geo {
  color: var(--melange-ink) !important;
}

/* —— Services / Governments cards — keep pastel fills (inline or nth-child) —— */
.innovation-item {
  border-radius: 22px !important;
  border: 1px solid rgba(57, 16, 123, 0.08);
}

.heading-25 {
  font-family: var(--melange-display) !important;
  color: var(--melange-ink) !important;
  white-space: nowrap;
}

.builtfor-descp {
  color: var(--melange-ink) !important;
  opacity: 0.8;
}

.call-to-action {
  background: linear-gradient(90deg, rgba(128, 42, 241, 0.92), rgba(154, 48, 185, 0.85)) !important;
  border-radius: 20px !important;
  border: none !important;
}
/* Inner row must stay transparent — a second fill created a dark band across the CTA */
.collabrator-wrapper {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

.title-1,
.title-2 {
  color: #fff !important;
  font-family: var(--melange-display) !important;
}

.let-s-collaborate {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 12px;
  padding: 8px 8px 8px 20px !important;
  text-decoration: none !important;
  box-shadow: 0 8px 24px rgba(57, 16, 123, 0.18);
}

.let-s-collaborate .div-block-21 {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* —— Work cards: image top + dark content panel ———————————
   Desktop: exactly 3 cards fit the track (equal side pads, no clipped edges). */
.div-block-214 > .work-card-link {
  position: relative !important;
  /* (100% - 2 gaps) / 3  — 100% is the track content box inside side padding */
  flex: 0 0 calc((100% - (2 * var(--work-card-gap))) / 3) !important;
  width: calc((100% - (2 * var(--work-card-gap))) / 3) !important;
  max-width: calc((100% - (2 * var(--work-card-gap))) / 3) !important;
  /* height set by equalizeCardHeights() to match the tallest card */
  max-height: none !important;
  align-self: stretch !important;
  overflow: hidden;
  border-radius: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  background: #12101a !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.2);
  text-decoration: none !important;
  color: inherit !important;
  cursor: pointer;
  box-sizing: border-box !important;
}
.div-block-214 > .work-card-link[hidden],
.div-block-214 > .work-card-link[data-work-hidden] {
  display: none !important;
  flex: 0 0 0 !important;
  width: 0 !important;
  max-width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
/* image zone = top of the card */
.div-block-214 > .work-card-link .small-card {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  background: transparent !important;
}
/* Full image zone — do not crop campaign photography tightly */
.div-block-214 > .work-card-link .div-block-196 {
  position: relative !important;
  flex: 0 0 200px !important;
  width: 100% !important;
  height: 200px !important;
  min-height: 200px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: block !important;
  border-radius: 0 !important;
  background: #1a0a38;
}
/* soft fade from photo into the dark panel — keep it short so the photo stays readable */
.div-block-214 > .work-card-link .div-block-196::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28%;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, #12101a 100%);
  z-index: 1;
}
.div-block-214 > .work-card-link .avatar,
.div-block-214 > .work-card-link .div-block-196 img.avatar {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center center;
  border-radius: 0 !important;
  display: block !important;
}
/* Esquire: keep subject framed; nudge up enough to hide cover masthead text */
.div-block-214 > .work-card-link .div-block-196 img.work-img--esquire {
  object-position: center 34% !important;
}
/* GCC launch: bias upward so empty sky is cropped, not the subject */
.div-block-214 > .work-card-link .div-block-196 img.work-img--gcc {
  object-position: center 80% !important;
}
/* placeholder cards → branded gradient with a large faded monogram */
.div-block-214 > .work-card-link .work-card-placeholder {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(155deg, #1a0a38 0%, #4c1d95 48%, #7c3aed 100%) !important;
  color: rgba(255, 255, 255, 0.14) !important;
  font-family: var(--melange-display) !important;
  font-size: 108px !important;
  font-weight: 400 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
/* hide the legacy hover-arrow overlay — not part of the new card design */
.div-block-214 > .work-card-link .div-block-197 {
  display: none !important;
}

/* dark content panel below the image */
.div-block-214 > .work-card-link .heading-7 {
  color: #fff !important;
  font-family: var(--melange-display) !important;
  margin: 10px 22px 6px !important;
  font-size: var(--type-title, 22px) !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em;
  flex-shrink: 0 !important;
}
.div-block-214 > .work-card-link .work-card-description {
  color: rgba(255, 255, 255, 0.82) !important;
  font-family: var(--melange-body) !important;
  margin: 0 22px 10px !important;
  font-size: var(--type-body, 16px) !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  flex: 0 0 auto !important;
  min-height: auto !important;
  height: auto !important;
  max-height: none !important;
  display: block !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
}
.div-block-214 > .work-card-link .chips {
  margin: auto 0 0 !important;
  padding: 20px 24px 24px !important;
  gap: 10px;
  flex: 0 0 auto !important;
}
/* subtle outlined pills on the dark panel */
.div-block-214 > .work-card-link .link-block-2 {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  border-radius: 999px !important;
  font-size: var(--type-body, 16px) !important;
  height: auto !important;
  padding: 6px 14px !important;
  transition: background-color 0.2s ease, border-color 0.2s ease,
              transform 0.2s ease;
}
.div-block-214 > .work-card-link .link-block-2:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.38) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

@media (max-width: 1100px) {
  .div-block-214 {
    --work-card-gap: 20px;
    --work-side-pad: 28px;
  }
  /* Two fully visible cards on mid widths */
  .div-block-214 > .work-card-link {
    flex: 0 0 calc((100% - var(--work-card-gap)) / 2) !important;
    width: calc((100% - var(--work-card-gap)) / 2) !important;
    max-width: calc((100% - var(--work-card-gap)) / 2) !important;
  }
}

@media (max-width: 767px) {
  .div-block-214 {
    --work-card-gap: 16px;
    --work-side-pad: 20px;
  }
  .div-block-214 > .work-card-link {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }
  .div-block-214 > .work-card-link .div-block-196 {
    flex: 0 0 180px !important;
    height: 180px !important;
    min-height: 180px !important;
  }
  .div-block-214 > .work-card-link .heading-7 {
    font-size: var(--type-title, 22px) !important;
    margin: 10px 16px 6px !important;
  }
  .div-block-214 > .work-card-link .work-card-description {
    margin: 0 16px 8px !important;
    font-size: var(--type-body, 16px) !important;
  }
  .div-block-214 > .work-card-link .chips {
    padding: 12px 16px 16px !important;
  }
}

/* —— Work card: stats variant ——
   Card height follows content; flex stretch equalizes to the tallest card.
   Stats band is always a fixed 3-column grid (1–3 metrics). */
.div-block-214 > .work-card-link.work-card--stats {
  max-height: none !important;
  overflow: hidden;
  align-self: stretch !important;
}
.div-block-214 > .work-card-link.work-card--stats .work-card-eyebrow {
  color: #b794ff !important;
  font-family: var(--melange-body) !important;
  margin: 14px 24px 0 !important;
  font-size: var(--type-body, 16px) !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em;
  text-transform: none;
  flex-shrink: 0 !important;
  line-height: 1.35 !important;
}
.div-block-214 > .work-card-link.work-card--stats .heading-7 {
  margin: 6px 24px 8px !important;
  font-size: var(--type-title, 22px) !important;
}
.div-block-214 > .work-card-link.work-card--stats .work-card-description--tall {
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  min-height: auto !important;
  height: auto !important;
  max-height: none !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  overflow: visible !important;
  margin: 0 24px 12px !important;
  font-size: var(--type-body, 16px) !important;
  line-height: 1.5 !important;
  white-space: normal !important;
}
.div-block-214 > .work-card-link.work-card--stats .work-card-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
  margin: auto 0 0 !important;
  padding: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box !important;
  /* Height equalized across cards by equalizeStatBands() */
  flex: 0 0 auto !important;
  max-height: none !important;
  width: 100% !important;
  align-items: stretch !important;
  overflow: hidden;
}
.div-block-214 > .work-card-link.work-card--stats .work-card-stat {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  height: 100%;
  min-height: 100%;
  box-sizing: border-box;
  padding: 18px 16px 18px 18px;
  justify-content: flex-start;
}
/* Full-height column dividers — always 3 equal cells */
.div-block-214 > .work-card-link.work-card--stats .work-card-stat:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.14);
  pointer-events: none;
}
.div-block-214 > .work-card-link.work-card--stats .work-card-stat.is-empty {
  pointer-events: none;
}
.div-block-214 > .work-card-link.work-card--stats .work-card-stat.is-empty .work-card-stat-value,
.div-block-214 > .work-card-link.work-card--stats .work-card-stat.is-empty .work-card-stat-label {
  visibility: hidden;
}
.div-block-214 > .work-card-link.work-card--stats .work-card-stat-value {
  color: #fff !important;
  font-family: var(--melange-display) !important;
  font-size: var(--type-title, 22px) !important;
  line-height: 1.1 !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em;
  white-space: nowrap;
  flex-shrink: 0;
}
.div-block-214 > .work-card-link.work-card--stats .work-card-stat-label {
  color: rgba(255, 255, 255, 0.8) !important;
  font-family: var(--melange-body) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  white-space: normal;
}
@media (max-width: 767px) {
  .div-block-214 > .work-card-link,
  .div-block-214 > .work-card-link.work-card--stats {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }
  .div-block-214 > .work-card-link .div-block-196 {
    flex: 0 0 220px !important;
    height: 220px !important;
    min-height: 220px !important;
  }
  .div-block-214 > .work-card-link.work-card--stats .work-card-eyebrow {
    margin: 12px 16px 0 !important;
  }
  .div-block-214 > .work-card-link.work-card--stats .heading-7 {
    margin: 4px 16px 6px !important;
    font-size: var(--type-title, 22px) !important;
  }
  .div-block-214 > .work-card-link.work-card--stats .work-card-description--tall {
    margin: 0 16px 10px !important;
  }
  .div-block-214 > .work-card-link.work-card--stats .work-card-stats {
    flex: 0 0 auto !important;
    max-height: none !important;
  }
  .div-block-214 > .work-card-link.work-card--stats .work-card-stat {
    padding: 14px 12px 14px 14px;
    gap: 6px;
  }
  .div-block-214 > .work-card-link.work-card--stats .work-card-stat-value {
    font-size: var(--type-title, 22px) !important;
  }
  .div-block-214 > .work-card-link.work-card--stats .work-card-stat-label {
    font-size: 13px !important;
  }
}

/* —— Testimonials —— */
.home-testimonial-stagger-section {
  overflow: hidden;
}

.stagger-card.is-center {
  /* FIX: removed dead --stagger-y / --stagger-rot here (and the :nth-of-type
     custom-property rules below). positionCards() writes translateY/rotate as
     inline transforms and never reads those CSS variables, so the props only
     implied control the JS does not have. Keep the real visual overrides.
     Center card now uses a subtle accent gradient (not flat) per Figma. */
  background: linear-gradient(155deg, #7c3aed 0%, #6e1eee 55%, #5a17c9 100%) !important;
  border-color: rgba(152, 87, 255, 0.5) !important;
  --stagger-y: 0px;
  --stagger-rot: 0deg;
}

/* FIX: away cards were solid #fff (custom.css) — Figma shows them translucent
   with a faint purple gradient, and the FURTHER a card sits from the center the
   LIGHTER it is. Base translucent glass here; data-pos tiers below step the
   opacity down toward the outer cards. JS sets data-pos (0 center, ±1, ±2…). */
.stagger-card.is-away {
  background: linear-gradient(155deg, rgba(152, 87, 255, 0.20), rgba(255, 255, 255, 0.06)) !important;
  border-color: rgba(152, 87, 255, 0.28) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 1 !important;
}

.stagger-card.is-away[data-pos="1"],
.stagger-card.is-away[data-pos="-1"] {
  background: linear-gradient(155deg, rgba(152, 87, 255, 0.14), rgba(255, 255, 255, 0.05)) !important;
  border-color: rgba(152, 87, 255, 0.22) !important;
}

.stagger-card.is-away[data-pos="2"],
.stagger-card.is-away[data-pos="-2"],
.stagger-card.is-away[data-pos="3"],
.stagger-card.is-away[data-pos="-3"] {
  background: linear-gradient(155deg, rgba(152, 87, 255, 0.08), rgba(255, 255, 255, 0.03)) !important;
  border-color: rgba(152, 87, 255, 0.16) !important;
}

.stagger-card:hover.is-away {
  border-color: var(--melange-accent) !important;
}

.stagger-nav-btn {
  border-color: var(--melange-accent) !important;
  color: var(--melange-accent) !important;
  border-radius: 999px !important;
}

.stagger-nav-btn:hover {
  background: var(--melange-accent) !important;
  border-color: var(--melange-accent) !important;
  color: #fff !important;
}

.stagger-nav-btn:focus-visible {
  outline: 2px solid var(--melange-accent) !important;
}

.stagger-card-attr {
  position: static;
  overflow: hidden;
  text-overflow: unset;
  white-space: normal;
  line-height: 1.35;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.stagger-card.is-center .stagger-card-attr {
  white-space: normal;
}

/* —— Infra —— */
.infra-heading {
  color: var(--melange-ink) !important;
  text-align: center;
}

.infra-row-label {
  color: var(--melange-ink) !important;
  font-family: var(--melange-body);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: none;
}

.infra-pill {
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--melange-ink) !important;
  border-radius: 40px !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

/* —— Reports —— */
.report-card {
  border-radius: 24px !important;
  border: 1px solid rgba(57, 16, 123, 0.1) !important;
  background: #f3f3f5 !important;
  /* Card BP: border OR shadow — keep border only */
  box-shadow: none;
}

.report-card .badge,
.plan-bedge .badge {
  background: var(--melange-nav-pill) !important;
  color: #fff !important;
  border-radius: 30px !important;
}

.report-card .badge--muted,
.badge.badge--muted {
  background: rgba(57, 16, 123, 0.12) !important;
  color: var(--melange-ink) !important;
}

.report-card__title,
.report-stat-value {
  /* FIX: was `.report-card [style*="Instrument Serif"]` — report stats use
     Alan Sans inline, so that substring matched nothing. Class targets the
     three animated stat values directly. */
  color: var(--melange-ink) !important;
  font-family: var(--melange-display) !important;
}

.report-stat-value {
  color: var(--melange-highlight) !important;
  -webkit-text-fill-color: var(--melange-highlight) !important;
}

.report-card__notify {
  color: var(--melange-highlight) !important;
}

/* —— Awards —— */
.award-card {
  border-radius: 22px !important;
  background: #f3f3f5 !important;
  border: 1px solid rgba(57, 16, 123, 0.1) !important;
  box-shadow: 0 18px 50px rgba(110, 30, 238, 0.04) !important;
}

.home-awards-section .award-card,
.home-awards-section .award-card:hover {
  transform: none !important;
}

.home-awards-section .award-card {
  width: 360px !important;
  max-width: none !important;
}

.home-awards-section .award-card h3 {
  font-family: var(--melange-display) !important;
  font-size: var(--type-title, 22px) !important;
  line-height: 1.32 !important;
  color: var(--melange-ink) !important;
  margin: 0 !important;
}

.home-awards-section .award-event {
  font-family: var(--melange-body) !important;
  font-size: var(--type-body, 16px) !important;
  font-weight: 600 !important;
  color: var(--melange-ink) !important;
  opacity: 0.92 !important;
  margin: 0 0 14px !important;
}

.award-accent {
  background: var(--melange-accent) !important;
}

/* —— Team —— */
.profile-card {
  border-radius: 18px !important;
  overflow: visible;
  align-items: center;
}

.profile-card > img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Kill Webflow IX grayscale hover; soft brand glow + name accent instead */
.home-our-team-sec .profile-card > img {
  filter: none !important;
  transition: filter 0.35s ease;
}
.home-our-team-sec .profile-card:hover > img,
.home-our-team-sec .profile-card:focus-within > img {
  /* drop-shadow follows the photo silhouette — box-shadow painted a hard rectangle */
  filter:
    brightness(1.04)
    saturate(1.1)
    drop-shadow(0 14px 28px rgba(110, 30, 238, 0.35)) !important;
  transform: none;
  box-shadow: none !important;
}
.home-our-team-sec .profile-card:hover .creative-block-title,
.home-our-team-sec .profile-card:focus-within .creative-block-title {
  color: var(--melange-highlight) !important;
}
@media (prefers-reduced-motion: reduce) {
  .home-our-team-sec .profile-card > img {
    transition: none;
  }
}

.creative-block-title {
  font-family: var(--melange-display) !important;
  color: var(--melange-ink) !important;
  transition: color 0.25s ease;
}

.position-txt {
  color: var(--melange-ink) !important;
  opacity: 0.75;
}

/* —— FAQ —— */
.accordian-item,
.accordion-toggle {
  border-radius: 16px !important;
}

.section-8 .accordian-item {
  background: #fff !important;
  border: 1px solid rgba(57, 16, 123, 0.1) !important;
  overflow: hidden;
}

.accordion-toggle {
  background: transparent !important;
  border: none !important;
}

.section-8 .accordion-toggle {
  padding: 20px 24px !important;
  min-height: 0 !important;
}

/* Answers: same side inset as the question, tight top/bottom (no tall empty band) */
.section-8 .dropdown-list,
.section-8 .dropdown-list.w--open,
.section-8 .w-dropdown-list {
  background: transparent !important;
  padding: 0 24px 16px !important;
  margin: 0 !important;
}

.text-block-30 {
  color: var(--melange-ink) !important;
  font-weight: 500;
}

.text-block-34,
.text-block-35,
.text-block-36,
.text-block-37,
.text-block-38,
.text-block-39 {
  color: #1b1d1e99 !important;
  font-size: 16px;
  line-height: 1.5;
  margin: 0 !important;
  padding: 0 !important;
}

.section-8 .text-block-34,
.section-8 .text-block-35,
.section-8 .text-block-36,
.section-8 .text-block-37,
.section-8 .text-block-38,
.section-8 .text-block-39 {
  padding-top: 2px !important;
}

/* Show 3 FAQs by default; reveal the rest on toggle */
.faq-list[data-faq-collapsed="true"] .faq-item--extra {
  display: none !important;
}

.faq-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
  padding: 14px 22px;
  border: 1px solid rgba(57, 16, 123, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--melange-ink);
  font-family: var(--melange-body, inherit);
  font-size: var(--type-body, 16px);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.faq-more-btn:hover {
  background: #fff;
  border-color: rgba(110, 30, 238, 0.35);
  color: var(--melange-highlight);
}

.faq-more-btn__icon {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  margin-top: -4px;
}

.faq-list:not([data-faq-collapsed="true"]) .faq-more-btn__icon {
  transform: rotate(-135deg);
  margin-top: 4px;
}

/* —— Lead form —— */
.leadform-heading {
  color: var(--melange-ink) !important;
}

.zf-templateWrapper,
.zf-tempContDiv input,
.zf-tempContDiv textarea {
  border-radius: 12px;
}

.leadform-card .zf-labelName,
.leadform-card .zf-checkChoice,
.leadform-card .zf-tempContDiv input,
.leadform-card .zf-tempContDiv textarea,
.leadform-card .zf-tempContDiv select {
  color: #252c3e !important;
}

.zf-submitColor,
input.zf-submitColor,
.zf-submitColor input {
  font-family: var(--melange-body) !important;
}

/* —— Footer —— */
.footer {
  background: var(--melange-ink, #0F0330) !important;
  color: #fff !important;
}

.footer .title,
.footer .text-block-32,
.footer .text-block-33,
.footer .nav-text,
.footer .copyright-text,
.footer a {
  color: rgba(255, 255, 255, 0.9) !important;
}

.navigation-link.for-footer,
.navigation-link.for-footer * {
  color: rgba(255, 255, 255, 0.88) !important;
}

/* FIX: the Contact column is a hair narrower than "hello@melangedigital.co" at this
   font size, so it wrapped mid-domain ("...melangedigital" / ".in") — a link this
   short should never break onto a second line. The other footer columns (service
   names) intentionally wrap, so this is scoped to just the Contact column's links. */
.footer-column-4 .nav-text {
  white-space: nowrap;
}

/* Logo only — do NOT target all column imgs (social icons live in the same column).
   Also override .nav-logo max-width/height so the wordmark isn't squashed. */
.footer img.nav-logo.footer-logo,
.footer .footer-logo,
.footer-column-1 img.footer-logo {
  filter: none !important;
  height: 40px !important;
  width: auto !important;
  max-width: 220px !important;
  max-height: 40px !important;
  object-fit: contain !important;
  object-position: left center;
  aspect-ratio: unset !important;
  display: block;
}

.footer .footer-social-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
}

.footer .footer-social-icon img {
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  object-fit: contain !important;
}

.footer .footer-social-icon:hover img {
  opacity: 0.75 !important;
}

.report-stat-value {
  /* FIX: same dead Instrument Serif substring selector as above — accent color
     for the animated report counters must use the real class. */
  color: var(--melange-highlight) !important;
  -webkit-text-fill-color: var(--melange-highlight) !important;
}

.leadform-card {
  background: #fff !important;
  border-radius: 24px !important;
  border: 1px solid rgba(57, 16, 123, 0.1);
  box-shadow: 0 20px 60px rgba(57, 16, 123, 0.1);
  overflow: visible;
  padding: 4px;
  height: auto !important;
  align-self: start;
}
.leadform-card .contact_form.w-form,
.leadform-card .w-form {
  margin: 0 !important;
  height: auto !important;
}

/* Zoho embed ships its own page-chrome (grey stage + white sheet). Flatten so
   .leadform-card is the only visible container. */
.leadform-card .zf-backgroundBg {
  background: transparent !important;
}
.leadform-card .zf-templateWidth {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 18px 20px 14px !important;
  box-sizing: border-box;
}
.leadform-card .zf-templateWrapper {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}

/* —— Lead form: Enterprise-dense layout (UI Design Brain)
   8px grid · labels above · 3-col fields · full-width phone · no chrome waste —— */
.leadform-card .zf-tempHeadBdr,
.leadform-card .zf-tempHeadContBdr {
  border: none !important;
  border-bottom: none !important;
  background: transparent !important;
  padding: 0 0 10px !important;
  margin: 0 !important;
  text-align: center !important;
}
.leadform-card .zf-frmTitle,
.leadform-card .zf-tempHeadContBdr .zf-frmTitle,
.leadform-card .zf-frmTitle em {
  font-style: normal !important;
  letter-spacing: -0.02em;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
}
.leadform-card .zf-frmDesc:empty {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.leadform-card .zf-subContWrap {
  padding: 0 !important;
}
.leadform-card .zf-subContWrap > ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Field grid — replaces broken Zoho 3-col (overflow:hidden clipped labels) */
.leadform-card .leadform-fields {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  margin: 0 0 10px;
  width: 100%;
}
.leadform-card .leadform-fields .zf-tempFrmWrapper,
.leadform-card .leadform-field--goals,
.leadform-card .leadform-field--notes {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  overflow: visible !important;
}
.leadform-card .leadform-field--goals {
  margin: 0 0 12px !important;
  overflow: visible !important;
  position: relative;
  z-index: 2;
}
.leadform-card .leadform-field--notes {
  margin: 0 0 8px !important;
  padding-top: 4px !important;
}

.leadform-card .zf-labelName {
  display: block !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  font-size: var(--type-body) !important;
  font-family: var(--melange-body) !important;
  font-weight: 500 !important;
  letter-spacing: 0;
  color: var(--melange-ink) !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
/* Text inputs: hide labels visually — placeholders carry the cue; h3 stays the only heading */
.leadform-card .leadform-fields .zf-labelName,
.leadform-card .leadform-field--notes .zf-labelName,
.leadform-card .leadform-field--goals .zf-labelName,
.leadform-card .zf-labelName--sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.leadform-card .zf-important {
  color: var(--melange-highlight) !important;
  font-style: normal !important;
}
.leadform-card .zf-tempContDiv input::placeholder,
.leadform-card .zf-tempContDiv textarea::placeholder {
  color: rgba(37, 44, 62, 0.45);
  opacity: 1;
}
/* Kill Temp Mail / autofill extension chrome painted into email fields */
.leadform-card .leadform-email-wrap {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
}
.leadform-card input[name="Email"] {
  position: relative;
  z-index: 2;
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-background-clip: unset !important;
  background-clip: padding-box !important;
}
.home-leadform-section [class*="tempmail" i],
.home-leadform-section [class*="temp-mail" i],
.home-leadform-section [class*="tempy" i],
.home-leadform-section [id*="tempmail" i],
.home-leadform-section [id*="temp-mail" i],
.home-leadform-section [aria-label*="temp mail" i],
.home-leadform-section [title*="temp mail" i],
.home-leadform-section img[src*="tempmail" i],
.home-leadform-section img[alt*="temp mail" i],
.home-leadform-section img[alt*="TEMP MAIL" i] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  position: absolute !important;
  left: -9999px !important;
}
.leadform-card input[name="Email"]::-webkit-credentials-auto-fill-button,
.leadform-card input[name="Email"]::-webkit-contacts-auto-fill-button {
  visibility: hidden !important;
  display: none !important;
  pointer-events: none !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
}

.leadform-card .zf-tempContDiv {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  overflow: visible !important;
}
.leadform-card .zf-tempContDiv > span {
  display: block !important;
  width: 100% !important;
}
.leadform-card .zf-tempContDiv input[type="text"],
.leadform-card .zf-tempContDiv textarea,
.leadform-card .zf-tempContDiv select {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  min-height: 40px !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(57, 16, 123, 0.16) !important;
  border-radius: 8px !important;
  background: #fff !important;
  font-size: var(--type-body) !important;
  font-family: var(--melange-body) !important;
  line-height: 1.35 !important;
  color: #252c3e !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  box-shadow: none !important;
}
.leadform-card .zf-tempContDiv textarea {
  min-height: 64px !important;
  height: auto !important;
  resize: vertical;
}
.leadform-card .zf-tempContDiv input[type="text"]:hover,
.leadform-card .zf-tempContDiv textarea:hover,
.leadform-card .zf-tempContDiv select:hover {
  border-color: rgba(110, 30, 238, 0.35) !important;
}
.leadform-card .zf-tempContDiv input[type="text"]:focus,
.leadform-card .zf-tempContDiv textarea:focus,
.leadform-card .zf-tempContDiv select:focus {
  outline: none !important;
  border-color: var(--melange-highlight) !important;
  box-shadow: 0 0 0 3px rgba(110, 30, 238, 0.14) !important;
}

/* Phone: fixed code slot + flexible number (full row width) */
.leadform-card .zf-phwrapper {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
}
.leadform-card .zf-phwrapper > span,
.leadform-card .leadform-phone-code,
.leadform-card .leadform-phone-number {
  display: block !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.leadform-card .leadform-phone-code {
  flex: 0 0 64px !important;
  width: 64px !important;
  max-width: 64px !important;
  min-width: 64px !important;
  position: relative;
}
.leadform-card .leadform-phone-number {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.leadform-card .zf-phwrapper input[type="text"],
.leadform-card .zf-phwrapper select {
  width: 100% !important;
  box-sizing: border-box !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
}
.leadform-card .leadform-phone-code select,
.leadform-card .leadform-field--goals select {
  display: block !important;
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 8px 28px 8px 8px !important;
  border: 1px solid rgba(57, 16, 123, 0.16) !important;
  border-radius: 8px !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2339107b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 10px 7px !important;
  color: #252c3e !important;
  font-family: var(--melange-body) !important;
  font-size: var(--type-body) !important;
  line-height: 1.35 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer;
  box-shadow: none !important;
}
.leadform-card .leadform-phone-code select.leadform-cc__native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  background: none !important;
}
.leadform-card .leadform-cc {
  position: relative;
  width: 100%;
}
.leadform-card .leadform-cc__trigger {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 6px 18px 6px 6px !important;
  border: 1px solid rgba(57, 16, 123, 0.16) !important;
  border-radius: 8px !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2339107b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 5px center !important;
  background-size: 9px 6px !important;
  color: #252c3e !important;
  font-family: var(--melange-body) !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  cursor: pointer;
  box-sizing: border-box !important;
  box-shadow: none !important;
}
.leadform-card .leadform-cc.is-open .leadform-cc__trigger,
.leadform-card .leadform-cc__trigger:focus-visible {
  outline: none !important;
  border-color: var(--melange-highlight) !important;
  box-shadow: 0 0 0 3px rgba(110, 30, 238, 0.14) !important;
}
.leadform-card .leadform-cc__value {
  font-variant-numeric: tabular-nums;
}
.leadform-card .leadform-cc__panel {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 50;
  width: max(180px, 100%);
  max-height: 240px;
  overflow: auto;
  padding: 6px;
  border: 1px solid rgba(57, 16, 123, 0.14);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(57, 16, 123, 0.16);
}
.leadform-card .leadform-cc__panel[hidden] {
  display: none !important;
}
.leadform-card .leadform-cc__option {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 8px;
  background: transparent !important;
  color: #252c3e !important;
  font-family: var(--melange-body) !important;
  font-size: var(--type-body) !important;
  line-height: 1.35 !important;
  text-align: left;
  cursor: pointer;
}
.leadform-card .leadform-cc__option:hover,
.leadform-card .leadform-cc__option.is-selected {
  background: rgba(110, 30, 238, 0.06) !important;
}
.leadform-card .leadform-cc__flag {
  width: 20px;
  height: 15px;
  border-radius: 2px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  box-shadow: 0 0 0 1px rgba(15, 3, 48, 0.08);
}
.leadform-card .leadform-cc__code {
  font-variant-numeric: tabular-nums;
}
.leadform-card .leadform-field--goals select {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 8px 36px 8px 12px !important;
  background-position: right 12px center !important;
  background-size: 12px 8px !important;
}
.leadform-card .zf-phwrapper label {
  display: none !important;
}

/* Goals multi-select dropdown */
.leadform-card .leadform-multiselect {
  position: relative;
  width: 100%;
}
.leadform-card .leadform-multiselect__trigger {
  display: flex !important;
  align-items: center;
  width: 100% !important;
  min-height: 40px !important;
  height: 40px !important;
  padding: 8px 36px 8px 12px !important;
  border: 1px solid rgba(57, 16, 123, 0.16) !important;
  border-radius: 8px !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2339107b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px 8px !important;
  color: #252c3e !important;
  font-family: var(--melange-body) !important;
  font-size: var(--type-body) !important;
  line-height: 1.35 !important;
  text-align: left;
  cursor: pointer;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
.leadform-card .leadform-multiselect__trigger:hover {
  border-color: rgba(110, 30, 238, 0.35) !important;
}
.leadform-card .leadform-multiselect.is-open .leadform-multiselect__trigger,
.leadform-card .leadform-multiselect__trigger:focus-visible {
  outline: none !important;
  border-color: var(--melange-highlight) !important;
  box-shadow: 0 0 0 3px rgba(110, 30, 238, 0.14) !important;
}
.leadform-card .leadform-multiselect__label {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(37, 44, 62, 0.45);
}
.leadform-card .leadform-multiselect.has-value .leadform-multiselect__label {
  color: #252c3e;
}
.leadform-card .leadform-multiselect__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  max-height: 240px;
  overflow: auto;
  padding: 6px;
  border: 1px solid rgba(57, 16, 123, 0.14);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(57, 16, 123, 0.16);
}
.leadform-card .leadform-multiselect__panel[hidden] {
  display: none !important;
}
.leadform-card .leadform-multiselect__option {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  margin: 0 !important;
  padding: 8px 10px !important;
  border-radius: 8px;
  cursor: pointer;
  color: #252c3e !important;
  font-family: var(--melange-body) !important;
  font-size: var(--type-body) !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
}
.leadform-card .leadform-multiselect__option:hover {
  background: rgba(110, 30, 238, 0.06);
}
.leadform-card .leadform-multiselect__option input {
  margin-top: 2px !important;
  flex-shrink: 0;
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--melange-highlight);
}
.leadform-card .leadform-multiselect__option span {
  min-width: 0;
}

/* Goals: single-column checklist */
.leadform-card .zf-checkbox .zf-overflow {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.leadform-card .zf-multiAttType {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.leadform-card .zf-multiAttType:hover {
  background: transparent !important;
}
.leadform-card .zf-checkChoice {
  margin: 0 !important;
  line-height: 1.4 !important;
  font-size: var(--type-body, 16px) !important;
  cursor: pointer;
  color: #252c3e !important;
}
.leadform-card .zf-checkBoxType {
  margin-top: 3px !important;
  flex-shrink: 0;
}
.leadform-card .zf-instruction-inline {
  color: rgba(57, 16, 123, 0.55) !important;
  font-size: inherit !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  white-space: nowrap;
}
.leadform-card .zf-errorMessage {
  margin: 4px 0 0 !important;
  font-size: var(--type-body) !important;
  font-family: var(--melange-body) !important;
}
.leadform-card .zf-fmFooter {
  padding: 8px 0 0 !important;
  margin: 0 !important;
  border: none !important;
  min-height: 0 !important;
  text-align: left !important;
  list-style: none !important;
}
.leadform-card .zf-submitColor,
.leadform-card button.zf-submitColor {
  min-height: 40px !important;
  padding: 8px 22px !important;
  border-radius: 999px !important;
  font-size: var(--type-body) !important;
  font-family: var(--melange-body) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(110, 30, 238, 0.24) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease !important;
}
.leadform-card .zf-submitColor:hover,
.leadform-card button.zf-submitColor:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 12px 28px rgba(110, 30, 238, 0.3) !important;
}
@media (max-width: 900px) {
  .leadform-card .leadform-fields {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767px) {
  .leadform-card .leadform-fields {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.leadform-bullet {
  color: var(--black-60) !important;
}

.leadform-contact-line {
  color: var(--black-60) !important;
  opacity: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35em 0.75em;
}

.leadform-contact-item {
  white-space: nowrap;
}

.leadform-contact-sep {
  opacity: 0.65;
}

.leadform-copy {
  color: var(--black-60) !important;
}

.home-shift-section .count-block,
.home-proof-section .count-block {
  color: var(--melange-ink);
}

.home-shift-section .count-sec-divider,
.home-proof-section .count-sec-divider {
  background: rgba(57, 16, 123, 0.2) !important;
}
.main::before,
.main::after {
  content: "";
  position: fixed;
  width: min(520px, 70vw);
  height: min(520px, 70vw);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(60px);
  opacity: 0.35;
}

.main::before {
  top: 12%;
  right: -12%;
  background: rgba(152, 87, 255, 0.45);
}

.main::after {
  bottom: 18%;
  left: -14%;
  background: rgba(250, 229, 255, 0.8);
}

.main > *:not(.gradient-background):not(.div-block-47) {
  /* FIX: was `.main > * { position:relative; z-index:1 }`, which also hit the
     fixed nav and gradient and flattened them into the section stack. Exclude
     those two so content stays above the backdrop without demoting the nav. */
  position: relative;
  z-index: 1;
}


/* --- button-anim.css --- */
/* ─────────────────────────────────────────────────────────────────────────────
   Shared CTA button hover animation
   ---------------------------------------------------------------------------
   Applied site-wide (index, 404) to the text + arrow CTAs:
     .c2a-button  .let-s-collaborate  .button.hero-download-btn
   Explicitly NOT applied to form submit buttons (.submit-button / .zf-submitColor).

   Behaviour on hover: the label fades out and the arrow icon glides to the
   LEFT side of the pill (full travel across), plus a subtle lift + brighten.
   The resting size/layout is never changed — the icon moves with a transform
   (no reflow) and the faded label keeps its box.

   js/button-anim.js tags each eligible button with .btn-anim and its parts with
   .btn-anim__label / .btn-anim__icon, and sets the per-button --arrow-shift
   (distance from the icon's centre to the pill's left inset) so this works for
   any label length or button structure.
   ───────────────────────────────────────────────────────────────────────── */

.btn-anim {
  position: relative;
  transition: box-shadow 0.25s ease, filter 0.25s ease !important;
  -webkit-tap-highlight-color: transparent;
  transform: none !important;
}

/* Hover lift / arrow swap — desktop pointer only (iOS sticky :hover looks broken) */
@media (hover: hover) and (pointer: fine) {
  .btn-anim:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(110, 30, 238, 0.28) !important;
    filter: brightness(1.04);
    text-decoration: none !important;
  }
}

/* Label: fade out on hover. `transform: none` overrides the shared stylesheet's hard-coded
   135px label slide so it fades in place instead of sliding off the pill. */
.btn-anim .btn-anim__label {
  transition: opacity 0.24s ease !important;
  transform: none !important;
}
/* Icon: glides to the pill's LEFT on hover (JS-measured --arrow-shift). */
.btn-anim .btn-anim__icon {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: transform;
  margin-left: auto;
}

@media (hover: hover) and (pointer: fine) {
  .btn-anim:hover .btn-anim__label {
    opacity: 0 !important;
  }
  .btn-anim:hover .btn-anim__icon {
    transform: translateX(var(--arrow-shift, -40px)) !important;
  }
  /* keep any nested arrow <img> steady inside its wrapper while the wrapper moves */
  .btn-anim:hover .btn-anim__icon img {
    transform: none !important;
  }

  /* Long Governments CTA: arrow left, label slides right beside it (stays visible) */
  .btn-anim.btn-anim--swap .btn-anim__label {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform;
  }
  .btn-anim.btn-anim--swap:hover .btn-anim__label {
    opacity: 1 !important;
    transform: translateX(var(--label-shift, 24px)) !important;
  }
}

/* ===== Site spacing — shared stylesheet overrides ===== */
.creative-mind-wrapper {
  margin-top: 0 !important;
}

.pricing-grid,
.review-grid,
.grid-18 {
  margin-top: 0 !important;
}

.section-8 .grid-16 {
  margin-bottom: var(--section-header-gap) !important;
}

/* FAQ title must stay one line — shared .heading-20 max-width:476px was wrapping "ask." */
.section-8 .heading-20 {
  max-width: min(100%, 920px) !important;
  white-space: nowrap;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .section-8 .heading-20 {
    white-space: normal;
  }
}

.call-to-action {
  margin-top: var(--section-header-gap) !important;
  padding: 28px 36px !important;
}

.container-14 {
  padding: var(--section-pad-y) 20px 20px !important;
}

.footer .container-14 {
  padding-top: 40px !important;
}

.grid-19 {
  margin-top: var(--section-gap-md) !important;
  margin-bottom: var(--section-gap-md) !important;
}

.footer .grid-19 {
  margin-top: 0 !important;
}

.home-innovation-section .innovation-grid {
  margin-top: 0 !important;
}

@media (max-width: 991px) {
  .home-innovation-section .container-5 {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .home-innovation-section .innovation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 767px) {
  .home-innovation-section .innovation-grid {
    grid-template-columns: 1fr !important;
  }
  .home-innovation-section h3.heading-25,
  .home-innovation-section .heading-25 {
    white-space: normal !important;
  }
}

/* ===== Site spacing rhythm ================================================
   One vertical system for the whole landing:
   • Section pad (--section-pad-y): air from divider → header, and section bottom
   • Header gap (--section-header-gap): header block → first content
   • Title gap (--section-title-gap): h2 → subtitle
   Dividers sit at section top (section::before), so equal pad-y keeps the
   divider centred in the white space between sections.
   ======================================================================== */

.home-logo-section,
.home-video-section,
.home-shift-section,
.home-about-section,
.home-caas-section,
.home-innovation-section,
.home-our-work-section,
.home-network-section,
.home-audiences-section,
.home-testimonial-stagger-section,
.home-infra-section,
.section-7,
.home-awards-section,
.home-our-team-sec,
.section-8,
.home-leadform-section,
.home-founder-section,
.section-6 {
  padding-top: var(--section-pad-y) !important;
  padding-bottom: var(--section-pad-y) !important;
}

/* Network: same pad rhythm as every other section (measured from globe/content box).
   No zeroed top pad — Work keeps its normal bottom pad too. */
.home-network-section::before {
  content: none !important;
  display: none !important;
}

.home-network-section {
  padding-top: var(--section-pad-y) !important;
  padding-bottom: var(--section-pad-y) !important;
}

@media (max-width: 991px) {
  .home-logo-section,
  .home-video-section,
  .home-shift-section,
  .home-about-section,
  .home-caas-section,
  .home-innovation-section,
  .home-our-work-section,
  .home-network-section,
  .home-audiences-section,
  .home-testimonial-stagger-section,
  .home-infra-section,
  .section-7,
  .home-awards-section,
  .home-our-team-sec,
  .section-8,
  .home-leadform-section,
  .home-founder-section,
  .section-6 {
    padding-top: var(--section-pad-y-sm) !important;
    padding-bottom: var(--section-pad-y-sm) !important;
  }
}

@media (max-width: 479px) {
  .home-logo-section,
  .home-video-section,
  .home-shift-section,
  .home-about-section,
  .home-caas-section,
  .home-innovation-section,
  .home-our-work-section,
  .home-network-section,
  .home-audiences-section,
  .home-testimonial-stagger-section,
  .home-infra-section,
  .section-7,
  .home-awards-section,
  .home-our-team-sec,
  .section-8,
  .home-leadform-section,
  .home-founder-section,
  .section-6 {
    padding-top: var(--section-pad-y-xs) !important;
    padding-bottom: var(--section-pad-y-xs) !important;
  }
}

/* —— Header → content gaps (one value everywhere) ——
   Headers own the space below them; content blocks don't also add margin-top. */
.innovation-heading-wrap,
.work-section-header,
.network-section-intro,
.caas-header,
.awards-header,
.testimonial-stagger-header,
.video-section-header,
.home-our-team-sec .ourteam-heading-div,
.section-8 .grid-16,
.section-7 .grid-12,
.home-infra-section .infra-heading {
  margin-bottom: var(--section-header-gap) !important;
}

.home-innovation-section .innovation-grid,
.home-audiences-section .audiences-grid,
.home-our-team-sec .creative-mind-wrapper,
.section-7 .report-grid,
.pricing-grid,
.review-grid,
.grid-18 {
  margin-top: 0 !important;
}

.home-infra-section .infra-heading {
  margin-top: 0 !important;
}

/* Titles → subtitles */
.innovation-heading-wrap,
.work-section-header {
  gap: var(--section-title-gap) !important;
}
.network-section-intro h2,
.caas-heading {
  margin-bottom: var(--section-title-gap) !important;
}
.awards-intro {
  margin-top: var(--section-title-gap) !important;
}

/* Network mid-rule: equal air above/below the line (same as section dividers) */
.network-grid {
  padding-top: var(--section-header-gap) !important;
}

/* CTA under card grids */
.home-innovation-section .call-to-action {
  margin-top: var(--section-header-gap) !important;
}

/* ===== Mobile responsiveness ===== */
html,
.main {
  overflow-x: clip;
}

.home-logo-section .logo-section {
  width: 100% !important;
}

@media (max-width: 991px) {
  .nav-menu-two-2 {
    display: none !important;
  }

  .div-block-53 {
    display: flex !important;
  }

  .navbar-wrapper-3 {
    padding: 12px 16px !important;
    border-radius: 0 !important;
  }

  .nav-logo {
    height: 32px !important;
    max-width: 140px !important;
  }

  .hero-figma__content {
    max-width: 100% !important;
  }

  .hero-cta-cluster {
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
  }

  .hero-cta-divider {
    display: none;
  }

  #home .hero-cta-cluster .trusted-text {
    white-space: normal;
    text-align: center;
    margin: 0 auto !important;
  }

  .network-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    justify-items: center;
    text-align: center;
  }

  .network-stat-block,
  .network-right-main {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  .network-stat-block {
    align-items: center;
  }

  .network-stat {
    font-size: clamp(56px, 12vw, 72px) !important;
  }

  .data-filter-row {
    justify-content: center;
  }

  .leadform-grid {
    grid-template-columns: 1fr !important;
  }

  .leadform-heading {
    text-align: left !important;
  }

  .leadform-offer {
    text-align: left;
  }

  .creative-mind-wrapper {
    grid-template-columns: 1fr 1fr !important;
  }

  .home-shift-heading {
    font-size: clamp(30px, 6vw, 44px) !important;
  }

  .home-shift-line {
    max-width: 100%;
  }

  .work-section-header .our-work-heading {
    white-space: normal !important;
    font-size: clamp(28px, 5vw, 40px) !important;
    line-height: 1.15 !important;
  }

  .pricing-grid {
    grid-template-columns: 1fr !important;
  }

  .report-grid {
    grid-template-columns: 1fr !important;
  }

  .testimonial-stagger-stage {
    height: 460px;
  }

  .count-block {
    grid-template-columns: 1fr !important;
  }

  .count-sec-divider {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .container-main,
  .container-4,
  .container-5,
  .container-6,
  .container-7,
  .container-8,
  .container-10 {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .creative-mind-wrapper {
    grid-template-columns: 1fr !important;
  }

  .innovation-grid {
    grid-template-columns: 1fr !important;
  }

  .home-heading-h2,
  .crafting-heading,
  .our-work-heading,
  .testimonial-heading-h2,
  .pricing-heading-h2,
  .creative-mind-heading,
  .heading-20,
  .video-heading,
  .infra-heading,
  .trusted-heading {
    font-size: clamp(26px, 7vw, 36px) !important;
    line-height: 1.15 !important;
  }

  .leadform-card {
    top: 0 !important;
  }

  .home-awards-section .award-card {
    width: 300px !important;
    max-width: none !important;
  }

  .testimonial-stagger-stage {
    height: 400px;
  }

  .stagger-card {
    width: min(82vw, 290px) !important;
    height: min(82vw, 290px) !important;
  }

  .grid-19 {
    grid-template-columns: 1fr !important;
  }

  .footer-column-4 .nav-text {
    white-space: normal;
  }

  .home-logo-section .logo-section {
    width: 100% !important;
    margin-left: 0 !important;
    transform: none !important;
  }

  .home-logo-section .static-marquee_logos {
    gap: 32px !important;
  }

  .home-logo-section .logo-marquee-item {
    width: auto;
    height: 68px;
    padding: 0;
  }

  .home-logo-section .marquee-logo {
    height: 52px;
    max-height: 52px;
    max-width: 152px;
  }
}

@media (max-width: 479px) {
  .container-main,
  .container-4,
  .container-5,
  .container-6,
  .container-7,
  .container-8,
  .container-10 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #home .hero-heading-h1 {
    font-size: clamp(32px, 9vw, 40px) !important;
  }

  .hero-eyebrow {
    font-size: clamp(11px, 3.1vw, 14px);
    letter-spacing: 0.03em;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
  }

  .home-shift-line,
  .positioning-line,
  .work-section-sub,
  .network-intro-line {
    font-size: 16px !important;
  }

  .call-to-action {
    padding: 24px 20px !important;
  }

  .stagger-card {
    width: min(86vw, 300px) !important;
    height: auto !important;
    min-height: min(112vw, 380px) !important;
    max-height: none !important;
    padding: 18px 16px 16px !important;
  }

  .testimonial-stagger-stage {
    height: auto !important;
    min-height: 460px !important;
  }

  .stagger-card-quote {
    -webkit-line-clamp: unset !important;
    display: block !important;
    overflow: visible !important;
  }

  .stagger-card-attr {
    white-space: normal;
  }
}

/* ==========================================================================
   Tourism typography uniformity — Alan Sans (headings) + Poppins (body) only
   ========================================================================== */
:root {
  --inter: "Poppins", sans-serif;
  --instrument: "Alan Sans", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--melange-display) !important;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.body,
body {
  font-family: var(--melange-body) !important;
}

.font-family-txt,
.font-family-txt.instrument-serif {
  font-family: var(--melange-body) !important;
  font-style: normal !important;
}

/* Remap hardcoded legacy stacks from melange-shared.css */
.nav-link-4,
.button,
.button-primary-2,
.navigation-link,
.navigation-link.for-footer,
.text-block-28,
.text-block-30,
.text-block-34,
.text-block-35,
.text-block-36,
.text-block-37,
.text-block-38,
.text-block-39 {
  font-family: var(--melange-body) !important;
}

.hero-heading-h1,
.crafting-heading,
.home-heading-h2,
.our-work-heading,
.testimonial-heading-h2,
.pricing-heading-h2,
.achevement-heading-h2,
.creative-mind-heading,
.heading-20,
.video-heading,
.infra-heading,
.leadform-heading,
.c2a-title,
.pricing,
.leadform-card-title {
  font-family: var(--melange-display) !important;
}

/* Highlighted accent words — keep purple colour, no italic */
.span-txt,
.hero-italic,
.span-italic-txt,
.text-span-6,
.text-span-9,
.text-span-14,
.text-span-15,
.text-span-16,
.text-span-17,
.text-span-18,
.text-span-19,
.hero-accent,
.trusted-accent,
.caas-acronym,
.caas-cap {
  font-family: var(--melange-display) !important;
  font-style: normal !important;
  font-weight: 600 !important;
}

/* —— Section headers: one line on desktop when they fit ——
   Leadform stays 2 lines (narrow offer column). CAAS lettermark left alone.
   Mobile wraps normally. */
.trusted-heading,
.video-heading,
.our-work-heading,
.crafting-heading:not(.caas-heading):not(.leadform-heading),
.home-heading-h2,
.builtfor-heading-form,
.testimonial-heading-h2,
.infra-heading,
.pricing-heading-h2,
.achevement-heading-h2,
.creative-mind-heading,
.heading-20 {
  white-space: nowrap !important;
  max-width: none !important;
}

.trusted-heading-wrap {
  max-width: none;
}

.testimonial-heading-h2 {
  max-width: none !important;
}

.achevement-heading-h2 {
  max-width: none !important;
}

@media (max-width: 991px) {
  .trusted-heading,
  .video-heading,
  .our-work-heading,
  .crafting-heading:not(.caas-heading):not(.leadform-heading),
  .home-heading-h2,
  .builtfor-heading-form,
  .testimonial-heading-h2,
  .infra-heading,
  .pricing-heading-h2,
  .achevement-heading-h2,
  .creative-mind-heading,
  .heading-20 {
    white-space: normal !important;
  }
}
.crafting-heading,
.home-heading-h2,
.our-work-heading,
.testimonial-heading-h2,
.pricing-heading-h2,
.achevement-heading-h2,
.creative-mind-heading,
.heading-20,
.video-heading,
.infra-heading,
.leadform-heading,
.trusted-heading,
.home-shift-heading,
.caas-heading,
.repurposed-heading-form,
.repurposed-heading-form2,
.builtfor-heading-form {
  font-size: 48px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
}

@media (max-width: 991px) {
  .crafting-heading,
  .home-heading-h2,
  .our-work-heading,
  .testimonial-heading-h2,
  .pricing-heading-h2,
  .achevement-heading-h2,
  .creative-mind-heading,
  .heading-20,
  .video-heading,
  .infra-heading,
  .leadform-heading,
  .trusted-heading,
  .home-shift-heading,
  .caas-heading,
  .repurposed-heading-form,
  .repurposed-heading-form2,
  .builtfor-heading-form {
    font-size: 36px !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 767px) {
  .crafting-heading,
  .home-heading-h2,
  .our-work-heading,
  .testimonial-heading-h2,
  .pricing-heading-h2,
  .achevement-heading-h2,
  .creative-mind-heading,
  .heading-20,
  .video-heading,
  .infra-heading,
  .leadform-heading,
  .trusted-heading,
  .home-shift-heading,
  .caas-heading,
  .repurposed-heading-form,
  .repurposed-heading-form2,
  .builtfor-heading-form {
    font-size: 32px !important;
    line-height: 1.15 !important;
  }
}

/* ===== Tourism type scale — max 3 sizes per section ========================
   Display = section h2 (48 / 36 / 32 lock above). Hero is the only h1.
   Title   = h3 / card titles (--type-title)
   Body    = copy, labels, meta, CTAs (--type-body)
   Anything that was a 4th/5th size is folded into title or body. */
:root {
  --type-title: 22px;
  --type-body: 16px;
}

/* Shared h3 resets so promoted titles keep prior spacing */
h3.heading-7,
h3.heading-25,
h3.creative-block-title,
h3.text-block-30,
h3.data-filter-title,
h3.infra-row-label,
h3.title,
h3.zf-frmTitle {
  margin-block: 0;
  font-weight: 600;
}

/* —— Hero: h1 + body (eyebrow / prompt / CTA → body; stats use title size) —— */
.section#home .hero-eyebrow,
.section#home .para-txt,
.section#home .hero-report-prompt,
.section#home .text-block-6 {
  font-size: var(--type-body) !important;
  line-height: 1.55 !important;
}
.section#home .trusted-text {
  font-size: var(--type-title) !important;
  line-height: 1.35 !important;
  font-family: var(--melange-display) !important;
  font-weight: 600 !important;
}

/* —— CAAS: display / title / body —— */
.home-caas-section .caas-number {
  font-size: 48px !important;
  line-height: 1.1 !important;
}
.home-caas-section .caas-step h3 {
  font-size: var(--type-title) !important;
  line-height: 1.3 !important;
}
.home-caas-section .caas-intro,
.home-caas-section .caas-step p {
  font-size: var(--type-body) !important;
  line-height: 1.6 !important;
}

/* —— Work cards —— */
.home-our-work-section .work-section-sub,
.home-our-work-section .work-card-eyebrow,
.home-our-work-section .work-card-description,
.home-our-work-section .work-card-description--tall,
.home-our-work-section .link-block-2,
.div-block-214 > .work-card-link.work-card--stats .work-card-eyebrow,
.div-block-214 > .work-card-link.work-card--stats .work-card-description--tall,
.div-block-214 > .work-card-link .link-block-2 {
  font-size: var(--type-body) !important;
  line-height: 1.5 !important;
}
/* Stat captions stay compact so the KPI strip can show full copy without clipping */
.home-our-work-section .work-card-stat-label,
.div-block-214 > .work-card-link.work-card--stats .work-card-stat-label {
  font-size: 13px !important;
  line-height: 1.4 !important;
}
.home-our-work-section h3.heading-7,
.div-block-214 > .work-card-link .heading-7,
.div-block-214 > .work-card-link.work-card--stats .heading-7,
.div-block-214 > .work-card-link.work-card--stats .work-card-stat-value {
  font-size: var(--type-title) !important;
  line-height: 1.3 !important;
}

/* —— Network —— */
/* .network-stat keeps its large figure size (not folded into type-title/body) */
.home-network-section .network-intro-line,
.home-network-section .network-stat-label,
.home-network-section .network-geo {
  font-size: var(--type-body) !important;
  line-height: 1.55 !important;
}

/* —— Services / built-for —— */
.home-innovation-section h3.heading-25,
.home-innovation-section .heading-25 {
  font-size: var(--type-title) !important;
  line-height: 1.3 !important;
  white-space: normal;
}
.home-innovation-section .title-1,
.home-innovation-section .title-2 {
  font-size: var(--type-title) !important;
  line-height: 1.3 !important;
}
.home-innovation-section .builtfor-sub,
.home-innovation-section .builtfor-descp,
.home-innovation-section .text-block-13 {
  font-size: var(--type-body) !important;
  line-height: 1.55 !important;
}

/* —— Testimonials: h2 + body (quote & attr share body size; contrast via weight/italic) —— */
.home-testimonial-stagger-section .stagger-card-quote,
.home-testimonial-stagger-section .stagger-card-attr {
  font-size: var(--type-body) !important;
  line-height: 1.35 !important;
}
.home-testimonial-stagger-section .stagger-card-quote {
  font-weight: 500 !important;
}
.home-testimonial-stagger-section .stagger-card-attr {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  font-weight: 400 !important;
}

/* —— Infra: h2 + row labels (body) —— */
.home-infra-section h3.infra-row-label,
.home-infra-section .infra-row-label {
  font-size: var(--type-body) !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
}

/* —— Reports (section = display h2 + title + body) ——
   KPIs use the display size step so they outrank the card title. */
.section-7 h3.report-card__title,
.section-7 .report-card__title {
  font-size: clamp(24px, 2.6vw, 36px) !important;
  line-height: 1.15 !important;
  font-family: var(--melange-display) !important;
  font-weight: 600 !important;
  font-style: normal !important;
  white-space: nowrap !important;
  max-width: none !important;
}
.section-7 .report-stat-value {
  font-size: 48px !important;
  line-height: 1.1 !important;
  font-family: var(--melange-display) !important;
  font-weight: 600 !important;
  font-style: normal !important;
  color: var(--melange-highlight) !important;
  -webkit-text-fill-color: var(--melange-highlight) !important;
}
.section-7 .feature-txt {
  font-size: var(--type-body) !important;
  line-height: 1.35 !important;
  font-family: var(--melange-display) !important;
  font-weight: 600 !important;
  font-style: normal !important;
}
.section-7 .badge,
.section-7 .badge div,
.section-7 .plan-descp,
.section-7 .report-card__descp,
.section-7 .report-stat-label,
.section-7 .text-block-28,
.section-7 .report-card__meta,
.section-7 .report-card__notify,
.section-7 .text-block-13,
.section-7 .let-s-collaborate {
  font-size: var(--type-body) !important;
  font-family: var(--melange-body) !important;
  font-style: normal !important;
  line-height: 1.5 !important;
}
.section-7 h3.report-card__title.pricing,
.section-7 h3.report-card__title {
  font-size: clamp(24px, 2.6vw, 36px) !important;
  font-family: var(--melange-display) !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  max-width: none !important;
}
.section-7 .report-stat-label {
  color: rgba(15, 3, 48, 0.7);
  letter-spacing: 0;
  text-transform: none;
  margin-top: 8px;
  font-weight: 500 !important;
  font-size: var(--type-body) !important;
  line-height: 1.35 !important;
}
.section-7 .report-card__meta {
  color: rgba(15, 3, 48, 0.7) !important;
}
.section-7 .report-card__features .feature-list {
  gap: 12px 32px !important;
  grid-row-gap: 12px !important;
}
@media (max-width: 991px) {
  .section-7 .report-stat-value {
    font-size: 36px !important;
  }
}
@media (max-width: 767px) {
  .section-7 .report-stat-value {
    font-size: 32px !important;
  }
}
.section-7 .report-card__features .list-item-8 {
  height: auto !important;
  gap: 10px !important;
}
.section-7 .report-card__features .image-4 {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: brightness(0) saturate(100%) invert(18%) sepia(90%) saturate(4500%) hue-rotate(258deg) brightness(95%);
}

/* —— Awards —— */
.home-awards-section .award-card h3,
.home-awards-section h3 {
  font-size: var(--type-title) !important;
  line-height: 1.3 !important;
}
.home-awards-section .awards-intro,
.home-awards-section .award-event {
  font-size: var(--type-body) !important;
  line-height: 1.5 !important;
}

/* —— Team —— */
.home-our-team-sec h3.creative-block-title,
.home-our-team-sec .creative-block-title {
  font-size: var(--type-title) !important;
  line-height: 1.3 !important;
}
/* One-line title is wider than the old 600px cap — that box was
   centered while overflow spilled right and looked off-center. */
.home-our-team-sec .ourteam-heading-div {
  justify-items: center;
  width: 100%;
}
.home-our-team-sec .creative-mind-heading {
  white-space: nowrap;
  max-width: none;
  width: max-content;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
@media (max-width: 767px) {
  .home-our-team-sec .creative-mind-heading {
    white-space: normal;
    width: 100%;
    max-width: 100%;
  }
}
.home-our-team-sec .position-txt {
  font-size: var(--type-body) !important;
  line-height: 1.4 !important;
}

/* —— FAQ —— */
.section-8 h3.text-block-30,
.section-8 .text-block-30 {
  font-size: var(--type-title) !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
}
.section-8 .text-block-34,
.section-8 .text-block-35,
.section-8 .text-block-36,
.section-8 .text-block-37,
.section-8 .text-block-38,
.section-8 .text-block-39,
.section-8 .faq-more-btn,
.section-8 .faq-more-btn__label {
  font-size: var(--type-body) !important;
  line-height: 1.55 !important;
}

/* —— Lead form: one section h2 + form h3 + body ——
   All controls share --type-body (inputs were 14px while notes textarea
   inherited 16px via a later equal-specificity rule). */
.home-leadform-section h3.zf-frmTitle,
.home-leadform-section .zf-frmTitle,
.home-leadform-section .zf-tempHeadContBdr .zf-frmTitle {
  font-size: var(--type-title) !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  text-align: center !important;
  font-family: var(--melange-display) !important;
}
.home-leadform-section .leadform-copy,
.home-leadform-section .leadform-whatyouget-title,
.home-leadform-section .leadform-bullet,
.home-leadform-section .leadform-contact-item,
.home-leadform-section .leadform-goals-label,
.home-leadform-section .leadform-checkbox,
.home-leadform-section .zf-frmDesc,
.home-leadform-section .zf-labelName,
.home-leadform-section .zf-checkChoice,
.home-leadform-section .zf-instruction,
.home-leadform-section .zf-errorMessage,
.home-leadform-section .zf-tempFrmWrapper input,
.home-leadform-section .zf-tempFrmWrapper textarea,
.home-leadform-section .zf-tempFrmWrapper select,
.home-leadform-section .leadform-card .zf-tempContDiv input,
.home-leadform-section .leadform-card .zf-tempContDiv input[type="text"],
.home-leadform-section .leadform-card .zf-tempContDiv textarea,
.home-leadform-section .leadform-card .zf-tempContDiv select,
.home-leadform-section .leadform-card .leadform-phone-code select,
.home-leadform-section .leadform-card .leadform-field--goals select,
.home-leadform-section .leadform-multiselect__trigger,
.home-leadform-section .leadform-multiselect__label,
.home-leadform-section .leadform-multiselect__option,
.home-leadform-section .zf-submitColor,
.home-leadform-section button.zf-submitColor,
.home-leadform-section button {
  font-size: var(--type-body) !important;
  font-family: var(--melange-body) !important;
}
.home-leadform-section .leadform-copy,
.home-leadform-section .leadform-bullet {
  line-height: 1.7 !important;
}
.home-leadform-section .leadform-whatyouget {
  gap: 0.45em !important;
}

/* —— Footer —— */
.footer h3.title,
.footer .title {
  font-size: var(--type-title) !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  margin: 0 0 18px !important;
}
.footer .list-5 {
  margin: 0 !important;
  padding: 0 !important;
}
.footer .nav-text,
.footer .text-block-32,
.footer .copyright-text,
.footer .list-item-9 {
  font-size: var(--type-body) !important;
}

/* Display-size sync for CAAS numbers on breakpoints */
@media (max-width: 991px) {
  .home-caas-section .caas-number {
    font-size: 36px !important;
  }
}
@media (max-width: 767px) {
  :root {
    --type-title: 20px;
    --type-body: 15px;
  }
  .home-caas-section .caas-number {
    font-size: 32px !important;
  }
}

/* ===== Title hard-cap (font audit) ========================================
   Title rung = --type-title (22 / 20). No card/section h3 may exceed it.
   Legacy landmines neutralized here:
   - shared .pricing was --heading-h3-desktop (48px)
   - form.css .zf-frmTitle was 33px
   - shared .heading-7 / .creative-block-title / .text-block-30 were 24px
   Display rung (section h2), hero h1, and figure stats stay exempt. */
.main h3.heading-7,
.main h3.heading-25,
.main h3.creative-block-title,
.main h3.text-block-30,
.main h3.data-filter-title,
.main h3.zf-frmTitle,
.main h3.pricing,
.main .caas-step h3,
.main .award-card h3,
.main .leadform-card-title,
.main .zf-tempHeadContBdr .zf-frmTitle,
.footer h3.title {
  font-size: var(--type-title) !important;
  line-height: 1.3 !important;
}

/* Report card title — larger, single line (exempt from title hard-cap) */
.main h3.report-card__title,
.main h3.report-card__title.pricing,
.section-7 h3.report-card__title {
  font-size: clamp(24px, 2.6vw, 36px) !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  max-width: none !important;
}

@media (max-width: 767px) {
  .main h3.report-card__title,
  .main h3.report-card__title.pricing,
  .section-7 h3.report-card__title {
    font-size: clamp(18px, 4.2vw, 24px) !important;
  }
}

/* —— No all-caps copy on the tourism page —— */
.main,
.main *,
.footer,
.footer * {
  text-transform: none !important;
}

/* ===== UX / a11y polish (audit pass) ====================================== */

/* Focus rings — restore keyboard affordance sitewide */
.main a:focus-visible,
.main button:focus-visible,
.main .w-dropdown-toggle:focus-visible,
.main .accordion-toggle:focus-visible,
.main input:focus-visible,
.main textarea:focus-visible,
.main select:focus-visible,
.footer a:focus-visible,
.footer button:focus-visible,
.zf-submitColor:focus-visible,
.faq-more-btn:focus-visible,
.menu-toggle-btn:focus-visible,
.menu-close-btn:focus-visible,
.btn-anim:focus-visible,
.c2a-button:focus-visible,
.leadform-contact-item:focus-visible,
.linkedin-link:focus-visible {
  outline: 2px solid #6e1eee !important;
  outline-offset: 3px !important;
}

/* Mobile menu controls — real buttons, 44px targets.
   Hidden on desktop (shared .div-block-53 { display:none }); only show ≤991px. */
.menu-toggle-btn,
.menu-close-btn {
  appearance: none;
  border: none;
  background: transparent;
  padding: 10px;
  margin: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}
.menu-toggle-btn {
  display: none; /* desktop: keep hamburger hidden */
}
.menu-close-btn {
  display: inline-flex;
}
.menu-close-btn .image-9,
.menu-toggle-btn .image-28 {
  display: block;
  pointer-events: none;
}
/* —— Mobile nav drawer (vanilla; do not rely on Webflow IX2) —— */
@media (max-width: 991px) {
  .menu-toggle-btn,
  button.div-block-53.menu-toggle-btn {
    display: inline-flex !important;
  }
  .mobile-menu-overlay {
    z-index: 98;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: none;
    position: fixed;
    inset: 0;
  }
  .mobile-menu-overlay.is-open {
    display: block !important;
  }
  #mobileNavDrawer.div-block-29 {
    z-index: 99;
    display: flex !important;
    position: fixed;
    inset: 0 0 0 auto;
    width: min(300px, 86vw);
    max-width: 300px;
    height: 100vh;
    height: 100dvh;
    transform: translate3d(100%, 0, 0);
    transition: transform 0.28s ease;
    background: transparent;
  }
  #mobileNavDrawer.div-block-29.is-open {
    transform: translate3d(0, 0, 0) !important;
  }
  body.mobile-menu-open {
    overflow: hidden !important;
  }
}

/* Keep primary nav CTA on tablet/mobile (shared CSS hid it) */
@media (max-width: 991px) {
  .navbar-wrapper-3 .c2a-button {
    display: inline-flex !important;
    align-items: center;
    height: 40px !important;
    padding: 0 14px 0 16px !important;
  }
  .navbar-wrapper-3 .c2a-button .text-block-5 {
    font-size: var(--type-body) !important;
    white-space: nowrap;
  }
}
@media (max-width: 479px) {
  .navbar-wrapper-3 .c2a-button .text-block-5 {
    /* Compact label on the smallest screens */
    font-size: 0 !important;
  }
  .navbar-wrapper-3 .c2a-button .text-block-5::after {
    content: "Collaborate";
    font-size: var(--type-body);
  }
}

/* Team LinkedIn — larger hit area */
.home-our-team-sec .linkedin-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  margin: -10px;
}

/* Leadform contact links */
a.leadform-contact-item {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, opacity 0.15s ease;
}
a.leadform-contact-item:hover {
  border-bottom-color: currentColor;
  opacity: 0.85;
}

.home-leadform-section .zf-instruction-inline {
  font-size: inherit !important;
  font-family: var(--melange-body) !important;
}

/* FAQ toggles feel clickable */
.section-8 .accordion-toggle {
  cursor: pointer;
}
.section-8 .accordion-toggle:focus-visible {
  outline: 2px solid #6e1eee !important;
  outline-offset: 2px !important;
}

/* Reduced motion — pause heavy motion, but keep logo/infra marquees running
   (iOS “Reduce Motion” was freezing trusted logos while awards still felt fine). */
@media (prefers-reduced-motion: reduce) {
  .awards-track,
  .awards-track-left,
  .btn-anim,
  .btn-anim *,
  .stagger-card,
  .work-carousel-nav {
    transition: none !important;
  }
  .awards-track .awards-row,
  .awards-track-left .awards-row {
    animation-duration: 80s !important;
  }
  html {
    scroll-behavior: auto !important;
  }
}

/* Force continuous marquee on touch / coarse pointers (no sticky hover pause) */
@media (hover: none), (pointer: coarse) {
  .marquee-css-scroll,
  .infra-track,
  .infra-track-logos,
  .awards-track .awards-row,
  .awards-track-left .awards-row {
    animation-play-state: running !important;
  }
}

/* Back to top — appears near page end */
.back-to-top {
  position: fixed;
  right: 24px;
  /* Sit above the footer's legal-link row so it never covers Cookie/Privacy */
  bottom: max(96px, calc(env(safe-area-inset-bottom, 0px) + 96px));
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 48px;
  min-height: 48px;
  padding: 14px;
  border: none;
  border-radius: 999px;
  background: #6e1eee;
  color: #fff;
  font-family: var(--melange-body, inherit);
  font-size: var(--type-body, 16px);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(57, 16, 123, 0.28);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
}
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top[hidden] {
  display: none !important;
}
.back-to-top:hover {
  background: #5a12d4;
}
.back-to-top:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.back-to-top svg {
  flex-shrink: 0;
}
/* Keep the control compact so it doesn't collide with footer copy */
.back-to-top span {
  display: none;
}
@media (max-width: 767px) {
  .back-to-top {
    right: 16px;
    bottom: max(88px, calc(env(safe-area-inset-bottom, 0px) + 88px));
    padding: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: none;
  }
}


/* Governments CTA only — white pill on purple bar; other buttons untouched */
#governments .let-s-collaborate {
  background: #ffffff !important;
  border: 2px solid #ffffff !important;
  color: #0F0330 !important;
  box-shadow: 0 8px 24px rgba(15, 3, 48, 0.12);
}
#governments .let-s-collaborate .text-block-13 {
  color: #0F0330 !important;
}
#governments .let-s-collaborate .div-block-21 {
  background: var(--melange-accent) !important;
}

/* Brand palette 2026-07-24 */
.main {
  background: #ffffff;
}
.main > section:not(#home):not(.section#home),
.main > .home-logo-section,
.main > .home-video-section,
.main > .home-caas-section,
.main > .home-innovation-section,
.main > .home-our-work-section,
.main > .home-network-section,
.main > .home-audiences-section,
.main > .home-testimonial-stagger-section,
.main > .home-infra-section,
.main > .home-awards-section,
.main > .home-our-team-sec,
.main > .home-leadform-section,
.main > .section-7,
.main > .section-8,
.main > .section-6 {
  background-color: #ffffff !important;
}
