/* Tokens */
:root {
  --white:       #ffffff;
  --btn-bg:      #1977f3;
  --grad-1:      #01163b;
  --grad-2:      rgba(16,  56, 126, 0.96);
  --grad-3:      rgba(37,  92, 187, 0.213);
  --grad-4:      rgba(52, 108, 204, 0);
  --font:        'Poppins', sans-serif;
  /* Figma node values */
  --h-size:      50px;
  --h-lh:        58px;
  --h-ls:        -0.4px;
  --nav-size:    16px;
  --nav-lh:      24px;
  --nav-ls:      -0.4px;
  --btn-radius:  30px;
  --btn-h:       48px;
  --btn-w:       233px;
  --btn-px:      32px;
  --btn-py:      8px;
}

/* Reset */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: clip; } /* clip: no scroll container created, preserves position:sticky */
body { overflow-x: clip; }
body { background: #fff; }

/* ── Hero section: full viewport width, fixed Figma height ── */
.hero {
  position: relative;
  width:    100%;
  height:   585px;
  overflow: hidden;
}

/* ── Background: fills 100% width so no gap on wide screens ── */
.hero-bg {
  position:       absolute;
  inset:          0;
  background:     #d9d9d9;
  pointer-events: none;
}

/* BG layer positions from Figma MCP (percentages of container) */
.hero-bg .bg-l1 {
  position: absolute;
  left:     17.21%;
  top:      -22.03%;
  width:    89.63%;
  height:   126.86%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}
.hero-bg .bg-l3 {
  position: absolute;
  left:     -23.47%;
  top:      -5.13%;
  width:    134.86%;
  height:   105.11%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}
.hero-bg .bg-l4 {
  position: absolute;
  left:     -3.61%;
  top:      -14.39%;
  width:    121.88%;
  height:   121.88%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}

/* Gradient overlay — exact Figma stops */
.bg-grad {
  position: absolute;
  inset:    0;
  background: linear-gradient(
    91.83deg,
    var(--grad-1)  1.3729%,
    var(--grad-2) 40.624%,
    var(--grad-3) 64.248%,
    var(--grad-4) 75.74%
  );
}

/* ── Inner wrapper: centers Figma content at max 1440px ── */
.hero-inner {
  position:   relative;
  max-width:  1440px;
  height:     100%;
  margin:     0 auto;
}

/* ── Nav bar: full viewport width, flex row ── */
.hero-nav {
  position:    absolute;
  top:         0;
  left:        0;
  right:       0;
  display:     flex;
  align-items: center;
  height:      99px;
  padding:     0 40px;
  box-sizing:  border-box;
  z-index:     10;
}

/* ── Logo ── */
.site-logo {
  width:           auto;
  height:          36px;
  object-fit:      contain;
  object-position: left center;
  flex-shrink:     0;
  z-index:         10;
}

/* ── Nav ── */
.site-nav {
  display:        flex;
  align-items:    center;
  gap:            32px;
  margin-left:    auto;
  padding-right:  32px;
  z-index:        10;
  flex-shrink:    0;
}
.site-nav a {
  font-family:     var(--font);
  font-weight:     500;
  font-size:       var(--nav-size);
  line-height:     var(--nav-lh);
  letter-spacing:  var(--nav-ls);
  color:           var(--white);
  text-decoration: none;
  text-transform:  capitalize;
  white-space:     nowrap;
  flex-shrink:     0;
}

/* ── Nav accordion groups (desktop: transparent wrappers) ── */
.nav-group {
  display:     flex;
  align-items: center;
}
.nav-group-trigger {
  font-family:    var(--font);
  font-weight:    500;
  font-size:      var(--nav-size);
  line-height:    var(--nav-lh);
  letter-spacing: var(--nav-ls);
  color:          var(--white);
  text-transform: capitalize;
  white-space:    nowrap;
  flex-shrink:    0;
  background:     none;
  border:         none;
  cursor:         pointer;
  padding:        0;
  display:        flex;
  align-items:    center;
  gap:            5px;
}
.nav-group-items { display: none; }   /* hidden at desktop */
.nav-sub-link    { display: none; }   /* hidden at desktop */
.nav-chevron {
  display: none;                       /* hidden at desktop */
  width:  10px;
  height: 6px;
  flex-shrink: 0;
}

/* ── GPW Badge ── */
.cert-badge {
  width:      47px;
  height:     79px;
  object-fit: contain;
  flex-shrink: 0;
  z-index:    10;
}

/* ── Hero text (node 141:1771): x=164 y=193 w=644 flex-col gap=32 ── */
.hero-content {
  position:       absolute;
  left:           164px;
  top:            193px;
  width:          644px;
  display:        flex;
  flex-direction: column;
  gap:            32px;
  z-index:        2;
}

/* Heading (node 141:1772): Poppins Bold 50/58px -0.4px ls */
.hero-heading {
  font-family:    var(--font);
  font-weight:    700;
  font-size:      var(--h-size);
  line-height:    var(--h-lh);
  letter-spacing: var(--h-ls);
  color:          var(--white);
  text-transform: capitalize;
  width:          644px;
  word-break:     break-word;
}

/* Button (node 141:1773): #1977f3 233x48px r=30px px=32 py=8 Poppins Medium 16px */
.hero-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           var(--btn-w);
  height:          var(--btn-h);
  padding:         var(--btn-py) var(--btn-px);
  background:      var(--btn-bg);
  border-radius:   var(--btn-radius);
  border:          2px solid var(--btn-bg);
  font-family:     var(--font);
  font-weight:     500;
  font-size:       var(--nav-size);
  line-height:     var(--nav-lh);
  letter-spacing:  var(--nav-ls);
  color:           var(--white);
  text-decoration: none;
  text-transform:  capitalize;
  white-space:     nowrap;
  cursor:          pointer;
  flex-shrink:     0;
  transition:      background 0.2s ease, color 0.2s ease;
}
.hero-btn:hover {
  background:   #fff;
  color:        #131313;
  border-color: transparent;
}


/* ══════════════════════════════════════════════════════════
   PARTNER LOGOS STRIP  (node 141:1774 — Component 6)
   ══════════════════════════════════════════════════════════ */

/* Section: white bg, vertical padding derived from Figma y-offset
   Hero ends at ~585px, logos at y=633 → 48px gap above, match below */
.logos-strip {
  background:     #ffffff;
  padding:        48px 0 50px;
  width:          100%;
}

/* Carousel wrapper: fixed height, relative so groups stack */
.logos-carousel {
  position:       relative;
  max-width:      1440px;
  margin:         0 auto;
  padding:        0 164px;
  height:         95.135px;
}

/* Each group of 5 cards: fades in/out */
.logos-group {
  position:       absolute;
  inset:          0 164px;
  display:        flex;
  align-items:    center;
  gap:            14.36px;
  opacity:        0;
  transition:     opacity 0.8s ease;
  pointer-events: none;
}
.logos-group--active {
  opacity:        1;
  pointer-events: auto;
}

/* Placeholder card label */
.logo-card--placeholder {
  color:     #c0cfe0;
  font-size: 13px;
  font-family: 'Poppins', sans-serif;
}

/* Group-2 logos: full card image (card styling baked in) */
.logo-card-full {
  width:       210.912px;
  height:      95.135px;
  object-fit:  contain;
  flex-shrink: 0;
}

/* Card: white bg, #e3efff border 0.897px, radius 16.155px, 210.912 × 95.135px */
.logo-card {
  background:     #ffffff;
  border:         0.897px solid #e3efff;
  border-radius:  16.155px;
  width:          210.912px;
  height:         95.135px;
  display:        flex;
  align-items:    center;
  justify-content: center;
  flex-shrink:    0;
}

/* Generic logo wrapper: object-fit contain, fills its container */
.logo-wrap {
  display:        flex;
  align-items:    center;
  justify-content: center;
  overflow:       hidden;
}

.logo-wrap img {
  display:        block;
  width:          100%;
  height:         100%;
  object-fit:     contain;
}

/* ── Cevitr: exact overflow-clip from Figma ──────────────
   Container: 146.333 × 34.993px
   Image: h=341.06%, left=-6.52%, top=-122.8%, w=115.22% */
.cevitr-clip {
  position:       relative;
  width:          146.333px;
  height:         34.993px;
  overflow:       hidden;
}

.cevitr-clip img {
  position:       absolute;
  height:         341.06%;
  left:           -6.52%;
  top:            -122.8%;
  width:          115.22%;
  max-width:      none;
  object-fit:     unset;
}

/* ── Zellis: slight overflow-clip from Figma ─────────────
   Container: 96.032 × 51.157px
   Image: h=103.7%, left=0, top=-3.51%, w=99.57% */
.zellis-clip {
  position:       relative;
  width:          96.032px;
  height:         51.157px;
  overflow:       hidden;
}

.zellis-clip img {
  position:       absolute;
  height:         103.7%;
  left:           0;
  top:            -3.51%;
  width:          99.57%;
  max-width:      none;
  object-fit:     unset;
}


/* ══════════════════════════════════════════════════════════
   SERVICES SECTION  (node 141:1786)
   Tokens source: Figma MCP get_design_context + use_figma
   ══════════════════════════════════════════════════════════ */

/* Section wrapper */
.svc-section {
  position:    relative;
  background:  #ffffff;
  width:       100%;
  overflow:    clip; /* clip trims visual overflow without creating scroll container — keeps sticky working */
}

/* Inner container: 1112px centered (164px padding each side) */
.svc-inner {
  position:   relative;
  max-width:  1440px;
  margin:     0 auto;
  padding:    0 164px;
}

/* ── Decorative vectors (nodes 141:1787 & 141:1788) ──────── */
.svc-deco {
  position:       absolute;
  pointer-events: none;
  display:        flex;
  align-items:    center;
  justify-content: center;
}

/* Vector 1: -344px from content left edge, responsive via calc */
.svc-deco-1 {
  left:   calc(50% - 1064px);
  top:    346px;
  width:  877.555px;
  height: 945.763px;
}
.svc-deco-img-1 {
  width:      805.726px;
  height:     499.892px;
  max-width:  none;
  transform:  rotate(54.073deg);
}

/* Vector 2: aligned to content left edge, responsive via calc */
.svc-deco-2 {
  left:   calc(50% - 720px);
  top:    2288.7px;
  width:  499.892px;
  height: 805.726px;
}
.svc-deco-img-2 {
  width:      805.726px;
  height:     499.892px;
  max-width:  none;
  transform:  rotate(-90deg);
}

/* ── Two-column layout (Figma flex-row gap=4px pt=70px) ─── */
.svc-layout {
  display:        flex;
  flex-direction: row;
  gap:            4px;
  align-items:    flex-start;
  padding-top:    70px;
  padding-bottom: 70px;
}

/* ── LEFT: sticky heading column (node 141:1789) ─────────
   552×363px, sticky top=0, flex-col gap=42px, justify-end */
.svc-left {
  width:          552px;
  flex-shrink:    0;
  position:       sticky;
  top:            70px;
  align-self:     flex-start;         /* required: flex-start so sticky triggers vs scroll */
  display:        flex;
  flex-direction: column;
  gap:            42px;
  z-index:        5;
}

/* Text group inside left col: flex-col gap=32px */
.svc-left-text {
  display:        flex;
  flex-direction: column;
  gap:            32px;
}

/* Heading: Poppins Bold 36px/46px #080a0b capitalize */
.svc-heading {
  font-family:    'Poppins', sans-serif;
  font-weight:    700;
  font-size:      36px;
  line-height:    46px;
  color:          #080a0b;
  text-transform: capitalize;
  letter-spacing: 0;
}

/* Sub-text: Poppins Regular 16px/26px #383838 w=515px */
.svc-sub {
  font-family:  'Poppins', sans-serif;
  font-weight:  400;
  font-size:    16px;
  line-height:  26px;
  color:        #383838;
  width:        515px;
}

/* CTA button: bg=black r=30px 202×48px px=32 py=8 Poppins Medium 16px -0.4px */
.svc-cta {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           202px;
  height:          48px;
  padding:         8px 32px;
  background:      #000000;
  border-radius:   30px;
  border:          none;
  font-family:     'Poppins', sans-serif;
  font-weight:     500;
  font-size:       16px;
  line-height:     24px;
  letter-spacing:  -0.4px;
  color:           #ffffff;
  text-decoration: none;
  text-transform:  capitalize;
  white-space:     nowrap;
  flex-shrink:     0;
  transition:      background 0.2s ease;
}
.svc-cta:hover {
  background: #4876f5;
}

/* ── RIGHT: cards column (node 141:1794) ─────────────────
   556px wide, flex-col gap=24px */
.svc-right {
  width:          556px;
  flex-shrink:    0;
  display:        flex;
  flex-direction: column;
  gap:            24px;
}

/* ── Service card ────────────────────────────────────────
   556×311px / gradient white→#edf2f9 / border #edf2f9 1px / r=24px */
.svc-card {
  background:    linear-gradient(to bottom, #ffffff 0%, #edf2f9 100%);
  border:        1px solid #edf2f9;
  border-radius: 24px;
  width:         556px;
  height:        311px;
  overflow:      hidden;
  position:      relative;
  flex-shrink:   0;
}

/* Card inner: absolute left=31 top=31 w=492 flex-col gap=24px */
.svc-card-inner {
  position:       absolute;
  left:           31px;
  top:            31px;
  width:          492px;
  display:        flex;
  flex-direction: column;
  gap:            24px;
}

/* Card 1 has a 27px gap between icon and text group */
.svc-card-inner--gap27 {
  gap: 27px;
}

/* ── Icon box: 82×82px bg=#1977f3 r=16px, icon 42×42px ─ */
.svc-icon {
  width:           82px;
  height:          82px;
  background:      #1977f3;
  border-radius:   16px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  overflow:        hidden;
}

.svc-icon img {
  width:      42px;
  height:     42px;
  object-fit: contain;
  display:    block;
}

/* Card 1: plain icon — no blue bg, full 82×82 image */
.svc-icon--plain {
  background:   transparent;
  border-radius: 0;
  padding:      0;
}
.svc-icon--plain img {
  width:      82px;
  height:     82px;
  object-fit: contain;
}

/* ── Text group inside card: gap=16px ─────────────────── */
.svc-text-group {
  display:        flex;
  flex-direction: column;
  gap:            16px;
}

/* Card title: Poppins Bold 20px/26px #080a0b */
.svc-card-title {
  font-family:  'Poppins', sans-serif;
  font-weight:  700;
  font-size:    20px;
  line-height:  26px;
  color:        #080a0b;
  white-space:  nowrap;
}

/* Card body text: Poppins Regular 16px/normal #383838 w=490px */
.svc-card-body {
  font-family:  'Poppins', sans-serif;
  font-weight:  400;
  font-size:    16px;
  line-height:  normal;
  color:        #383838;
  width:        490px;
}


/* ══════════════════════════════════════════════════════════
   CTA BANNER SECTION  (nodes 141:1896 + 141:1916)
   Tokens: Figma MCP get_design_context + use_figma
   ══════════════════════════════════════════════════════════ */

/* Section: full-width, 324px tall, overflow hidden */
.banner {
  position: relative;
  width:    100%;
  height:   324px;
  overflow: hidden;
}

.banner-bg {
  position:   absolute;
  inset:      0;
  background:
    radial-gradient(82% 120% at 0% 100%, rgba(0, 10, 58, .92) 0%, rgba(3, 31, 117, .68) 44%, rgba(7, 71, 190, 0) 76%),
    radial-gradient(76% 108% at 100% 12%, rgba(138, 190, 255, .78) 0%, rgba(92, 157, 246, .54) 42%, rgba(20, 93, 215, 0) 74%),
    radial-gradient(66% 92% at 100% 72%, rgba(78, 143, 240, .42) 0%, rgba(12, 79, 204, .24) 42%, rgba(4, 35, 125, 0) 74%),
    linear-gradient(106deg, #052579 0%, #0755ce 52%, #75abff 100%);
}

.banner-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 86% at 46% 58%, rgba(0, 20, 92, .34) 0%, rgba(0, 20, 92, 0) 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(1, 11, 56, .22) 100%);
}

/* ── Grain texture overlay (nodes 141:1899 & 141:1900) ────
   Two identical layers, each: mix-blend-mode soft-light
   Outer opacity=0.30, inner=0.73 → combined ≈ 0.219 per layer */
.banner-grain-outer {
  position:        absolute;
  inset:           0;
  mix-blend-mode:  soft-light;
  opacity:         0.30;
  pointer-events:  none;
}
.banner-grain-inner {
  position:            absolute;
  inset:               0;
  background-image:    url('../../images/ai-2026/banner-grain.png');
  background-size:     180.4px 180.4px;
  background-position: top left;
  background-repeat:   repeat;
  opacity:             0.73;
}

/* ── Content canvas: 1440px centred ─────────────────────── */
.banner-canvas {
  position:  absolute;
  top:       0;
  left:      50%;
  transform: translateX(-50%);
  width:     1440px;
  height:    324px;
}

/* ── Text + CTA (node 141:1916): left=164 top=80 w=592 h=164 ─ */
.banner-text {
  position:       absolute;
  left:           164px;
  top:            80px;
  width:          592px;
  display:        flex;
  flex-direction: column;
  gap:            24px;
}

/* Heading group: flex-col gap=12px */
.banner-copy {
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

/* Heading (141:1918): Poppins Bold 24px / auto lh / white */
.banner-heading {
  font-family:  'Poppins', sans-serif;
  font-weight:  700;
  font-size:    24px;
  line-height:  normal;
  color:        #ffffff;
  width:        532px;
}

/* Sub-text (141:1919): Poppins Regular 16px / 150% lh / white */
.banner-sub {
  font-family:  'Poppins', sans-serif;
  font-weight:  400;
  font-size:    16px;
  line-height:  1.5;
  color:        #ffffff;
  width:        532px;
}

/* ── CTA button (141:1920) ───────────────────────────────
   bg=#0d6efd / r=55px / h=44px / pl=12 pr=28
   backdrop-blur=47.7px / gap=10px */
.banner-cta {
  display:           inline-flex;
  align-items:       center;
  gap:               10px;
  height:            44px;
  padding:           10px 28px 10px 12px;
  background:        #0d6efd;
  border-radius:     55px;
  -webkit-backdrop-filter: blur(47.7px);
  backdrop-filter:   blur(47.7px);
  text-decoration:   none;
  overflow:          hidden;
  position:          relative;
  width:             fit-content;
  flex-shrink:       0;
  transition:        background 0.2s ease;
  --fill-0:          #0d6efd;
}
.banner-cta:hover {
  background: #ffffff;
  --fill-0:   #ffffff;
}
.banner-cta:hover .banner-cta-icon {
  background: #0d6efd;
}
.banner-cta:hover .banner-cta-label {
  color: #131313;
}
.banner-cta:hover .banner-cta-icon-img {
  filter: brightness(0) invert(1);
}

/* White icon circle: 28×28px r=35px */
.banner-cta-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           28px;
  height:          28px;
  background:      #ffffff;
  border-radius:   35px;
  flex-shrink:     0;
  transition:      background 0.2s ease;
}
.banner-cta-icon-img {
  width:      21px;
  height:     21px;
  object-fit: contain;
  display:    block;
  transition: filter 0.2s ease;
}

/* Button label: Manrope Bold 16px/24px white */
.banner-cta-label {
  font-family:    'Manrope', sans-serif;
  font-weight:    700;
  font-size:      16px;
  line-height:    24px;
  color:          #ffffff;
  white-space:    nowrap;
  transition:     color 0.2s ease;
}

/* ── Shared: all absolutely-positioned banner elements ─── */
.bann-abs {
  position: absolute;
}

/* ── Photo ellipses (nodes 141:1902-1904) ────────────────
   Positions: left=page_x, top=page_y-3989 */
.bann-photo {
  object-fit:    cover;
  border-radius: 50%;
  display:       block;
}
.bann-photo-1 { left: 1091.25px; top: 61.46px;  width: 88.464px; height: 88.856px; }
.bann-photo-2 { left: 1111.74px; top: 175.33px; width: 87.772px; height: 88.552px; }
.bann-photo-3 { left:  879.04px; top: 161.03px; width: 88.464px; height: 88.464px; }

/* ── Icon circles: shared ────────────────────────────────
   All: bg=#f2f1ff, border-radius=62.663px (fully round for any size) */
.bann-ic {
  background:    #f2f1ff;
  border-radius: 62.663px;
}

/* Inner frame holds the icon SVG; insets from Figma % values */
.bann-ic-frame {
  position: absolute;
  overflow: hidden;
}
.bann-ic-frame img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  max-width:  none;
  object-fit: contain;
}

/* ── Individual icon sizes, positions, insets ────────────
   left=page_x, top=page_y-3989, sizes/insets verbatim from Figma */

/* Square/Message (141:1915) */
.bann-ic-message  { left: 850.99px; top: 53.25px;  width: 88.552px; height: 88.552px; }
.bann-ic-message  .bann-ic-frame { inset: 21.77% 21.77% 21.77% 21.76%; }

/* Square/Barchart (141:1914) */
.bann-ic-barchart { left: 818.41px; top: 137.22px; width: 57.559px; height: 57.559px; }
.bann-ic-barchart .bann-ic-frame { inset: 8.3% 8.3% 8.3% 8.31%; }

/* Square/Server (141:1913) */
.bann-ic-server   { left: 772.03px; top: 80.2px;   width: 51.655px; height: 51.655px; }
.bann-ic-server   .bann-ic-frame { inset: 24.78% 20.69% 17.14% 21.23%; }

/* Square/Increase Graph (141:1912) */
.bann-ic-increase { left: 947.49px; top: 97.12px;  width: 87.076px; height: 87.076px; }
.bann-ic-increase .bann-ic-frame { inset: 27.03% 27.18% 27.03% 26.89%; }

/* Square/Users (141:1911) */
.bann-ic-users    { left: 1023.94px; top: 52px;    width: 56.083px; height: 56.083px; }
.bann-ic-users    .bann-ic-frame { inset: 25.04% 25.04% 25.04% 25.03%; }

/* Square/Desktop (141:1910) */
.bann-ic-desktop  { left: 1043.99px; top: 140.98px; width: 62.663px; height: 62.663px; }
.bann-ic-desktop  .bann-ic-frame { inset: 20.78% 23.39% 23.37% 20.76%; }

/* Square/Wallet (141:1909) — non-square: 45.117×45.752px */
.bann-ic-wallet   { left: 1228.85px; top: 194.87px; width: 45.117px; height: 45.752px; }
.bann-ic-wallet   .bann-ic-frame { inset: 24.32% 19.87% 23.22% 26.93%; }

/* Square/VideoCamera (141:1908) */
.bann-ic-videocam { left: 1190.62px; top: 131.58px; width: 51.655px; height: 51.655px; }
.bann-ic-videocam .bann-ic-frame { inset: 18.06% 18.06% 18.06% 18.05%; }

/* Square/Rocket (141:1907) */
.bann-ic-rocket   { left: 1213.01px; top: 68.29px;  width: 45.752px; height: 45.752px; }
.bann-ic-rocket   .bann-ic-frame { inset: 25% 25.01% 23.61% 23.6%; }

/* Square/Chart (141:1906) */
.bann-ic-chart    { left: 776.42px;  top: 201.76px; width: 69.366px; height: 69.366px; }
.bann-ic-chart    .bann-ic-frame { inset: 17.56%; }

/* Square/User (141:1905) */
.bann-ic-user     { left: 978.82px;  top: 201.76px; width: 69.366px; height: 69.366px; }
.bann-ic-user     .bann-ic-frame { inset: 22.61% 22.68% 22.61% 22.54%; }


/* ══════════════════════════════════════════════════════════
   AI TECHNOLOGIES SECTION  (node 141:1921)
   Tokens: Figma MCP get_design_context + metadata
   ══════════════════════════════════════════════════════════ */

/* Section: 1440 × 936px, light gradient background */
.tech-section {
  position:   relative;
  width:      100%;
  height:     936px;
  overflow:   hidden;
  background:
    radial-gradient(92% 72% at -10% 96%, rgba(42, 120, 255, .66) 0%, rgba(96, 128, 255, .54) 34%, rgba(166, 184, 255, .38) 56%, rgba(255, 255, 255, 0) 82%),
    radial-gradient(62% 70% at 102% 56%, rgba(255, 211, 242, .22) 0%, rgba(255, 237, 250, .16) 42%, rgba(255, 255, 255, 0) 78%),
    radial-gradient(92% 42% at 34% 100%, rgba(70, 137, 255, .40) 0%, rgba(166, 187, 255, .30) 46%, rgba(255, 255, 255, 0) 82%),
    linear-gradient(180deg, #fff 0%, #fff 37%, #fbfdff 68%, #f7fbff 100%);
}
.tech-section::before {
  content:         '';
  display:         none;
}
.tech-section::after {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 34%, rgba(255,255,255,.18) 100%);
  pointer-events: none;
  z-index:        1;
}

/* Content column: 1112px, centred via left=164px, padded 100px from top */
.tech-inner {
  position:       absolute;
  left:           164px;
  top:            100px;
  width:          1112px;
  z-index:        2;
  display:        flex;
  flex-direction: column;
  gap:            42px;
  align-items:    center;
}

/* ── Heading group (node 141:1924): flex-col gap=32px centred ── */
.tech-header {
  display:        flex;
  flex-direction: column;
  gap:            32px;
  align-items:    center;
  text-align:     center;
  width:          100%;
}

/* Heading (141:1925): Poppins Bold 36px / lh=40px / #080a0b / capitalize */
.tech-h2 {
  font-family:    'Poppins', sans-serif;
  font-weight:    700;
  font-size:      36px;
  line-height:    40px;
  color:          #080a0b;
  text-transform: capitalize;
  width:          920px;
  margin:         0;
}

/* Sub (141:1926): Poppins Regular 16px / lh=normal / #414141 / w=758px */
.tech-sub {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size:   16px;
  line-height: normal;
  color:       #414141;
  width:       758px;
}

/* ── Grid container (node 141:1927): 1112 × 576px, position relative ── */
.tech-grid-wrap {
  position:    relative;
  width:       1112px;
  height:      576px;
  flex-shrink: 0;
}

/* Card background SVG fills the whole grid container */
.tech-card-bg {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  display:    block;
}

/* ── Tech item: absolutely positioned within the grid ────────
   layout: flex, gap=16px, items-start                         */
.tech-item {
  position:    absolute;
  display:     flex;
  gap:         16px;
  align-items: flex-start;
}

/* Icon box: 63×63px, r=12px, coloured bg, flex-centering */
.tech-icon-box {
  width:           63px;
  height:          63px;
  border-radius:   12px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  overflow:        hidden;
}

/* Icon image: 42×42px centred */
.tech-icon-img {
  width:      42px;
  height:     42px;
  object-fit: contain;
  display:    block;
}

/* Deep Learning icon has 6.25% inner padding (inset-[6.25%] from Figma) */
.tech-icon-img--inset {
  width:   36.75px;  /* 42 × (1 - 2×0.0625) */
  height:  36.75px;
  padding: 0;
}

/* Text group inside item: flex-col gap=12px */
.tech-text {
  display:        flex;
  flex-direction: column;
  gap:            12px;
  width:          390px;
  flex-shrink:    0;
}

/* Title: Poppins Medium 20px / lh=normal / #0a47a3 */
.tech-title {
  font-family:  'Poppins', sans-serif;
  font-weight:  500;
  font-size:    20px;
  line-height:  normal;
  color:        #0a47a3;
  margin:       0;
}

/* Body: Poppins Regular 16px / lh=1.5 / rgba(8,10,11,0.5) / w=387px */
.tech-body {
  font-family:  'Poppins', sans-serif;
  font-weight:  400;
  font-size:    16px;
  line-height:  1.5;
  color:        rgba(8, 10, 11, 0.5);
  width:        387px;
}

/* ── Case Study Carousel ───────────────────────────────────── */
.cs-section {
  position: relative;
  height: 679px;
  background: #fff;
  overflow: hidden;
  margin-top: 100px;
  margin-bottom: 100px;
}

.cs-header {
  position: absolute;
  left: 167px;
  top: 0;
  width: 1109px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cs-heading {
  width: 517px;
  flex-shrink: 0;
  color: #080A0B;
  font-family: 'Poppins', sans-serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: 40px;
  text-transform: capitalize;
  margin: 0;
}

/* Nav pill */
.cs-nav-pill {
  position: relative;
  width: 146px;
  height: 76px;
  background: #e8f1ff;
  border: 1px solid #fff;
  border-radius: 60px;
  flex-shrink: 0;
}

.cs-nav-btn {
  position:   absolute;
  top:        8px;
  width:      60px;
  height:     60px;
  border-radius: 30px;
  padding:    5px;
  display:    flex;
  align-items: center;
  justify-content: center;
  cursor:     pointer;
  border:     none;
  background: transparent;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.cs-nav-btn:first-of-type { left: 13px; }
.cs-nav-btn:first-of-type:hover {
  transform: scale(1.08);
}
.cs-nav-btn--next {
  left: 78px;
}
/* Active = blue circle (applied to whichever button is clickable) */
.cs-nav-btn--active {
  background: #0e65ea!important;
  box-shadow: 0 4px 14px rgba(14,101,234,0.35);
}
.cs-nav-btn--active:hover {
  background:  #1a74f5!important;
  transform:   scale(1.08);
  box-shadow:  0 6px 20px rgba(14,101,234,0.55);
}
.cs-nav-btn--active:active {
  transform:   scale(0.96);
  box-shadow:  0 2px 8px rgba(14,101,234,0.3);
}
/* Disabled = grayed out, not clickable */
.cs-nav-btn--disabled,
.cs-nav-btn--disabled:hover,
.cs-nav-btn--disabled:focus {
  background:     transparent !important;
  box-shadow:     none !important;
  transform:      none !important;
  opacity:        0.35;
  pointer-events: none;
  cursor:         default;
}
.cs-nav-btn:first-of-type:active {
  transform: scale(0.96);
}

.cs-nav-icon {
  width:      50px;
  height:     50px;
  display:    block;
  transition: transform 0.2s ease;
}
.cs-nav-btn--next:hover .cs-nav-icon {
  transform: translateX(3px);
}
.cs-nav-btn:first-of-type:hover .cs-nav-icon {
  transform: rotate(180deg) translateX(3px);
}

.cs-nav-icon--prev {
  transform: rotate(180deg);
}

/* Carousel track */
.cs-carousel {
  position: absolute;
  left: 164px;
  top: 122px;
  width: 1276px;
  display: flex;
  gap: 24px;
  overflow-x: auto;
  overflow-y: visible;
  align-items: flex-start;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.cs-carousel::-webkit-scrollbar { display: none; }

/* Card */
.cs-card {
  width: 464px;
  height: 557px;
  flex-shrink: 0;
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 154px 32px 40px 32px;
  box-sizing: border-box;
}

/* Card background layers */
.cs-card-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 24px;
}

.cs-tile-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 24px;
}

.cs-tile-img {
  position: absolute;
  height: 110.97%;
  top: -10.16%;
  width: 62.22%;
  max-width: none;
  object-fit: cover;
}

.cs-tile--right { left: 37.72%; }
.cs-tile--left  { left: -1.7%; }

.cs-gradient {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: linear-gradient(to bottom, rgba(0,8,22,0.44) 50.747%, #104291 100%);
}

/* Wireframe: full-card (cards 1, 3–7) */
.cs-wireframe--full {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: bottom;
  mix-blend-mode: screen;
  border-radius: 24px;
}
.cs-wireframe--op70 { opacity: 0.7; }

/* Wireframe: construction (card 1) */
.cs-wireframe-wrap--construction {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 24px;
  mix-blend-mode: screen;
  opacity: 0.9;
}
.cs-wireframe--construction {
  position: absolute;
  top: 0;
  left: 17.38%;
  width: 72.84%;
  height: 60.68%;
  max-width: none;
  object-fit: cover;
}

/* Wireframe: manufacturing (card 2, positioned differently) */
.cs-wireframe-wrap--mfg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 24px;
  mix-blend-mode: screen;
  opacity: 0.9;
}
.cs-wireframe--mfg {
  position: absolute;
  top: 0;
  left: 17.38%;
  width: 72.84%;
  height: 60.68%;
  max-width: none;
  object-fit: cover;
}

/* Card content */
.cs-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
}

.cs-card-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 393px;
}

.cs-card-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 26px;
  color: #fff;
  margin: 0;
  word-break: break-word;
}

.cs-card-sub {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 340px;
}

.cs-card-subtitle {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
  margin: 0;
}

.cs-stat-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.cs-stat-num {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.5;
  color: #fff;
  white-space: nowrap;
}

.cs-stat-divider {
  width:        1px;
  height:       46px;
  background:   rgba(255,255,255,0.6);
  flex-shrink:  0;
}

.cs-stat-desc {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
  margin: 0;
  flex: 1;
}

/* Read More button */
.cs-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 10px 28px 10px 12px;
  border: 1px solid rgba(255,255,255,1);
  border-radius: 55px;
  background: transparent!important;
  -webkit-backdrop-filter: blur(47.7px);
  backdrop-filter: blur(47.7px);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}

.cs-btn-icon-wrap {
  width: 28px;
  height: 28px;
  border-radius: 35px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 1px;
  box-sizing: border-box;
}

.cs-btn-icon-img {
  width: 21px;
  height: 21px;
  display: block;
}

.cs-btn-label {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  white-space: nowrap;
}

/* Shine overlay on button */
.cs-btn-shine {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: -47.05px;
  top: -42.33px;
  width: 70.028px;
  height: 95.291px;
  pointer-events: none;
}

.cs-btn-shine-inner {
  width: 26px;
  height: 95.022px;
  transform: rotate(-150deg);
  background: linear-gradient(89.657deg, rgba(255,255,255,0.2) 1.223%, rgba(255,255,255,0.108) 44.514%, rgba(255,255,255,0) 99.098%);
}

/* ── AI Assessment CTA Section (node 141:2024) ─────────────────── */
.aia-section {
  position: relative;
  height: 741px;
  background: #eef4fb;
  overflow: hidden;
}

.aia-inner {
  position: absolute;
  left: 164px;
  top: 100px;
  width: 1112px;
  height: 541px;
  display: flex;
  gap: 76px;
  align-items: center;
}

/* Left column */
.aia-left {
  width: 482px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 42px;
}

.aia-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 482px;
}

.aia-title-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.aia-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: normal;
  color: #080a0b;
  margin: 0;
  width: 532px;
}

.aia-desc {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #080a0b;
  margin: 0;
  width: 532px;
}

/* Checklist */
.aia-checklist {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 438px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.aia-check-item {
  display: flex;
  gap: 8px;
  align-items: center;
}

.aia-check-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: block;
}

.aia-check-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: #080a0b;
  white-space: nowrap;
}

/* CTA Button */
.aia-btn {
  display: flex;
  height: 44px;
  padding: 10px 28px 10px 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: #0d6efd!important;
  backdrop-filter: blur(47.7px);
  border: none;
  border-radius: 55px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  align-self: flex-start;
  width: fit-content;
  transition: background 0.2s ease;
}
.aia-btn:hover { background: #ffffff!important; }
.aia-btn:hover .aia-btn-icon-wrap { background: #0d6efd; }
.aia-btn:hover .aia-btn-icon-img { filter: brightness(0) invert(1); }
.aia-btn:hover .aia-btn-label { color: #131313; }

.aia-btn-icon-wrap {
  width: 28px;
  height: 28px;
  border-radius: 35px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 1px;
  box-sizing: border-box;
  transition: background 0.2s ease;
}

.aia-btn-icon-img {
  width: 21px;
  height: 21px;
  display: block;
  transition: filter 0.2s ease;
}

.aia-btn-label {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.aia-btn-shine {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: -46.05px;
  top: -41.33px;
  width: 70.028px;
  height: 95.291px;
  pointer-events: none;
}

.aia-btn-shine-inner {
  width: 26px;
  height: 95.022px;
  transform: rotate(-150deg);
  background: linear-gradient(89.657deg, rgba(255,255,255,0.2) 1.223%, rgba(255,255,255,0.108) 44.514%, rgba(255,255,255,0) 99.098%);
}

/* Right: AI Illustration */
.aia-right {
  width: 554px;
  height: 541px;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}

.aia-right-inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.aia-image {
  position: absolute;
  width: 159.15%;
  height: 144.73%;
  left: -54.94%;
  top: -34.38%;
  max-width: none;
  object-fit: contain;
}

/* ── Process Section (node 210:2984) ───────────────────────────── */

/* Add gap after AI Assessment section */
.aia-section { margin-bottom: 100px; }

.proc-section {
  position: relative;
  height: 751px;
  background: #fff;
  overflow: visible;
}

/* Heading */
.proc-heading {
  position: absolute;
  left: 265px;   /* (1440-911)/2 */
  top: 0;
  width: 911px;
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 46px;
  color: #080a0b;
  text-align: center;
  text-transform: capitalize;
}

/* Ghost step numbers */
.proc-num {
  position: absolute;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 70px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.1;
  color: rgba(219, 219, 219, 0.9);
  background: none;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: rgba(219, 219, 219, 0.9);
  white-space: nowrap;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
/* Row 1 — shifted left & up so ~40px of character shows before box overlap */
.proc-n1 { left: 232px; top: 120px; }
.proc-n2 { left: 612px; top: 120px; }
.proc-n3 { left: 990px; top: 120px; }
/* Row 2 */
.proc-n4 { left: 232px; top: 475px; }
.proc-n5 { left: 612px; top: 475px; }
.proc-n6 { left: 990px; top: 475px; }

/* Icon boxes */
.proc-box {
  position: absolute;
  width: 107px;
  height: 107px;
  border-radius: 24px;
  display: flex;
  align-items: flex-start;
  padding: 28px;
  box-sizing: border-box;
  z-index: 2;
}
/* Row 1 */
.proc-box-1 { left: 287px; top: 151px; background: #4da3ff; }
.proc-box-2 { left: 667px; top: 151px; background: #ffb547; padding: 27px 27px 28px 28px; }
.proc-box-3 { left: 1045px; top: 151px; background: #7c4dff; padding: 28px 27px 27px 28px; }
/* Row 2 */
.proc-box-4 { left: 287px; top: 506px; background: #00c2a8; }
.proc-box-5 { left: 667px; top: 506px; background: #ff6b81; padding: 27px 27px 28px 28px; }
.proc-box-6 { left: 1045px; top: 506px; background: #d682de; padding: 28px 27px 27px 28px; }

.proc-icon-img {
  width: 52px;
  height: 52px;
  display: block;
  object-fit: contain;
}

/* Complex icon clip container */
.proc-icon-clip {
  position: relative;
  width: 52px;
  height: 52px;
  overflow: hidden;
}
.proc-icon-part {
  position: absolute;
}
.proc-icon-part img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  max-width: none;
}

/* Connector lines */
.proc-conn {
  position: absolute;
  width: 127px;
  height: 11px;
  z-index: 1;
}
.proc-conn img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Row 1 */
.proc-conn-1a { left: 467px; top: 199px; }
.proc-conn-1b { left: 846px; top: 199px; }
/* Row 2 */
.proc-conn-2a { left: 467px; top: 554px; }
.proc-conn-2b { left: 846px; top: 554px; }

/* Text blocks */
.proc-text {
  position: absolute;
  width: 354.67px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
  z-index: 2;
}
/* Row 1 */
.proc-text-1 { left: 164px; top: 282px; }
.proc-text-2 { left: 543px; top: 282px; }
.proc-text-3 { left: 921px; top: 282px; }
/* Row 2 */
.proc-text-4 { left: 164px; top: 637px; }
.proc-text-5 { left: 543px; top: 637px; }
.proc-text-6 { left: 921px; top: 637px; }

.proc-step-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 26px;
  color: #080a0b;
  margin: 0;
}

.proc-step-body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #383838;
  margin: 0;
}

/* ── Partner Tagline Section (node 259:327) ─────────────────────── */
.partner-section {
  position: relative;
  height: 816px;
  background: #fff;
  margin-top: 100px; /* gap after proc-section */
}

.partner-inner {
  position: absolute;
  left: 164px;
  top: 0;
  width: 1111px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Business photo (node 259:325) */
.partner-photo-wrap {
  position: absolute;
  left: 164px;
  top: 162px;
  width: 484px;
  height: 654px;
}
.partner-photo-clip {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  overflow: hidden;
  pointer-events: none;
}
.partner-photo-img {
  position: absolute;
  width: 205.22%;
  height: 101.22%;
  left: -81.94%;
  top: -0.61%;
  max-width: none;
  display: block;
  object-fit: cover;
}

.partner-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 40px;
  color: #080a0b;
  text-transform: capitalize;
  width: 536px;
  margin: 0;
  flex-shrink: 0;
}

.partner-desc {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  color: #414141;
  width: 556px;
  margin: 0;
  flex-shrink: 0;
}

/* ── Partner Accordion List (node 256:582) ──────────────────────── */
.partner-accordion {
  position: absolute;
  left: 720px;   /* 164 + 484 + 72 = 720px from page edge */
  top: 162px;    /* 7982 - 7820 = 162px from section top */
  width: 556px;
  display: flex;
  flex-direction: column;
  gap: 42px;
}

.partner-acc-item {
  width: 556px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border-radius: 24px;
  flex-shrink: 0;
  padding-right: 24px;
  transition: background 0.35s ease, padding 0.35s ease;
  cursor: pointer;
}

.partner-acc-item:hover,
.partner-acc-item.acc-open {
  padding: 24px;
}

.partner-acc-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  color: #080a0b;
  flex: 1;
}

.partner-acc-icon {
  width: 44px;
  height: 44px;
  display: block;
  flex-shrink: 0;
  overflow: hidden;
  object-fit: contain;
  transition: transform 0.3s ease;
}
/* Accordion item icon (hidden by default, slides in on hover).
   Use margin-right instead of gap so 0-width icon takes no space. */
.partner-acc-item-icon {
  width: 0;
  height: auto;
  max-height: 50px;
  flex-shrink: 0;
  opacity: 0;
  overflow: hidden;
  object-fit: contain;
  margin-right: 0;
  transition: width 0.35s ease, opacity 0.35s ease, margin-right 0.35s ease;
}





.partner-acc-item {
  height: auto;
}

.partner-acc-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Row wrapper: icon + content column.
   gap:0 here; spacing is handled by margin-right on the icon
   so no space is reserved when icon is width:0. */
.partner-acc-row {
  display: flex;
  align-items: flex-start;
  gap: 0;
  align-self: stretch;
  width: 100%;
}

/* Content column: trigger header + body */
.partner-acc-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.partner-acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  padding: 0;
  width: 356px;
}

.partner-acc-body p {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  color: #383838;
  margin: 0;
  padding-top: 12px;
}

.partner-acc-item.acc-open .partner-acc-body {
  max-height: 200px;
}

.partner-acc-item.acc-open .partner-acc-icon {
  transform: rotate(180deg);
}

.partner-acc-item.acc-open .partner-acc-item-icon {
  width: 50px;
  opacity: 1;
  margin-right: 30px;
}
/* Hover: open accordion with icon + background */
.partner-acc-item:hover {
  background: #eef4fb;
}

.partner-acc-item:hover .partner-acc-item-icon {
  width: 50px;
  opacity: 1;
  margin-right: 30px;
}

.partner-acc-item:hover .partner-acc-body {
  max-height: 150px;
}

.partner-acc-item:hover .partner-acc-icon {
  transform: rotate(180deg);
}


/* ── Learn & Explore Section (node 268:664) ────────────────────── */
.learn-section {
  position: relative;
  height: 779px;
  background: #fff;
  margin-top: 100px;
  overflow: hidden;
}

.learn-inner {
  position: absolute;
  left: 164px;
  top: 0;
  width: 1112px;
  height: 779px;
}

/* Header */
.learn-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 1112px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.learn-heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 40px;
  color: #080a0b;
  text-transform: capitalize;
  margin: 0;
  white-space: nowrap;
}

.learn-tabs {
  width: 245px;
  height: 50px;
  background: #e8f1ff;
  border-radius: 48px;
  position: relative;
  flex-shrink: 0;
}

/* Sliding pill track — inset 7px on all sides */
.learn-pill-track {
  position: absolute;
  left: 7px;
  top: 7px;
  right: 7px;
  bottom: 7px;
  border-radius: 40px;
  pointer-events: none;
}

/* The sliding pill itself */
.learn-pill {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  background: #0d6efd;
  border-radius: 55px;
  -webkit-backdrop-filter: blur(47.7px);
  backdrop-filter: blur(47.7px);
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.learn-tabs-inner {
  position: absolute;
  left: 7px;
  top: 7px;
  right: 7px;
  bottom: 7px;
  display: flex;
  align-items: center;
}

/* Tab buttons */
.learn-tab-btn {
  flex: 1;
  height: 100%;
  border: none;
  background: transparent!important;
  outline: none;
  box-shadow: none;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #131313;
  white-space: nowrap;
  border-radius: 55px;
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}

.learn-tab-btn:focus,
.learn-tab-btn:focus-visible {
  outline: none;
  box-shadow: none;
}

.learn-tab-btn--active {
  color: #fff;
  font-weight: 700;
}

/* Card image sections — absolute within .learn-inner */
.learn-card-img {
  position: absolute;
  top: 92px;
  height: 270px;
  overflow: hidden;
}
.lc-img-1 { left: 0;    width: 351px; }
.lc-img-2 { left: 380px; width: 351px; }
.lc-img-3 { left: 761px; width: 351px; }

.learn-img-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.learn-img-base {
  position: absolute;
  height: 100%;
  left: -11.48%;
  top: 0;
  width: 122.95%;
  max-width: none;
  display: block;
}
.learn-img-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}

/* Card text (body) sections */
.learn-card-body {
  position: absolute;
  top: 362px;
  height: 335px;
  background: #f4f4f4;
  overflow: hidden;
}
.lc-body-1 { left: 0;    width: 351px; }
.lc-body-2 { left: 380px; width: 351px; }
.lc-body-3 { left: 761px; width: 351px; }

.learn-card-date {
  position: absolute;
  left: 30px;
  top: 24px;   /* center at 38px, h=28px → 38-14=24 */
  height: 28px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 28px;
  color: #5c5c5b;
  text-transform: capitalize;
  margin: 0;
}

.learn-card-title {
  position: absolute;
  left: 30px;
  top: 63px;   /* center at 111.35px, h=96px → 111.35-48=63 */
  height: 96px;
  width: 296px;
  transition: top 0.35s ease;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 31px;
  color: #212121;
  text-transform: capitalize;
  margin: 0;
  overflow: hidden;
}

.learn-card-desc {
  position: absolute;
  left: 30px;
  top: 164px;  /* center at 239.35px, h=150px → 239.35-75=164 */
  height: 150px;
  width: 301px;
  transition: top 0.35s ease;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  color: #5c5c5b;
  margin: 0;
  overflow: hidden;
}

/* Footer: button + lines */
.learn-explore-btn {
  position: absolute;
  left: 442px;
  top: 729px;
  width: auto;
  min-width: 230px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000!important;
  border: none;
  border-radius: 25px;
  padding: 8px 32px;
  white-space: nowrap;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  text-transform: capitalize;
  letter-spacing: -0.4px;
  cursor: pointer;
  white-space: nowrap;
}

.learn-line-left {
  position: absolute;
  left: 2px;
  width: 380px;
  top: 753px;
  height: 0.8px;
}
.learn-line-left img { display: block; width: 100%; height: 100%; }

.learn-line-right {
  position: absolute;
  left: 732px;
  width: 380px;
  top: 753px;
  height: 0.8px;
}
.learn-line-right img { display: block; width: 100%; height: 100%; }



/* Tab switch animation */
@keyframes learnCardIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.learn-card-img,
.learn-card-body {
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.learn-card-enter {
  animation: learnCardIn 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* ── FAQ Section — ThinkPalm style ────────────────────────────────────── */
.faq-section {
  background: #ffffff;
  padding: 80px 0 100px;
  margin-top: 100px;
}

.faq-inner {
  position: relative;
  left: auto; top: auto;
  width: 100%;
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}

.faq-heading {
  position: relative; top: auto; left: auto;
  width: 100%; height: auto;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.2;
  color: #080a0b;
  text-transform: capitalize;
  text-align: center;
  margin: 0 0 48px;
}

.faq-heading-accent { color: #1977f3; }

/* Accordion container */
.faq-accordion { width: 100%; }

/* Each item: bottom border like ThinkPalm */
.faq-accordion-item {
  border-bottom: 1px solid #9cb5c7;
}

/* Header row: question + chevron */
.faq-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.faq-accordion-header h5 {
  font-family: 'Poppins', sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  color: #131313;
  margin: 0;
  padding: 23px 0 20px;
  flex: 1;
}

/* Chevron arrow */
.faq-chevron {
  flex-shrink: 0;
  color: #131313;
  transition: transform 0.3s ease;
  width: 18px;
  height: 18px;
}

.faq-accordion-item.is-open .faq-chevron {
  transform: rotate(90deg);
}

/* Answer panel: collapsed by default */
.faq-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}

.faq-accordion-item.is-open .faq-accordion-content {
  max-height: 600px;
}

.faq-accordion-content p {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #565656;
  line-height: 30px;
  margin: 0;
  padding: 0 16px 24px;
}


/* ── Contact Form + Footer Section (node 268:898) ──────────────────────── */
.cf-section {
  position: relative;
  width: 1440px;
  height: 716px;
  background: #fff;
}

/* ─── Contact form (0–753px) ──── */
.cf-contact {
  position: absolute;
  left: 0; top: 0;
  width: 1440px; height: 716px;
  overflow: hidden;
}

.cf-contact-bg {
  position: absolute;
  left: 0; top: 0;
  width: 1440px; height: 753px;
  display: block;
  max-width: none;
}

.cf-heading {
  position: absolute;
  left: 50%;
  top: 80px;
  transform: translateX(-50%);
  width: 847px;
  height: 76px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 100px;
  color: #000;
  text-align: center;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
}

/* Input labels */
.cf-label {
  position: absolute;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 36px;
  color: #818181;
  margin: 0;
  white-space: nowrap;
}

/* Input underlines */
.cf-line {
  position: absolute;
  height: 1px;
  border-bottom: 1px solid #cacaca;
}

/* Dropdown arrows */
.cf-arrow {
  position: absolute;
  width: 23px; height: 11px;
  display: block;
}

/* Message field (border-bottom only, 63px tall) */
.cf-msg-field {
  position: absolute;
  left: 165px; top: 414px;
  width: 1112px; height: 63px;
}

/* Captcha text row */
.cf-captcha-text {
  position: absolute;
  left: 165px; top: 537px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 40px;
  color: #000;
  text-transform: capitalize;
  letter-spacing: -0.4px;
  white-space: nowrap;
  margin: 0;
}
.cf-captcha-input {
  display: inline-block;
  width: 48px;
  border: none;
  border-bottom: 1.5px solid #000;
  background: transparent;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  outline: none;
  vertical-align: middle;
  margin: 0 4px;
  padding: 0 2px 2px;
  letter-spacing: 0;
}
.cf-captcha-input.captcha-error {
  border-bottom-color: #e53e3e;
}

/* Cloudflare widget */
.cf-widget {
  position: absolute;
  left: 433px; top: 502px;
  width: 300px; height: 50px;
  background: #fafafa;
  border: 1px solid #e0e0e0;
  box-sizing: border-box;
}
.cf-widget-checkbox {
  position: absolute;
  left: 16px; top: 13px;
  width: 24px; height: 24px;
  background: #fff;
  border: 3px solid #dbdbdb;
  border-radius: 4px;
  box-sizing: border-box;
}
.cf-widget-verify {
  position: absolute;
  left: 52px; top: 16px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: normal;
  color: #1d1f20;
  margin: 0;
  white-space: nowrap;
}
.cf-widget-brand {
  position: absolute;
  right: 15px; top: 6px;
  width: 75px; height: 38px;
}
.cf-widget-logo {
  display: block;
  width: 75px; height: 25px;
}
.cf-widget-privacy {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 8px;
  line-height: normal;
  color: #000;
  text-align: right;
  margin: 0;
  padding-top: 3px;
}

/* Cookie policy consent */
.cf-cookie-policy {
  position: absolute;
  left: 165px;
  top: 455px;
  width: 1112px;
}
.cf-cookie-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  color: #383838;
  line-height: 1.5;
  user-select: none;
}
.cf-cookie-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: #1977f3;
}
.cf-cookie-link {
  color: #1977f3;
  text-decoration: underline;
}
.cf-cookie-link:hover { color: #0d5cbf; }

.cf-verification-row {
  position: absolute;
  left: 165px;
  top: 510px;
  display: flex;
  align-items: center;
  gap: 36px;
  width: 720px;
  z-index: 5;
}

.cf-verification-row .cf-captcha-text,
.cf-verification-row .cf-turnstile-wrap {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
}

.cf-verification-row .cf-captcha-text {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  flex: 0 0 auto;
  line-height: 40px !important;
}

.cf-verification-row .cf-turnstile-wrap {
  flex: 0 0 300px;
  width: 300px !important;
}

/* Cloudflare Turnstile */
.cf-turnstile-wrap {
  position: absolute;
  left: 165px;
  top: 538px;
}
.cf-turnstile-error {
  display: block;
  margin-top: 6px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  color: #e53e3e;
}

/* Submit button */
.cf-submit-btn {
  position: absolute;
  left: 50%; top: 598px;
  transform: translateX(-50%);
  width: 155px; height: 50px;
  background: #1977f3!important;
  border: 2px solid #1977f3;
  border-radius: 25px;
  padding: 8px 32px;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  text-transform: capitalize;
  letter-spacing: -0.4px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.cf-submit-btn:hover {
  background:   #fff!important;
  color:        #131313;
  border-color: transparent;
}

/* ══ NSF Footer ════════════════════════════════════════════════ */
.nsf { width: 100%; font-family: 'Poppins', sans-serif; }

/* Dark section */
.nsf-dark {
  background: #1e2222;
  padding: 74px 0 40px;
}

/* Shared container */
.nsf-wrap {
  max-width: 1440px;
  padding: 0 165px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* 4-column grid */
.nsf-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 24px;
}
.nsf-grid--row2 { margin-top: 35px; }

/* Section heading */
.nsf-head {
  font-size: 16px;
  font-weight: 500;
  color: #d9d9d9;
  margin: 0 0 11px;
  text-transform: capitalize;
  line-height: 24px;
}
.nsf-head--link {
  display: block;
  text-decoration: none;
  margin-bottom: 14px;
}
.nsf-head--link:hover { color: #fff; }

/* Links list */
.nsf-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nsf-links li { margin-bottom: 15px; }
.nsf-links a {
  font-size: 12px;
  color: #8c9090;
  text-decoration: none;
  line-height: 24px;
  display: block;
}
.nsf-links a:hover { color: #d9d9d9; }

/* Address */
.nsf-address {
  font-style: normal;
  font-size: 12px;
  color: #8c9090;
  line-height: 24px;
}

/* Follow Us social row */
.nsf-social {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 27px;
}
.nsf-social-label {
  font-size: 12px;
  color: #d9d9d9;
  font-weight: 500;
  white-space: nowrap;
}
.nsf-social-icons {
  display: flex;
  align-items: center;
  gap: 30px;
}
.nsf-social-icons a {
  display: flex;
  align-items: center;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.nsf-social-icons a:hover { opacity: 1; }

/* Black bar */
.nsf-black { background: #000; }
.nsf-black-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 29px 165px;
  box-sizing: border-box;
}
.nsf-logo { display: inline-flex; align-items: center; text-decoration: none; }
.nsf-logo img { width: 56px; height: auto; display: block; }

/* Copyright area */
.nsf-copyright {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: #d9d9d9;
}
.nsf-copyright-links {
  display: flex;
  gap: 16px;
}
.nsf-copyright-links a {
  color: #d9d9d9;
  text-decoration: none;
  font-size: 12px;
}
.nsf-copyright-links a:hover { text-decoration: underline; }
.nsf-pipe { color: #d9d9d9; }
.nsf-copyright-year { font-size: 12px; color: #d9d9d9; white-space: nowrap; }


/* ============================================================
   RESPONSIVE STYLES — All breakpoints
   ============================================================ */

/* ============================================================
   RESPONSIVE MEDIA QUERIES
   Hero | Logos | Services — base: 1440px fixed
   ============================================================ */

/* Hamburger button — hidden on desktop, shown mobile */
#nav-toggle { display:none; margin-left:auto; z-index:20; cursor:pointer; background:none; border:none; padding:4px; }
#nav-toggle span { display:block; width:24px; height:2px; background:#fff; margin:5px 0; border-radius:2px; transition:all 0.3s; }
@media (max-width:1023px) { #nav-toggle { display:block; } }

/* Mobile nav overlay */
@media (max-width:1023px) {
  .site-nav { display:none !important; position:fixed !important; top:0 !important; left:0 !important; width:100% !important; height:100vh !important; background:#01163b !important; flex-direction:column !important; justify-content:flex-start !important; align-items:stretch !important; gap:0 !important; z-index:200 !important; padding:80px 24px 40px !important; max-width:none !important; right:auto !important; overflow-y:auto !important; }
  .site-nav.nav-open { display:flex !important; }
}

/* ============================================================
   max-width: 1199px — Large tablet / small desktop
   ============================================================ */
@media (max-width:1199px) {

  /* Hero */
  .hero-nav { padding:0 24px; justify-content:space-between; }
  .cert-badge { display:none; }
  /* nav stays desktop-only at this breakpoint — mobile handled by overlay below */
  .hero-content { left:80px; width:calc(100% - 160px); max-width:644px; }

  /* Logos */
  .logos-carousel { padding:0 80px; }
  .logos-group { inset:0 80px; }

  /* Services */
  .svc-inner { padding:0 80px; }
  .svc-card { width:100%; max-width:500px; }
  .svc-right { width:500px; }
  .svc-left { width:460px; }
}

/* ============================================================
   max-width: 1023px — Tablet
   ============================================================ */
@media (max-width:1023px) {

  /* Hero */
  .hero { height:auto; min-height:480px; }
  .hero-nav { padding:0 24px; justify-content:space-between; }
  .hero-content { position:relative; left:auto; top:auto; margin:140px auto 60px; width:calc(100% - 48px); max-width:600px; }

  /* Nav — hidden at mobile; see overlay block above */

  /* Logos — 3 per row */
  .logos-carousel { padding:0 48px; height:auto; min-height:95px; }
  .logos-group { inset:0 48px; gap:12px; }
  .logo-card { width:calc(33.333% - 12px); height:auto; aspect-ratio:210.912/95.135; }
  .logo-card-full { width:calc(33.333% - 12px); height:auto; aspect-ratio:210.912/95.135; object-fit:contain; }

  /* Services — stack to single column */
  .svc-inner { padding:0 48px; }
  .svc-layout { flex-direction:column; gap:24px; padding-top:40px; }
  .svc-left { width:100%; position:static; transform:none; }
  .svc-right { width:100%; }

  /* Service card — full width */
  .svc-card { width:100%; max-width:100%; height:auto; min-height:220px; }
  .svc-card-inner { left:24px; top:24px; width:calc(100% - 48px); }
  .svc-card-body { width:100%; }
}

/* ============================================================
   max-width: 767px — Mobile landscape / large phone
   ============================================================ */
@media (max-width:767px) {

  /* Hero */
  .hero { height:auto; min-height:400px; }
  .hero-content { position:absolute; left:24px; top:120px; width:calc(100% - 48px); max-width:none; margin:0; }
  .hero-heading { font-size:32px; line-height:40px; }
  .hero-btn { width:100%; max-width:233px; height:48px; }

  /* Logos — 2 per row */
  .logos-carousel { padding:0 24px; height:auto; min-height:95px; }
  .logos-group { inset:0 24px; gap:10px; }
  .logo-card { width:calc(50% - 10px); height:auto; aspect-ratio:210.912/95.135; }
  .logo-card-full { width:calc(50% - 10px); height:auto; aspect-ratio:210.912/95.135; object-fit:contain; }

  /* Services */
  .svc-inner { padding:0 24px; }
  .svc-layout { padding-top:32px; gap:16px; }
  .svc-card { width:100%; height:auto; min-height:200px; }
  .svc-card-inner { left:20px; top:20px; width:calc(100% - 40px); }
  .svc-card-body { width:100%; }
  .svc-card-title { white-space:normal; }
}

/* ============================================================
   max-width: 479px — Mobile portrait / small phone
   ============================================================ */
@media (max-width:479px) {

  /* Hero */
  .hero { min-height:350px; }
  .hero-heading { font-size:26px; line-height:34px; }
  .hero-btn { width:100%; max-width:200px; height:44px; }

  /* Logos — 2 per row, smaller */
  .logos-carousel { padding:0 16px; height:auto; min-height:95px; }
  .logos-group { inset:0 16px; gap:8px; }
  .logo-card { width:calc(50% - 8px); height:auto; aspect-ratio:210.912/95.135; }
  .logo-card-full { width:calc(50% - 8px); height:auto; aspect-ratio:210.912/95.135; object-fit:contain; }

  /* Services */
  .svc-inner { padding:0 24px; }
  .svc-card-inner { left:16px; top:16px; width:calc(100% - 32px); }
}

@media (max-width: 1199px) {
  .banner-canvas {
    width: 100%;
    left: 0;
    transform: none;
  }

  .tech-inner {
    padding: 60px 5%;
  }

  .cs-carousel {
    left: 5%;
  }
}

@media (max-width: 1023px) {
  .banner-canvas {
    width: 100%;
    position: relative;
    left: auto;
    transform: none;
  }

  .banner-text {
    left: 5%;
    width: 60%;
  }

  .bann-photo-1,
  .bann-photo-2,
  .bann-photo-3,
  .bann-photo-4,
  .bann-photo-5,
  .bann-photo-6,
  .bann-ic-1,
  .bann-ic-2,
  .bann-ic-3,
  .bann-ic-4,
  .bann-ic-5,
  .bann-ic-6 {
    display: none;
  }

  .tech-section {
    height: auto;
    overflow: visible;
  }

  .tech-inner {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    padding: 60px 5%;
  }

  .tech-grid-wrap {
    position: relative;
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .tech-item {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
  }
  .tech-h2 { width: 100%; }
  .tech-sub { width: 100%; }

  .cs-section {
    height: auto;
    overflow: visible;
    margin-top: 60px;
    margin-bottom: 60px;
  }

  .cs-header {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    padding: 0 5% 20px;
  }

  .cs-carousel {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    padding: 0 5%;
  }
}

@media (max-width: 767px) {
  .banner-section {
    height: auto;
    padding: 40px 24px;
  }

  .banner-canvas {
    width: 100%;
    position: relative;
    left: auto;
    transform: none;
  }

  .banner-text {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
  }

  [class^="bann-"] {
    display: none;
  }

  .tech-grid-wrap {
    grid-template-columns: 1fr;
  }

  .tech-h2 {
    width: 100%;
    font-size: 28px;
  }

  .tech-sub {
    width: 100%;
  }

  .cs-card {
    width: calc(100vw - 48px);
  }

  .cs-nav-pill {
    display: none;
  }
}

.proc-step-inner { display:flex; flex-direction:column; align-items:center; gap:16px; margin-bottom:40px; }

@media (max-width:1023px) {
  .aia-section { height:auto; padding-bottom:60px; margin-bottom:60px; }
  .aia-inner { position:relative; left:auto; top:auto; width:100%; padding:60px 5%; height:auto; flex-direction:column; gap:40px; }
  .aia-left { width:100%; }
  .aia-right { width:100%; height:400px; }
  .aia-title, .aia-desc { width:100%; }
  .aia-checklist { width:100%; }
  .aia-check-text { white-space:normal; }
  /* Process section: flex column + order to pair each icon with its text */
  .proc-section {
    height:auto; overflow:visible; padding:0 5% 24px;
    display:flex; flex-direction:column; align-items:center;
  }
  .proc-heading { position:relative; left:auto; top:auto; width:100%; margin:0 0 40px; text-align:center; order:0; }
  .proc-num  { display:none; }
  .proc-conn { display:none; }
  .proc-box  { position:relative; left:auto !important; top:auto !important; margin:0 auto 16px; }
  .proc-text { position:relative; left:auto !important; top:auto !important; width:100%; text-align:center; margin-bottom:20px; }
  /* Interleave icon+text pairs */
  .proc-box-1  { order:1;  } .proc-text-1 { order:2;  }
  .proc-box-2  { order:3;  } .proc-text-2 { order:4;  }
  .proc-box-3  { order:5;  } .proc-text-3 { order:6;  }
  .proc-box-4  { order:7;  } .proc-text-4 { order:8;  }
  .proc-box-5  { order:9;  } .proc-text-5 { order:10; }
  .proc-box-6  { order:11; } .proc-text-6 { order:12; }
}

@media (max-width:767px) {
  .aia-section { margin-bottom:48px; }
  .aia-inner { padding:40px 24px; gap:32px; }
  .aia-right { height:280px; }
  .proc-section { padding:0 24px 40px; }
  .proc-heading { font-size:26px; line-height:1.3; }
  .proc-step-title { font-size:18px; }
}

@media (max-width:1023px) {
  .partner-section { height:auto; padding:40px 5%; margin-top:60px !important; }
  .partner-inner { position:relative; left:auto; top:auto; width:100%; height:auto; flex-direction:column; gap:24px; align-items:flex-start; }
  .partner-title, .partner-desc { width:100%; }
  .partner-photo-wrap { position:relative; left:auto; top:auto; width:100%; height:360px; margin-top:32px; overflow:hidden; }
  .partner-photo-img  { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; left:0 !important; top:0 !important; max-width:none !important; object-fit:cover !important; object-position:center 15% !important; }
  .partner-accordion { position:relative; left:auto; top:auto; width:100%; margin-top:32px; }
  .partner-acc-text { font-size:16px; white-space:normal; }

  .learn-section { height:auto; overflow:visible; padding:60px 5%; margin-top:60px; }
  .learn-inner { position:relative; left:auto; top:auto; width:100%; height:auto; }
  .learn-header { position:relative; top:auto; left:auto; width:100%; height:auto; flex-wrap:wrap; gap:16px; margin-bottom:32px; }
  .learn-heading { white-space:normal; font-size:28px; }
  .learn-card-img { position:relative; left:auto !important; top:auto !important; width:100% !important; height:220px; margin-bottom:0; display:block; }
  .learn-card-body { position:relative; left:auto !important; top:auto !important; width:100% !important; height:auto; min-height:200px; padding-bottom:24px; display:block; }
  .learn-card-date { position:relative; left:auto; top:auto; padding:16px 30px 0; display:block; }
  .learn-card-title { position:relative; left:auto; top:auto; height:auto; padding:8px 30px 0; display:block; }
  .learn-card-desc { position:relative; left:auto; top:auto; height:auto; padding:8px 30px 0; display:block; }
  .learn-explore-btn { position:relative; left:auto; top:auto; width:fit-content; margin:32px auto; display:flex; align-items:center; justify-content:center; }
  .learn-line-left, .learn-line-right { display:none; }
}

@media (max-width:767px) {
  .partner-section { padding:40px 24px; margin-top:48px; }
  .partner-title { font-size:26px; }
  .partner-acc-item { height:auto; padding:8px 0; }
  .learn-section { padding:40px 24px; margin-top:48px; }
  .learn-heading { font-size:24px; }
}

.cf-input { display:block; width:100%; border:none; border-bottom:1px solid #cacaca; background:transparent; background-image:linear-gradient(#1977f3,#1977f3); background-size:0 2px; background-position:left bottom; background-repeat:no-repeat; font-family:'Poppins',sans-serif; font-size:16px; color:#131313; padding:4px 0; outline:none; transition:background-size 0.4s cubic-bezier(0.4,0,0.2,1); }
.cf-input:focus { border-bottom-color:#cacaca; background-size:100% 2px; }
.cf-input::placeholder { transition:opacity 0.2s ease; }
.cf-input:focus::placeholder { opacity:0.4; }
.cf-select { appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:28px; }
.cf-select:focus { background-size:100% 2px; border-bottom-color:#cacaca; }
.cf-textarea { resize:vertical; min-height:52px; border:none; border-bottom:1px solid #cacaca; }
.cf-field-group { position:absolute; }
.cf-field-group label.cf-label { position:relative; left:auto; top:auto; display:block; }
.cf-label-sr { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.cf-input::placeholder { color:#818181; font-family:'Poppins',sans-serif; font-size:16px; font-weight:400; }
.cf-select.cf-select--empty { color:#818181; }
.cf-select option { color:#131313; }
.cf-error { display:none; font-family:'Poppins',sans-serif; font-size:12px; color:#e53e3e; margin-top:4px; }
.cf-field-group.has-error .cf-error { display:block; }
.cf-field-group.has-error .cf-input { border-bottom-color:#e53e3e; }
.cf-arrow-select { position:absolute; right:4px; bottom:12px; pointer-events:none; }


.cf-success-msg h3 { font-family:'Poppins',sans-serif; font-size:24px; color:#1977f3; }
.cf-success-msg p { font-family:'Poppins',sans-serif; font-size:16px; color:#383838; margin-top:12px; }

@media (max-width:1023px) {
  .faq-section { padding: 24px 0 60px; margin-top: 60px; }
  .faq-inner { padding: 0 24px; }
  .faq-heading { font-size: 28px; margin-bottom: 32px; }
  .faq-accordion-header h5 { font-size: 18px; padding: 18px 0 16px; }
  .faq-accordion-content p { font-size: 14px; line-height: 26px; }

  .cf-section { width:100%; height:auto; margin-top:60px; }
  .cf-contact { width:100%; height:auto; padding:60px 5% 60px; position:relative; }
  .cf-contact-bg { width:100%; height:100%; }
  .cf-heading { position:relative; left:auto; top:auto; transform:none; width:100%; font-size:26px; line-height:1.3; white-space:normal; text-align:center; margin-bottom:40px; }
  .cf-field-group { position:relative !important; left:auto !important; top:auto !important; width:100% !important; margin-bottom:20px; }
  .cf-form-row { position:relative !important; left:auto !important; top:auto !important; width:100% !important; flex-direction:column; gap:12px; }
  .cf-msg-field { position:relative !important; left:auto !important; top:auto !important; width:100% !important; height:auto !important; overflow:visible !important; }
  .cf-msg-field .cf-label { line-height:1.3 !important; margin-bottom:6px !important; }
  .cf-cookie-policy { position:relative; left:auto; top:auto; width:100%; margin:20px 0 0; }
  .cf-verification-row { position:relative; left:auto; top:auto; width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin:16px 0 0; }
  .cf-verification-row .cf-captcha-text { position:relative !important; left:auto !important; top:auto !important; margin:0 !important; }
  .cf-turnstile-wrap { position:relative; left:auto; top:auto; margin:0; }
  .cf-submit-btn { position:relative; left:auto; top:auto; display:block; margin:24px auto 0; }
  .cf-success-msg { position:relative !important; left:auto !important; top:auto !important; transform:none !important; text-align:center; padding:40px; }

  .cf-footer { position:relative; left:auto; top:auto; width:100%; height:auto; }
  .cf-footer-dark { width:100%; height:auto; padding:40px 5% 32px; position:relative; }
  .cf-footer-black { width:100%; height:auto; padding:24px 5%; position:relative; top:auto; }
  .cf-fhdr { position:relative !important; left:auto !important; top:auto !important; display:block; margin-bottom:8px; }
  .cf-flist { position:relative !important; left:auto !important; top:auto !important; display:block; margin-bottom:24px; white-space:normal; }
  .cf-footer-cols { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  .cf-follow { position:relative; left:auto; top:auto; flex-wrap:wrap; margin-top:24px; }
  .cf-footer-logo { position:relative; left:auto; top:auto; display:block; margin-bottom:12px; }
  .cf-copyright { position:relative; left:auto; top:auto; white-space:normal; text-align:center; }
  .cf-footer-bottom { display:flex; flex-direction:column; align-items:center; gap:12px; padding-top:16px; }
}

@media (max-width:767px) {
  .faq-section { margin-top:60px; }
  .cf-contact { padding:40px 24px 48px; }
  .cf-heading { font-size:22px; }
  .cf-footer-dark { padding:32px 24px; }
  .cf-footer-black { padding:20px 24px; }
  .cf-footer-cols { grid-template-columns:1fr; }
  .cf-form-row { display:flex; flex-direction:column; gap:0; }
}


/* Tab switch animation */
@keyframes learnCardIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.learn-card-img,
.learn-card-body {
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.learn-card-enter {
  animation: learnCardIn 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}


/* ── Medium viewport fix: prevent 1440px elements overflowing on sub-1440 screens ── */
@media (max-width:1439px) {
  .cf-section { width:100%; }
  .cf-contact { width:100%; }
  .cf-contact-bg { width:100%; }
  .cf-footer { width:100%; }
  .cf-footer-dark { width:100%; }
  .cf-footer-black { width:100%; }
  body { overflow-x:clip; }
}


/* ── Footer responsive fix: content now inside cf-footer-dark / cf-footer-black ── */

/* Desktop: content inside cf-footer-dark / cf-footer-black; absolute positioning preserved */

/* cf-footer-logo and cf-copyright now inside cf-footer-black */
.cf-footer-black .cf-footer-logo {
  position:absolute;
  left:165px; top:29px;
}
.cf-footer-black .cf-copyright {
  position:absolute;
  left:777px; top:47px;
}

@media (max-width:1439px) {
  /* Override width on background divs now that they contain content */
  .cf-footer-dark { width:100%; }
  .cf-footer-black { width:100%; }
}

@media (max-width:1023px) {
  /* Responsive footer dark zone: grid of columns */
  .cf-footer-dark {
    position:relative !important;
    width:100% !important;
    height:auto !important;
    padding:40px 5% 32px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px 20px;
    background:#1e2222;
  }
  /* Pull cf-fcol out of absolute positioning so they become grid items */
  .cf-fcol {
    position:relative !important;
    left:auto !important; top:auto !important;
    width:auto !important;
  }
  .cf-footer-dark .cf-fhdr {
    position:relative !important;
    left:auto !important; top:auto !important;
    display:block; margin-bottom:8px;
  }
  .cf-footer-dark .cf-flist {
    position:relative !important;
    left:auto !important; top:auto !important;
    display:block; white-space:normal;
  }
  .cf-footer-dark .cf-follow {
    position:relative !important;
    left:auto !important; top:auto !important;
    grid-column:1/-1; margin-top:8px; display:flex; align-items:center; gap:12px;
    justify-content:center !important;
  }
  /* Social icons: reset absolute offsets, use flex row */
  .cf-social-row {
    position:relative !important;
    width:auto !important; height:auto !important;
    display:flex !important; gap:10px !important;
  }
  .cf-icon {
    position:relative !important;
    left:auto !important; top:auto !important;
    width:18px !important; height:18px !important;
  }
  /* Black copyright bar responsive */
  .cf-footer-black {
    position:relative !important;
    top:auto !important;
    width:100% !important;
    height:auto !important;
    padding:20px 5%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    background:#000;
  }
  .cf-footer-black .cf-footer-logo {
    position:relative !important;
    left:auto !important; top:auto !important;
    width:40px; height:42px;
  }
  .cf-footer-black .cf-copyright {
    position:relative !important;
    left:auto !important; top:auto !important;
    white-space:normal; text-align:right;
    flex:1;
  }
}

@media (max-width:767px) {
  .cf-footer-dark { grid-template-columns:1fr; padding:32px 24px; }
  .cf-footer-dark .cf-follow { justify-content:center !important; }
  .cf-footer-black { flex-direction:column; align-items:center; padding:20px 24px; }
  .cf-footer-black .cf-copyright { text-align:center; font-size:11px; }
}


/* ── Desktop footer: enforce absolute positioning (overrides any cascade leakage) ── */
@media (min-width:1024px) {
  .cf-footer {
    position: absolute !important;
    top: 753px !important;
    left: 0;
    width: 100%;
    height: 735px;
  }
  .cf-footer-dark {
    position: absolute !important;
    left: 0; top: 0;
    width: 100%;
    height: 618px;
    background: #1e2222;
    display: block;
    padding: 0;
  }
  .cf-footer-black {
    position: absolute !important;
    left: 0; top: 618px !important;
    width: 100%;
    height: 117px;
    background: #000;
    display: block;
    padding: 0;
  }
  /* Fix logo and copyright positions within cf-footer-black */
  .cf-footer-black .cf-footer-logo {
    position: absolute !important;
    left: 165px; top: 29px;
    width: 56px; height: 59px;
  }
  .cf-footer-black .cf-copyright {
    position: absolute !important;
    left: 777px; top: 47px;
    white-space: nowrap;
  }
}

/* ============================================================
   LARGE SCREEN CENTERING — min-width:1440px
   Centers all sections at any viewport width above 1440px.
   Formula for absolute elements at left:X in 1440px design:
     left: calc(50% + (X - 720)px)
   ============================================================ */

@media (min-width:1440px) {

  /* ── Tech Section ── */
  .tech-section { height:auto; min-height:936px; overflow:clip; }
  .tech-inner {
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:1112px !important;
    margin:0 auto !important;
    padding-top:100px !important;
    display:flex;
    flex-direction:column;
    gap:42px;
    align-items:center;
  }
  .tech-grid-wrap { width:100% !important; }
  .tech-h2 { width:100% !important; }
  .tech-sub { width:100% !important; }

  /* ── Case Studies Section ── */
  .cs-section { height:auto; min-height:200px; overflow:visible; }
  .cs-header {
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:100% !important;
    max-width:1440px !important;
    margin:0 auto !important;
    padding:0 164px !important;
    box-sizing:border-box !important;
  }
  .cs-carousel {
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:100% !important;
    max-width:1440px !important;
    margin:20px auto 0 !important;
    padding:0 164px !important;
    box-sizing:border-box !important;
  }
  .cs-heading { width:517px !important; }

  /* ── AIA Assessment Section ── */
  .aia-section { height:auto; min-height:741px; overflow:visible; }
  .aia-inner {
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:1112px !important;
    height:auto !important;
    margin:0 auto !important;
    padding:100px 0 100px !important;
  }
  .aia-title { width:100% !important; }
  .aia-desc { width:100% !important; }

  /* ── Process Section — calc(50% + (X-720)px) for each element ── */
  .proc-heading  { left:calc(50% - 455px) !important; }  /* 265-720=-455 */
  .proc-n1       { left:calc(50% - 488px) !important; }
  .proc-n2       { left:calc(50% - 108px) !important; }
  .proc-n3       { left:calc(50% + 270px) !important; }
  .proc-n4       { left:calc(50% - 488px) !important; }
  .proc-n5       { left:calc(50% - 108px) !important; }
  .proc-n6       { left:calc(50% + 270px) !important; }
  .proc-box-1    { left:calc(50% - 433px) !important; }  /* 287-720=-433 */
  .proc-box-2    { left:calc(50% - 53px)  !important; }  /* 667-720=-53  */
  .proc-box-3    { left:calc(50% + 325px) !important; }  /* 1045-720=325 */
  .proc-box-4    { left:calc(50% - 433px) !important; }
  .proc-box-5    { left:calc(50% - 53px)  !important; }
  .proc-box-6    { left:calc(50% + 325px) !important; }
  .proc-conn-1a  { left:calc(50% - 253px) !important; }  /* 467-720=-253 */
  .proc-conn-1b  { left:calc(50% + 126px) !important; }  /* 846-720=126  */
  .proc-conn-2a  { left:calc(50% - 253px) !important; }
  .proc-conn-2b  { left:calc(50% + 126px) !important; }
  .proc-text-1   { left:calc(50% - 556px) !important; }  /* 164-720=-556 */
  .proc-text-2   { left:calc(50% - 177px) !important; }  /* 543-720=-177 */
  .proc-text-3   { left:calc(50% + 201px) !important; }  /* 921-720=201  */
  .proc-text-4   { left:calc(50% - 556px) !important; }
  .proc-text-5   { left:calc(50% - 177px) !important; }
  .proc-text-6   { left:calc(50% + 201px) !important; }

  /* ── Partner Section ── */
  .partner-inner      { left:calc(50% - 556px) !important; width:1112px !important; }
  .partner-photo-wrap { left:calc(50% - 556px) !important; }
  .partner-accordion  { left:calc(50%) !important; }  /* 720-720=0 → exactly 50% */

  /* ── Learn & Explore Section — center at all desktop widths ── */
  .learn-section { height:auto; min-height:779px; overflow:visible; }
  .learn-inner {
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:1112px !important;
    height:auto !important;
    min-height:779px;
    margin:0 auto !important;
  }
  .learn-explore-btn { left:50% !important; transform:translateX(-50%) !important; }
  .learn-line-left   { left:0 !important; }
  .learn-line-right  { left:732px !important; }

}

/* Tab switch animation */
@keyframes learnCardIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.learn-card-img,
.learn-card-body {
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.learn-card-enter {
  animation: learnCardIn 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* ── Intermediate desktop (1024–1439px): reduce partner gap, fix learn flow ── */
@media (min-width:1024px) and (max-width:1439px) {
  .partner-section { height:720px !important; }
  .learn-section { height:auto; min-height:779px; overflow:visible; margin-top:100px !important; }
  .learn-inner {
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:1112px !important;
    height:auto !important;
    min-height:779px;
    margin:0 auto !important;
  }
}

/* ── 1024–1099px: fix sections that break at the tablet/desktop boundary ── */
@media (min-width:1024px) and (max-width:1099px) {
  /* Services section: 460+84+500=1044px overflows 1024px — stack like tablet */
  .svc-inner { padding:0 48px !important; }
  .svc-layout { flex-direction:column !important; gap:24px !important; padding-top:40px !important; }
  .svc-left { width:100% !important; position:static !important; transform:none !important; }
  .svc-right { width:100% !important; display:grid !important; grid-template-columns:1fr 1fr !important; gap:16px !important; }
  .svc-card { width:100% !important; max-width:100% !important; height:auto !important; min-height:0 !important; overflow:visible !important; padding:24px !important; box-sizing:border-box !important; }
  .svc-card-inner { position:relative !important; left:auto !important; top:auto !important; width:100% !important; }
  .svc-card-body { width:100% !important; }
  .svc-card-title { white-space:normal !important; font-size:18px !important; }
  /* Logos carousel: uses 1440px base widths — apply same fix as ≤1023px */
  .logos-carousel { padding:0 48px !important; height:95.135px !important; }
  .logo-card { width:calc(20% - 12px) !important; height:95.135px !important; aspect-ratio:unset !important; }
  .logo-card-full { width:calc(20% - 12px) !important; height:95.135px !important; object-fit:contain !important; aspect-ratio:unset !important; }
  .logos-group { inset:0 48px !important; }
  /* Nav: show hamburger at 1024–1099px, full mobile overlay on open */
  #nav-toggle { display:block !important; position:fixed !important; top:20px !important; right:24px !important; z-index:300 !important; }
  .site-nav { display:none !important; position:fixed !important; top:0 !important; left:0 !important; width:100% !important; height:100vh !important; background:#01163b !important; flex-direction:column !important; justify-content:flex-start !important; align-items:stretch !important; gap:0 !important; z-index:200 !important; padding:80px 24px 40px !important; max-width:none !important; right:auto !important; overflow-y:auto !important; }
  .site-nav.nav-open { display:flex !important; }
  .site-nav a { font-size:20px !important; }
  /* Badge: hidden by max-width:1199px rule — restore at 1024–1099px */
  .cert-badge { display:block !important; margin-left:auto !important; margin-right:60px !important; width:40px !important; height:67px !important; }
  /* Hamburger → X when nav is open */
  #nav-toggle.nav-is-open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px) !important; }
  #nav-toggle.nav-is-open span:nth-child(2) { opacity:0 !important; width:0 !important; }
  #nav-toggle.nav-is-open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px) !important; }
  /* FAQ inner: global rule sets left:210px width:1020px — overflows 1024px */
  .faq-inner {
    left:auto !important;
    width:calc(100% - 48px) !important;
    max-width:100% !important;
    margin:0 auto !important;
    padding:0 24px !important;
  }
  /* Contact form: heading and rows use 1440px-designed positions */
  .cf-section { width:100% !important; height:auto !important; }
  .cf-contact { width:100% !important; height:auto !important; padding:60px 5% 60px !important; position:relative !important; box-sizing:border-box !important; overflow:visible !important; }
  .cf-contact-bg { width:100% !important; height:100% !important; }
  .cf-heading {
    position:relative !important; left:auto !important; top:auto !important;
    transform:none !important; width:100% !important;
    font-size:26px !important; line-height:1.3 !important;
    white-space:normal !important; text-align:center !important;
    margin-bottom:40px !important;
  }
  /* Keep form rows as flex row (3 cols side by side) at 1024px */
  .cf-form-row { position:relative !important; left:auto !important; top:auto !important; width:100% !important; display:flex !important; flex-direction:row !important; gap:24px !important; margin-bottom:24px !important; }
  .cf-field-group { position:relative !important; left:auto !important; top:auto !important; }
  .cf-msg-field { position:relative !important; left:auto !important; top:auto !important; width:100% !important; height:auto !important; overflow:visible !important; margin-bottom:24px !important; }
  .cf-cookie-policy { position:relative !important; left:auto !important; top:auto !important; width:100% !important; margin:20px 0 0 !important; }
  .cf-verification-row { position:relative !important; left:auto !important; top:auto !important; width:100% !important; display:flex !important; align-items:center !important; gap:28px !important; margin:16px 0 0 !important; }
  .cf-verification-row .cf-captcha-text { position:relative !important; left:auto !important; top:auto !important; margin:0 !important; white-space:nowrap !important; }
  .cf-turnstile-wrap { position:relative !important; left:auto !important; top:auto !important; margin:0 !important; }
  .cf-submit-btn { position:relative !important; left:auto !important; top:auto !important; transform:none !important; display:block !important; margin:24px auto 0 !important; }
  /* Banner: icon bubbles use 1440px-based positions — hide those that overflow 1024px */
  .bann-photo-1, .bann-photo-2, .bann-photo-3,
  .bann-ic-message, .bann-ic-barchart, .bann-ic-server,
  .bann-ic-increase, .bann-ic-users, .bann-ic-desktop,
  .bann-ic-wallet, .bann-ic-videocam, .bann-ic-rocket,
  .bann-ic-chart, .bann-ic-user { display:none !important; }
  /* AIA Section: keep 2-column row at 1024px — fits with 50/50 split */
  .aia-section { height:auto !important; overflow:hidden !important; padding-bottom:60px !important; margin-bottom:60px !important; }
  .aia-inner { position:relative !important; left:auto !important; top:auto !important; width:100% !important; padding:60px 5% !important; height:auto !important; flex-direction:row !important; gap:40px !important; align-items:center !important; box-sizing:border-box !important; }
  .aia-left { width:50% !important; flex-shrink:0 !important; }
  .aia-right { width:50% !important; height:420px !important; flex-shrink:0 !important; }
  .aia-content { width:100% !important; }
  .aia-title, .aia-desc { width:100% !important; }
  .aia-checklist { width:100% !important; }
  .aia-check-text { white-space:normal !important; }
  /* Process Section: 2-column grid at 1024px (3 rows × 2 steps) */
  .proc-section { display:grid !important; grid-template-columns:1fr 1fr !important; column-gap:40px !important; row-gap:0 !important; overflow:visible !important; height:auto !important; padding:60px 5% !important; align-items:start !important; }
  .proc-heading { grid-column:1/-1 !important; position:relative !important; left:auto !important; top:auto !important; width:100% !important; font-size:28px !important; line-height:1.3 !important; text-align:center !important; margin-bottom:32px !important; }
  .proc-num  { display:none !important; }
  .proc-conn { display:none !important; }
  .proc-box-1  { grid-column:1; grid-row:2; position:relative !important; left:auto !important; top:auto !important; margin:0 auto 12px !important; }
  .proc-text-1 { grid-column:1; grid-row:3; position:relative !important; left:auto !important; top:auto !important; width:100% !important; text-align:center !important; margin-bottom:40px !important; }
  .proc-box-2  { grid-column:2; grid-row:2; position:relative !important; left:auto !important; top:auto !important; margin:0 auto 12px !important; }
  .proc-text-2 { grid-column:2; grid-row:3; position:relative !important; left:auto !important; top:auto !important; width:100% !important; text-align:center !important; margin-bottom:40px !important; }
  .proc-box-3  { grid-column:1; grid-row:4; position:relative !important; left:auto !important; top:auto !important; margin:0 auto 12px !important; }
  .proc-text-3 { grid-column:1; grid-row:5; position:relative !important; left:auto !important; top:auto !important; width:100% !important; text-align:center !important; margin-bottom:40px !important; }
  .proc-box-4  { grid-column:2; grid-row:4; position:relative !important; left:auto !important; top:auto !important; margin:0 auto 12px !important; }
  .proc-text-4 { grid-column:2; grid-row:5; position:relative !important; left:auto !important; top:auto !important; width:100% !important; text-align:center !important; margin-bottom:40px !important; }
  .proc-box-5  { grid-column:1; grid-row:6; position:relative !important; left:auto !important; top:auto !important; margin:0 auto 12px !important; }
  .proc-text-5 { grid-column:1; grid-row:7; position:relative !important; left:auto !important; top:auto !important; width:100% !important; text-align:center !important; margin-bottom:0 !important; }
  .proc-box-6  { grid-column:2; grid-row:6; position:relative !important; left:auto !important; top:auto !important; margin:0 auto 12px !important; }
  .proc-text-6 { grid-column:2; grid-row:7; position:relative !important; left:auto !important; top:auto !important; width:100% !important; text-align:center !important; margin-bottom:0 !important; }
  /* Tech Section: absolute inner overflows 252px */
  .tech-section { height:auto !important; overflow:clip !important; }
  .tech-inner { position:relative !important; left:auto !important; top:auto !important; width:100% !important; padding:60px 5% !important; box-sizing:border-box !important; }
  .tech-grid-wrap { position:relative !important; width:100% !important; height:auto !important; display:grid !important; grid-template-columns:1fr 1fr !important; gap:24px !important; }
  .tech-card-bg { display:none !important; }
  .tech-item { position:relative !important; left:auto !important; top:auto !important; width:100% !important; display:flex !important; gap:16px !important; align-items:flex-start !important; padding:20px !important; background:#fff !important; border-radius:16px !important; box-shadow:0 2px 12px rgba(0,0,0,0.06) !important; box-sizing:border-box !important; }
  .tech-text { width:auto !important; flex:1 !important; }
  .tech-body { width:auto !important; }
  .tech-h2 { width:100% !important; }
  .tech-sub { width:100% !important; }
  /* Case Studies: absolute header/carousel overflow 252-303px */
  .cs-section { height:auto !important; overflow:visible !important; margin-top:60px !important; margin-bottom:60px !important; }
  .cs-header { position:relative !important; left:auto !important; top:auto !important; width:100% !important; padding:0 48px 20px !important; box-sizing:border-box !important; }
  .cs-carousel { position:relative !important; left:auto !important; top:auto !important; width:100% !important; padding:0 48px !important; box-sizing:border-box !important; }
  .cs-heading { width:auto !important; }
  .cs-nav-pill { display:none !important; }
  /* Partner Section: photo + accordion side by side at 1024px */
  .partner-section { height:auto !important; overflow:hidden !important; padding:40px 5% !important; margin-top:60px !important; display:grid !important; grid-template-columns:45% 1fr !important; column-gap:5% !important; row-gap:32px !important; align-items:start !important; }
  .partner-inner { grid-column:1/-1 !important; position:relative !important; left:auto !important; top:auto !important; width:100% !important; height:auto !important; flex-direction:column !important; gap:24px !important; align-items:flex-start !important; }
  .partner-title, .partner-desc { width:100% !important; }
  .partner-photo-wrap { grid-column:1 !important; position:relative !important; left:auto !important; top:auto !important; width:100% !important; height:420px !important; margin-top:0 !important; overflow:hidden !important; border-radius:24px !important; }
  .partner-photo-img { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; left:0 !important; top:0 !important; max-width:none !important; object-fit:cover !important; object-position:center 15% !important; }
  .partner-accordion { grid-column:2 !important; position:relative !important; left:auto !important; top:auto !important; width:100% !important; margin-top:0 !important; gap:8px !important; }
  .partner-acc-item { width:100% !important; }
  .partner-acc-body { width:100% !important; }
  .partner-acc-text { white-space:normal !important; font-size:16px !important; }
  /* Learn Section: 3-column grid at 1024px — img+body pairs placed explicitly */
  .learn-section { height:auto !important; overflow:visible !important; padding:60px 5% !important; margin-top:60px !important; }
  .learn-inner { width:100% !important; height:auto !important; min-height:0 !important; display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:0 24px !important; align-items:start !important; }
  .learn-header { grid-column:1/-1 !important; position:relative !important; top:auto !important; left:auto !important; width:100% !important; height:auto !important; display:flex !important; align-items:center !important; justify-content:space-between !important; flex-wrap:wrap !important; gap:16px !important; margin-bottom:24px !important; }
  .learn-heading { white-space:normal !important; }
  /* Explicit grid placement: images row 2, bodies row 3 */
  .lc-img-1 { grid-column:1 !important; grid-row:2 !important; }
  .lc-img-2 { grid-column:2 !important; grid-row:2 !important; }
  .lc-img-3 { grid-column:3 !important; grid-row:2 !important; }
  .lc-body-1 { grid-column:1 !important; grid-row:3 !important; }
  .lc-body-2 { grid-column:2 !important; grid-row:3 !important; }
  .lc-body-3 { grid-column:3 !important; grid-row:3 !important; }
  .learn-card-img { position:relative !important; left:auto !important; top:auto !important; width:100% !important; height:180px !important; display:block !important; overflow:hidden !important; border-radius:12px 12px 0 0 !important; }
  .learn-card-body { position:relative !important; left:auto !important; top:auto !important; width:100% !important; height:auto !important; min-height:180px !important; padding-bottom:24px !important; display:block !important; }
  .learn-card-date { position:relative !important; left:auto !important; top:auto !important; padding:16px 20px 0 !important; display:block !important; }
  .learn-card-title { position:relative !important; left:auto !important; top:auto !important; width:100% !important; height:auto !important; padding:8px 20px 0 !important; box-sizing:border-box !important; display:block !important; overflow-wrap:break-word !important; word-break:break-word !important; }
  .learn-card-desc { position:relative !important; left:auto !important; top:auto !important; width:100% !important; height:auto !important; padding:8px 20px 0 !important; box-sizing:border-box !important; display:block !important; overflow-wrap:break-word !important; word-break:break-word !important; }
  /* Footer row: line | button | line, sharing the same 3-col grid as the cards above */
  .learn-line-left { grid-column:1 !important; grid-row:4 !important; position:relative !important; left:auto !important; top:auto !important; width:100% !important; align-self:center !important; display:block !important; }
  .learn-explore-btn { grid-column:2 !important; grid-row:4 !important; position:relative !important; left:auto !important; top:auto !important; margin:32px auto !important; display:flex !important; align-items:center !important; justify-content:center !important; }
  .learn-line-right { grid-column:3 !important; grid-row:4 !important; position:relative !important; left:auto !important; top:auto !important; width:100% !important; align-self:center !important; display:block !important; }
  /* FAQ heading: 1020px width inside 976px faq-inner overflows 44px */
  .faq-heading { width:100% !important; }
  .faq-section { height:auto !important; min-height:0 !important; overflow:visible !important; margin-top:60px !important; padding-top:24px !important; }
  /* Footer: min-width:1024px block forces absolute — override back to responsive */
  .cf-footer { position:relative !important; top:auto !important; left:auto !important; width:100% !important; height:auto !important; }
  .cf-footer-dark { position:relative !important; left:auto !important; top:auto !important; width:100% !important; height:auto !important; padding:40px 5% 32px !important; display:grid !important; grid-template-columns:1fr 1fr !important; gap:28px 16px !important; background:#1e2222 !important; }
  .cf-fcol { position:relative !important; left:auto !important; top:auto !important; width:auto !important; display:flex !important; flex-direction:column !important; gap:6px !important; }
  .cf-footer-dark .cf-fhdr { position:relative !important; left:auto !important; top:auto !important; display:block !important; margin-bottom:8px !important; }
  .cf-footer-dark .cf-flist { position:relative !important; left:auto !important; top:auto !important; display:block !important; white-space:normal !important; }
  .cf-footer-dark .cf-follow { position:relative !important; left:auto !important; top:auto !important; grid-column:1/-1 !important; margin-top:8px !important; display:flex !important; align-items:center !important; gap:12px !important; justify-content:center !important; flex-wrap:wrap !important; }
  .cf-social-row { position:relative !important; width:auto !important; height:auto !important; display:flex !important; gap:10px !important; }
  .cf-icon { position:relative !important; left:auto !important; top:auto !important; width:18px !important; height:18px !important; }
  .cf-footer-black { position:relative !important; top:auto !important; width:100% !important; height:auto !important; padding:20px 5% !important; display:flex !important; align-items:center !important; justify-content:space-between !important; flex-wrap:wrap !important; gap:12px !important; background:#000 !important; }
  .cf-footer-black .cf-footer-logo { position:relative !important; left:auto !important; top:auto !important; width:40px !important; height:42px !important; }
  .cf-footer-black .cf-copyright { position:relative !important; left:auto !important; top:auto !important; white-space:normal !important; text-align:right !important; flex:1 !important; }
}

@media (min-width:1440px) {


/* ── FAQ Section ── */
  .faq-section { height:auto; min-height:400px; }
  .faq-inner {
    left:auto !important;
    width:1020px !important;
    margin:0 auto !important;
  }

  /* ── Contact Form + Footer (full-width, content centered at 1440px) ── */
  .cf-section     { width:100% !important; max-width:none !important; }
  .cf-contact     { width:100% !important; }
  .cf-contact-bg  { width:100% !important; }
  /* Center the heading */
  .cf-heading     { left:50% !important; transform:translateX(-50%) !important; width:847px !important; }
  /* Center the form rows: original left:164 → calc(50%-556px) */
  .cf-form-row    { left:calc(50% - 556px) !important; }
  /* Center message, captcha, widget, submit */
  .cf-msg-field      { left:calc(50% - 556px) !important; }  /* 164-720=-556 */
  .cf-captcha-text   { left:calc(50% - 555px) !important; }  /* 165-720=-555 */
  .cf-captcha-blank  { left:calc(50% - 434px) !important; }  /* 286-720=-434 */
  .cf-widget         { left:calc(50% - 287px) !important; }  /* 433-720=-287 */
  .cf-cookie-policy  { left:calc(50% - 555px) !important; }  /* 165-720=-555 */
  .cf-verification-row { left:calc(50% - 555px) !important; }
  .cf-turnstile-wrap { left:calc(50% - 353px) !important; top:524px !important; width:300px !important; }
  .cf-submit-btn     { left:50% !important; transform:translateX(-50%) !important; }

  /* Footer full-width background: push background to cf-footer,
     keep dark/black divs at 1440px centered for content alignment */
  .cf-footer {
    background: linear-gradient(to bottom, #1e2222 618px, #000 618px) !important;
    width: 100% !important;
    left: 0 !important;
  }
  .cf-footer-dark {
    position:absolute !important;
    left:calc(50% - 720px) !important;
    width:1440px !important;
    background: transparent !important;
  }
  .cf-footer-black {
    position:absolute !important;
    left:calc(50% - 720px) !important;
    top:618px !important;
    width:1440px !important;
    background: transparent !important;
  }

}


/* Tab switch animation */
@keyframes learnCardIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.learn-card-img,
.learn-card-body {
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.learn-card-enter {
  animation: learnCardIn 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* ── FAQ mobile/tablet width fix: override the flow-layout 1020px rule ── */
@media (max-width:1023px) {
  .faq-inner {
    width:100% !important;
    left:auto !important;
    max-width:100% !important;
    box-sizing:border-box;
    padding:0 5% !important;
  }
}
@media (max-width:767px) {
  .faq-inner { padding:0 24px !important; }
}


/* ============================================================
   MOBILE FIXES — verified via Playwright at 390px
   ============================================================ */

/* ── 1. Logos strip: wrap all 5 logos ── */
@media (max-width:767px) {
  .logos-carousel {
    padding: 0 20px;
    height: auto !important;
    min-height: 0;
  }
  /* Switch from absolute→relative so the carousel expands with wrapped rows */
  .logos-group {
    position: relative !important;
    inset: auto !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    /* Inactive groups: take no space */
    height: 0 !important;
    overflow: hidden !important;
  }
  .logos-group--active {
    height: auto !important;
    overflow: visible !important;
  }
  .logo-card {
    width: calc(50% - 6px) !important;
    height: 80px !important;
    flex-shrink: 1;
  }
  .logo-card-full {
    width: calc(50% - 6px) !important;
    height: 80px !important;
    flex-shrink: 1;
    object-fit: contain;
  }
}

/* ── 2. Banner: fix heading overflow and full-width canvas ── */
@media (max-width:1023px) {
  .banner {
    height: auto;
    min-height: 200px;
    padding: 40px 0;
  }
  .banner-canvas {
    position: relative !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
  }
  .banner-text {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    padding: 0 24px;
    box-sizing: border-box;
  }
  .banner-heading { width:100% !important; font-size:20px; white-space:normal; }
  .banner-sub     { width:100% !important; font-size:14px; }
  .bann-photo-1, .bann-photo-2, .bann-photo-3,
  .bann-ic-message, .bann-ic-barchart, .bann-ic-server,
  .bann-ic-increase, .bann-ic-users, .bann-ic-desktop,
  .bann-ic-wallet, .bann-ic-videocam, .bann-ic-rocket,
  .bann-ic-chart, .bann-ic-user { display:none !important; }
}

/* ── 3. Services: fix card title wrap + body width ── */
@media (max-width:767px) {
  .svc-card-title { white-space:normal !important; }
  .svc-card-body  { width:100% !important; }
  .svc-card-inner { width:calc(100% - 48px) !important; }
  .svc-sub        { width:100% !important; }
  .svc-heading    { font-size:28px; line-height:1.3; }
}

/* ── 4. Tech grid: convert absolute items to flow layout ── */
@media (max-width:1023px) {
  .tech-section   { overflow:clip; }
  .tech-grid-wrap {
    position:relative !important;
    width:100% !important;
    height:auto !important;
    display:flex !important;
    flex-direction:column !important;
    gap:24px !important;
  }
  .tech-card-bg { display:none; }
  .tech-item {
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:100% !important;
    display:flex;
    gap:16px;
    align-items:flex-start;
    padding:20px;
    background:#fff;
    border-radius:16px;
    box-shadow:0 2px 12px rgba(0,0,0,0.06);
    box-sizing:border-box;
  }
  .tech-text  { width:auto !important; flex:1; }
  .tech-body  { width:auto !important; }
  .tech-h2    { font-size:26px !important; }
  .tech-sub   { font-size:14px; }
}

/* ── 5. AIA: fix checklist text overflow ── */
@media (max-width:767px) {
  .aia-check-text { white-space:normal !important; }
  .aia-checklist  { width:100% !important; }
  .aia-title      { font-size:20px; }
}

/* ── 6. Process: pair each icon with its text using flex + order ── */
@media (max-width:767px) {
  .proc-section {
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    overflow:visible !important;
    height:auto !important;
    padding:40px 24px 60px !important;
    gap:0 !important;
  }
  .proc-heading {
    position:relative !important;
    left:auto !important; top:auto !important;
    width:100% !important;
    font-size:26px !important;
    line-height:1.3 !important;
    text-align:center !important;
    margin-bottom:40px !important;
    order:0;
  }
  .proc-num  { display:none !important; }
  .proc-conn { display:none !important; }

  /* Icon + text pairing via flex order */
  .proc-box-1  { order:1;  position:relative !important; left:auto !important; top:auto !important; margin:0 auto 12px !important; }
  .proc-text-1 { order:2;  position:relative !important; left:auto !important; top:auto !important; width:100% !important; margin-bottom:32px !important; }
  .proc-box-2  { order:3;  position:relative !important; left:auto !important; top:auto !important; margin:0 auto 12px !important; }
  .proc-text-2 { order:4;  position:relative !important; left:auto !important; top:auto !important; width:100% !important; margin-bottom:32px !important; }
  .proc-box-3  { order:5;  position:relative !important; left:auto !important; top:auto !important; margin:0 auto 12px !important; }
  .proc-text-3 { order:6;  position:relative !important; left:auto !important; top:auto !important; width:100% !important; margin-bottom:32px !important; }
  .proc-box-4  { order:7;  position:relative !important; left:auto !important; top:auto !important; margin:0 auto 12px !important; }
  .proc-text-4 { order:8;  position:relative !important; left:auto !important; top:auto !important; width:100% !important; margin-bottom:32px !important; }
  .proc-box-5  { order:9;  position:relative !important; left:auto !important; top:auto !important; margin:0 auto 12px !important; }
  .proc-text-5 { order:10; position:relative !important; left:auto !important; top:auto !important; width:100% !important; margin-bottom:32px !important; }
  .proc-box-6  { order:11; position:relative !important; left:auto !important; top:auto !important; margin:0 auto 12px !important; }
  .proc-text-6 { order:12; position:relative !important; left:auto !important; top:auto !important; width:100% !important; margin-bottom:0 !important; }

  .proc-step-title { font-size:18px; }
  .proc-step-body  { font-size:14px; }
}

/* ── 7. Partner: accordion items need visual separation ── */
@media (max-width:767px) {
  .partner-acc-item {
    border-bottom:1px solid rgba(0,0,0,0.1);
    padding-bottom:16px !important;
    height:auto !important;
    align-items:flex-start !important;
  }
  .partner-acc-text { font-size:16px !important; white-space:normal !important; flex:1; padding-right:12px; }
  .partner-title { font-size:26px; }
}

/* ── 8. Case studies: fix heading overflow + carousel width ── */
@media (max-width:767px) {
  .cs-section   { overflow:hidden !important; margin-top:48px !important; margin-bottom:48px !important; }
  .cs-header {
    padding: 0 24px 20px !important;
    box-sizing: border-box !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
  }
  .cs-heading {
    width: 100% !important;
    font-size: 26px !important;
    line-height: 1.3 !important;
    flex-shrink: 1 !important;
  }
  .cs-nav-pill  { display: none !important; }
  .cs-carousel  { padding: 0 24px !important; box-sizing: border-box !important; gap: 16px !important; }
  .cs-card      { width: calc(100vw - 48px) !important; }
  .cs-card-text { width: 100% !important; }
  .cs-card-sub  { width: 100% !important; }
  .cs-stat-desc { font-size: 13px; }
  .cs-stat-num  { font-size: 22px; }
}

/* ── 9. Learn: fix body text absolute positions to flow ── */
@media (max-width:1023px) {
  .learn-card-date  { position:relative !important; left:auto !important; top:auto !important; padding:20px 20px 0 !important; font-size:14px !important; }
  .learn-card-title { position:relative !important; left:auto !important; top:auto !important; height:auto !important; width:100% !important; box-sizing:border-box !important; padding:10px 20px 0 !important; font-size:18px !important; line-height:1.4 !important; margin-top:4px !important; }
  .learn-card-desc  { position:relative !important; left:auto !important; top:auto !important; height:auto !important; width:100% !important; box-sizing:border-box !important; padding:12px 20px 24px !important; font-size:14px !important; line-height:1.6 !important; }
  /* Card image rounded top, card body rounded bottom — visually separate each card */
  .learn-card-img   { border-radius:16px 16px 0 0 !important; overflow:hidden !important; }
  .learn-card-body  { border-radius:0 0 16px 16px !important; margin-bottom:20px !important; }
}

/* ── Footer column grouping (cf-fcol) ── */
/* Desktop: column wrapper inherits position:absolute from inline style */
.cf-fcol { display:flex; flex-direction:column; gap:0; }
.cf-fcol .cf-fhdr { position:relative !important; left:auto !important; top:auto !important; margin-bottom:8px; }
.cf-fcol .cf-flist { position:relative !important; left:auto !important; top:auto !important; white-space:nowrap; }

/* Mobile/tablet: reset absolute, flow as grid */
@media (max-width:1023px) {
  .cf-footer-dark {
    position:relative !important;
    left:auto !important;
    width:100% !important;
    height:auto !important;
    padding:40px 24px 32px !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:28px 16px !important;
    background:#1e2222 !important;
  }
  .cf-fcol {
    position:relative !important;
    left:auto !important;
    top:auto !important;
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .cf-fcol .cf-flist { white-space:normal !important; }
  .cf-follow {
    position:relative !important;
    left:auto !important; top:auto !important;
    grid-column:1/-1;
    margin-top:8px;
    flex-wrap:wrap;
    gap:12px;
  }
  .cf-social-row { position:relative; width:auto; display:flex; gap:16px; }
  .cf-icon { position:relative !important; left:auto !important; }
}

@media (max-width:767px) {
  .cf-footer-dark { grid-template-columns:1fr 1fr !important; padding:28px 20px !important; }
  .cf-fcol .cf-fhdr { font-size:14px; }
  .cf-fcol .cf-flist { font-size:11px; }
}

/* ── Services card: convert inner to relative flow so height auto works ── */
@media (max-width:1023px) {
  .svc-card {
    height:auto !important;
    overflow:visible !important;
    padding:24px !important;
    box-sizing:border-box !important;
    min-height:0 !important;
  }
  .svc-card-inner {
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:100% !important;
  }
  .svc-card-body { width:100% !important; }
  .svc-card-title { white-space:normal !important; font-size:18px; }
  .svc-left {
    position:relative !important;
    top:auto !important;
    width:100% !important;
    height:auto !important;
  }
}

/* ── Tablet: keep services 2-up ── */
@media (min-width:768px) and (max-width:1023px) {
  .svc-right { display:grid !important; grid-template-columns:1fr 1fr !important; gap:16px !important; }
  .svc-card { width:auto !important; }
}

/* ── Mobile menu: close button inside nav ── */
@media (max-width:1023px) {
  #nav-toggle {
    position:fixed !important;
    top:20px !important;
    right:24px !important;
    z-index:300 !important;
  }
  /* When nav is open, hamburger turns to X */
  .site-nav.nav-open ~ #nav-toggle span:nth-child(1),
  body.nav-active #nav-toggle span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
  body.nav-active #nav-toggle span:nth-child(2) { opacity:0; }
  body.nav-active #nav-toggle span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

  /* Nav links styling */
  .site-nav a {
    font-size:18px !important;
    color:#fff !important;
    padding:10px 0 !important;
    border-bottom:1px solid rgba(255,255,255,0.1) !important;
    width:100% !important;
    text-align:center !important;
  }
}

/* ── Footer: tighter column gaps ── */
@media (max-width:1023px) {
  .cf-footer-dark {
    gap:20px 16px !important;
    padding:32px 20px 28px !important;
  }
  .cf-fcol {
    gap:6px !important;
  }
}
@media (max-width:767px) {
  .cf-footer-dark {
    gap:16px 12px !important;
    padding:24px 16px 20px !important;
  }
}


/* Tab switch animation */
@keyframes learnCardIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.learn-card-img,
.learn-card-body {
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.learn-card-enter {
  animation: learnCardIn 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* ── FAQ: clear stale min-height ── */
.faq-inner {
  min-height:0 !important;
}

/* ── Hamburger → X animation ── */
#nav-toggle span { transition:transform 0.3s ease, opacity 0.3s ease; }
#nav-toggle.nav-is-open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
#nav-toggle.nav-is-open span:nth-child(2) { opacity:0; width:0; }
#nav-toggle.nav-is-open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* ── Partner accordion: fix item overflow at mobile ── */
@media (max-width:1023px) {
  .partner-section {
    height:auto !important;
    overflow:hidden !important;
  }
  /* Submit button: override left:50% from max-width:1439px block */
  .cf-submit-btn {
    position:relative !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    display:block !important;
    margin:32px auto 0 !important;
  }
  .partner-accordion {
    width:100% !important;
    gap:0 !important;
    box-sizing:border-box !important;
  }
  .partner-acc-item {
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    height:auto !important;
    min-height:52px;
    padding:14px 0 14px 0 !important;
    border-bottom:1px solid rgba(0,0,0,0.08) !important;
    border-radius:0 !important;
    align-items:center !important;
    gap:12px !important;
  }
  /* Reserve space for icon always (keeps text aligned), show only when open */
  .partner-acc-item-icon {
    width: 32px !important;
    height: 32px !important;
    opacity: 0 !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
  }
  .partner-acc-item.acc-open .partner-acc-item-icon {
    opacity: 1 !important;
    margin-right: 14px !important;
  }
  .partner-acc-row { gap: 0 !important; }
  .partner-acc-text {
    white-space:normal !important;
    flex:1 !important;
    min-width:0 !important;
    font-size:15px !important;
    line-height:1.4 !important;
    word-break:break-word;
  }
  .partner-acc-icon {
    flex-shrink:0 !important;
    width:28px !important;
    height:28px !important;
  }
  /* Body text: fill available width so it doesn't wrap at 356px */
  .partner-acc-body { width:100% !important; box-sizing:border-box !important; }
  .partner-acc-item.acc-open .partner-acc-body { max-height:300px !important; }
}

@media (max-width:767px) {
  .partner-acc-text { font-size:14px !important; }
}

/* ── Scroll reveal animations ─────────────────────────────────────────────── */
[data-scroll] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: 0.65s;
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-scroll="fade-up"]    { transform: translateY(32px); }
[data-scroll="fade-left"]  { transform: translateX(-40px); }
[data-scroll="fade-right"] { transform: translateX(40px); }
[data-scroll].scroll-visible {
  opacity: 1;
  transform: none;
}
body.modal-open .svc-left,
body.modal-open .svc-left-text,
body.modal-open .svc-heading,
body.modal-open .svc-sub,
body.modal-open .svc-cta,
body.modal-open .banner-text,
body.modal-open .banner-copy,
body.modal-open .banner-heading,
body.modal-open .banner-sub,
body.modal-open .banner-cta {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}
@media (prefers-reduced-motion: reduce) {
  [data-scroll] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ══ COMPREHENSIVE MOBILE RESPONSIVENESS ═══════════════════════════════════ */

/* ── 1. Global: prevent horizontal overflow ── */
@media (max-width:1023px) {
  html, body { overflow-x: hidden; max-width: 100%; }
}

/* ── 2. AIA: fix overflow chain — aia-left must have min-width:0 as flex item ── */
@media (max-width:1023px) {
  .aia-section   { overflow: hidden; }
  .aia-inner     { box-sizing: border-box !important; padding: 60px 5% !important; }
  /* Every element in the column chain must be constrained */
  .aia-left        { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  .aia-content     { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  .aia-title-block { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  .aia-title       { width: 100% !important; max-width: 100% !important; word-break: break-word !important; }
  .aia-desc        { width: 100% !important; max-width: 100% !important; word-break: break-word !important; overflow-wrap: break-word !important; }
  .aia-checklist   { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  .aia-check-item  { min-width: 0 !important; }
}
@media (max-width:767px) {
  .aia-inner { padding: 48px 24px !important; }
}
@media (max-width:767px) {
  .aia-check-item { align-items: flex-start !important; }
  .aia-check-text {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  .aia-right { height: 240px !important; }
}

/* ── 3. CS carousel: scroll snap + touch scrolling ── */
@media (max-width:767px) {
  .cs-section  { overflow: hidden !important; margin-top: 48px !important; margin-bottom: 48px !important; }
  .cs-carousel {
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    padding: 0 20px 20px !important;
  }
  .cs-card { scroll-snap-align: start !important; }
  .cs-heading { word-break: break-word !important; }
}

/* ── 4. Services: heading + sub wrapping ── */
@media (max-width:767px) {
  .svc-heading { word-break: break-word !important; font-size: 26px !important; line-height: 1.3 !important; }
  .svc-sub     { word-break: break-word !important; width: 100% !important; }
  .svc-section { overflow: hidden; }
}

/* ── 5. Banner: ensure text wraps + section has minimum height ── */
@media (max-width:767px) {
  .banner-heading { font-size: 26px !important; line-height: 1.3 !important; word-break: break-word !important; }
  .banner-sub     { font-size: 14px !important; word-break: break-word !important; }
  .banner         { min-height: 220px !important; }
}

/* ── 6. Tech: tighter inner padding ── */
@media (max-width:767px) {
  .tech-inner {
    box-sizing: border-box !important;
    padding: 40px 24px !important;
    width: 100% !important;
  }
  .tech-h2  { font-size: 26px !important; }
  .tech-sub { font-size: 14px !important; word-break: break-word; }
}

/* ── 7. Process: tighten spacing on small screens ── */
@media (max-width:767px) {
  .proc-heading { font-size: 24px !important; }
  .proc-box     { width: 120px !important; height: 120px !important; border-radius: 20px !important; }
  .proc-box img { width: 50px !important; height: 50px !important; }
}

/* ── 8. FAQ: font size hierarchy + icon alignment ── */
@media (max-width:767px) {
  .faq-section  { padding: 16px 0 48px; margin-top: 48px; }
  .faq-inner    { padding: 0 20px; }
  .faq-heading  { font-size: 24px !important; line-height: 1.3 !important; margin-bottom: 24px !important; }
  .faq-accordion-header h5 { font-size: 16px !important; padding: 16px 0 14px !important; }
  .faq-accordion-content p { font-size: 13px !important; line-height: 24px !important; }
}

/* ── 9. Contact form: remove top gap on mobile, fix field spacing ── */
@media (max-width:1023px) {
  .cf-section  { margin-top: 0 !important; }
  .cf-contact  { box-sizing: border-box !important; overflow: visible; }
  .cf-field-group { box-sizing: border-box !important; }
  /* Override inline gap:31px on form rows */
  .cf-form-row { gap: 0 !important; }
  .cf-captcha-text {
    font-size: 14px !important;
    white-space: normal !important;
    /* block + inline-block input keeps everything on one line reliably */
    display: block !important;
    line-height: 2.2 !important;
    margin: 16px 0 8px !important;
  }
  .cf-captcha-input {
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 6px !important;
  }
}
@media (max-width:767px) {
  .cf-heading    { font-size: 20px !important; line-height: 1.4 !important; word-break: break-word !important; }
  /* Clear desktop transform so button renders correctly */
  .cf-submit-btn { width: 100% !important; border-radius: 12px !important; transform: none !important; }
}

/* ── 10. Partner: compact layout + photo crop + accordion body ── */
@media (max-width:767px) {
  .partner-section  { padding: 40px 24px 32px !important; margin-top: 48px !important; }
  .partner-title    { font-size: 24px !important; line-height: 1.3 !important; word-break: break-word; }
  .partner-desc     { font-size: 14px !important; line-height: 1.6 !important; }
  .partner-inner    { gap: 12px !important; }
  /* Photo: use object-fit so face is visible */
  .partner-photo-wrap { height: 260px !important; margin-top: 20px !important; }
  .partner-photo-img  {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center 15% !important;
  }
  /* Accordion: fix body width overflow */
  .partner-accordion  { margin-top: 20px !important; }
  .partner-acc-body   { width: 100% !important; box-sizing: border-box !important; }
  .partner-acc-body p { font-size: 14px !important; word-break: break-word !important; overflow-wrap: break-word !important; }
  /* More room for expanded body text when wrapping */
  .partner-acc-item.acc-open .partner-acc-body { max-height: 300px !important; }
}

/* ── 11. Logos: strip padding ── */
@media (max-width:767px) {
  .logos-strip { padding: 32px 0 36px; }
}

/* ── 12. Footer: tighten copyright bar ── */
@media (max-width:767px) {
  .cf-footer-black { padding: 16px 20px !important; }
  .cf-copyright    { font-size: 11px !important; white-space: normal !important; }
  .cf-footer-logo  { width: 32px !important; height: 34px !important; }
}

/* ── Desktop nav dropdowns (min-width:1100px) ── */
@media (min-width:1100px) {
  /* Allow nav dropdown to overflow the hero section.
     Move clip from .hero to .hero-bg so bg-layer images stay contained
     while dropdown panels can escape below the nav. */
  .hero     { overflow: visible; }
  .hero-bg  { overflow: hidden; }

  .nav-group { position: relative; }

  /* Show chevron at desktop */
  .nav-chevron {
    display:    inline-block !important;
    width:      10px !important;
    height:     6px !important;
    opacity:    0.7;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  .nav-group:hover .nav-chevron { transform: rotate(180deg); opacity: 1; }

  /* Dropdown panel — top:100% removes hover gap; padding-top creates visual offset */
  .nav-group-items {
    display:        block !important;
    position:       absolute;
    top:            100%;
    left:           50%;
    transform:      translateX(-50%) translateY(-6px);
    background:     #ffffff;
    border-radius:  10px;
    box-shadow:     0 10px 40px rgba(0,0,20,0.18);
    padding:        20px 0 8px;
    min-width:      240px;
    z-index:        1000;
    opacity:        0;
    pointer-events: none;
    transition:     opacity 0.2s ease, transform 0.2s ease;
  }
  /* Arrow nub sits within the padding-top */
  .nav-group-items::before {
    content:          '';
    position:         absolute;
    top:              8px;
    left:             50%;
    transform:        translateX(-50%);
    width:            14px;
    height:           14px;
    background:       #ffffff;
    box-shadow:       -2px -2px 5px rgba(0,0,0,0.06);
    clip-path:        polygon(0 100%, 50% 0, 100% 100%);
  }
  /* Show on hover */
  .nav-group:hover .nav-group-items {
    opacity:        1;
    pointer-events: auto;
    transform:      translateX(-50%) translateY(0);
  }

  /* Sub-links inside dropdown */
  .nav-sub-link {
    display:     block !important;
    padding:     9px 20px !important;
    font-family: var(--font) !important;
    font-weight: 400 !important;
    font-size:   13px !important;
    line-height: 1.5 !important;
    color:       #374151 !important;
    white-space: nowrap !important;
    border-left: none !important;
    transition:  background 0.15s ease, color 0.15s ease;
    text-decoration: none !important;
  }
  .nav-sub-link:hover {
    background: #f0f4ff !important;
    color:      #1977f3 !important;
  }

  /* Right-align last 2 groups (Resources, Company) so dropdown doesn't go off-screen */
  .nav-group:nth-last-child(-n+2) .nav-group-items {
    left:      auto;
    right:     0;
    transform: translateY(-6px);
  }
  .nav-group:nth-last-child(-n+2):hover .nav-group-items {
    transform: translateY(0);
  }
  .nav-group:nth-last-child(-n+2) .nav-group-items::before {
    left:      auto;
    right:     20px;
    transform: none;
  }
  /* Badge is the real last child — also cover 3rd from last (Company) */
  .nav-group:nth-last-child(-n+3) .nav-group-items {
    left:      auto;
    right:     0;
    transform: translateY(-6px);
  }
}

/* ── Hamburger accordion nav — active at all hamburger breakpoints ── */
@media (max-width:1099px) {
  /* Switch nav-group from desktop flex-item to block accordion item */
  .nav-group {
    display:       block !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  }
  .nav-group:last-child { border-bottom: none !important; }

  /* Section header button */
  .nav-group-trigger {
    width:           100% !important;
    display:         flex !important;
    justify-content: space-between !important;
    align-items:     center !important;
    text-align:      left !important;
    padding:         15px 0 !important;
    font-size:       14px !important;
    font-weight:     600 !important;
    letter-spacing:  1.5px !important;
    text-transform:  uppercase !important;
    color:           #ffffff !important;
    white-space:     normal !important;
    gap:             8px !important;
  }

  /* Chevron icon — show and animate */
  .nav-chevron {
    display:    block !important;
    width:      12px !important;
    height:     7px !important;
    flex-shrink:0 !important;
    transition: transform 0.3s ease !important;
    opacity:    0.7 !important;
  }
  .nav-group.is-open .nav-chevron { transform: rotate(180deg) !important; }

  /* Sub-items panel — collapse/expand */
  .nav-group-items {
    display:    block !important;
    max-height: 0 !important;
    overflow:   hidden !important;
    transition: max-height 0.35s ease !important;
  }
  .nav-group.is-open .nav-group-items { max-height: 700px !important; }

  /* Sub-item links — use .site-nav .nav-sub-link to beat .site-nav a specificity */
  .site-nav .nav-sub-link {
    display:         block !important;
    padding:         9px 0 9px 14px !important;
    font-family:     var(--font) !important;
    font-weight:     400 !important;
    font-size:       13px !important;
    line-height:     1.5 !important;
    color:           rgba(255,255,255,0.65) !important;
    text-decoration: none !important;
    border-left:     2px solid rgba(255,255,255,0.15) !important;
    text-transform:  none !important;
    white-space:     normal !important;
    text-align:      left !important;
    border-bottom:   none !important;
    width:           auto !important;
  }
  .site-nav .nav-sub-link:hover {
    color:             #ffffff !important;
    border-left-color: #4876f5 !important;
  }
  /* Bottom padding after last sub-item */
  .site-nav .nav-group-items .nav-sub-link:last-child { margin-bottom: 10px !important; }
}

/* ── nav-controls base defaults (overridden by global block below) ── */
.lang-selector { display: none; }
.nav-phone-btn  { display: none; }
.nav-controls   { display: none; }

/* ══════════════════════════════════════════════════════════════
   GLOBAL HAMBURGER NAV — In-flow (not fixed), scrolls with page.
   ══════════════════════════════════════════════════════════════ */

/* 0. Hero-nav layout: always logo-left, controls-right */
.hero-nav { justify-content: space-between !important; }

/* 1. Nav-controls column — right side of hero-nav */
.nav-controls {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  margin-left: 0 !important;
  align-self: flex-start !important;
  flex-shrink: 0 !important;
}

/* Top row: language selector + hamburger, vertically centred in nav bar */
.nav-controls-top {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  height: 99px !important;
}

/* 2. Hamburger — dark circle */
#nav-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 7px !important;
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  background: #000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  cursor: pointer !important;
  position: relative !important;
  top: 0 !important;
  right: auto !important;
  z-index: 300 !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}
#nav-toggle:hover,
#nav-toggle:focus-visible {
  background: #ffc107 !important;
  outline: none !important;
}
#nav-toggle:hover span,
#nav-toggle:focus-visible span {
  background: #ffffff !important;
}
#nav-toggle span {
  display: block !important;
  width: 31.5px !important;
  height: 3px !important;
  background: #ffffff !important;
  border-radius: 2px !important;
  transition: all 0.3s ease !important;
  margin: 0 !important;
}
/* X animation when open */
#nav-toggle.nav-is-open span:nth-child(1) { transform: rotate(45deg) translate(0, 7px) !important; }
#nav-toggle.nav-is-open span:nth-child(2) { opacity: 0 !important; transform: scaleX(0) !important; }
#nav-toggle.nav-is-open span:nth-child(3) { transform: rotate(-45deg) translate(0, -7px) !important; }

/* 3. Language selector — inline, left of hamburger */
.lang-selector {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  position: static !important;
  background: none !important;
  border: none !important;
  color: #ffffff !important;
  font-family: var(--font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  cursor: pointer !important;
  padding: 4px 6px !important;
  white-space: nowrap !important;
}
.lang-flag { font-size: 15px !important; line-height: 1 !important; }
.lang-text  {
  font-weight: 400 !important;
  white-space: nowrap !important;
}

/* 4. Phone button — dark circle, below top row */
.nav-phone-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  background: rgba(8,8,8,0.75) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-radius: 50% !important;
  position: static !important;
  text-decoration: none !important;
  color: #ffffff !important;
  margin-top: 8px !important;
}
.nav-phone-btn svg { flex-shrink: 0 !important; }

/* 5. Badge — below phone button */
.cert-badge {
  display: block !important;
  position: static !important;
  width: 46px !important;
  height: auto !important;
  margin: 8px 0 0 0 !important;
}

/* 6. Site-nav — full-screen dark overlay at ALL sizes */
.site-nav {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  width: 100% !important;
  height: 100vh !important;
  background: rgba(0,0,0,0.95) !important;
  z-index: 200 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 160px 80px 60px !important;
  box-sizing: border-box !important;
  gap: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}
.site-nav.nav-open {
  display: flex !important;
}

/* 7. Hide controls when menu overlay is open */
.nav-is-open ~ .nav-controls .lang-selector,
.nav-is-open ~ .nav-controls .nav-phone-btn,
.nav-is-open ~ .nav-controls .cert-badge {
  opacity: 0 !important;
  pointer-events: none !important;
}
/* Also handle via parent body class */
body.nav-active .lang-selector,
body.nav-active .nav-phone-btn,
body.nav-active .cert-badge {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ── Menu grid — 3-column layout inside the overlay ── */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px 80px;
  width: 100%;
  max-width: 1300px;
}

.menu-section-heading {
  font-family: var(--font) !important;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0;
  line-height: 50px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding-bottom: 0;
}

.menu-section-links {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}

.menu-section-links li { margin-bottom: 7px; }

.menu-section-links a {
  font-family: var(--font) !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  display: block;
  line-height: 21px;
  transition: color 0.2s ease;
}

.menu-section-links a:hover { color: #ffffff; }

/* Tablet: 2 columns */
@media (max-width:1099px) {
  .site-nav { padding: 120px 40px 40px !important; justify-content: flex-start !important; }
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 40px; }
  .menu-section-heading { font-size: 18px; line-height: 40px; white-space: normal !important; word-break: break-word !important; }
  .menu-section-links a { white-space: normal !important; word-break: break-word !important; overflow-wrap: break-word !important; }
}

/* Mobile: 2 columns, reduced type */
@media (max-width:599px) {
  .site-nav { padding: 90px 24px 40px !important; justify-content: flex-start !important; }
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .menu-section-heading { font-size: 13px; line-height: 32px; letter-spacing: 1px; white-space: normal !important; word-break: break-word !important; }
  .menu-section-links a { font-size: 11px !important; letter-spacing: 0.5px !important; font-weight: 600 !important; white-space: normal !important; word-break: break-word !important; overflow-wrap: break-word !important; }
}

/* Small mobile: single column */
@media (max-width:399px) {
  .menu-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* Override old .site-nav a center/padding/border rules for menu items
   Higher specificity (0-2-1) beats the old (0-1-1) at max-width:1023px */
.site-nav .menu-section-links a {
  font-family: var(--font) !important;
  text-align: left !important;
  padding: 0 !important;
  border-bottom: none !important;
  width: auto !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  color: rgba(255,255,255,0.85) !important;
  line-height: 21px !important;
}
.site-nav .menu-section-links a:hover { color: #ffffff !important; }

/* Small mobile: shrink logo to prevent overlap with lang selector */
@media (max-width:479px) {
  .site-logo { width: 110px !important; height: auto !important; }
}

/* ── NSF Footer responsive ── */
@media (max-width:1099px) {
  .nsf-wrap { padding: 0 40px; }
  .nsf-black-inner { padding: 24px 40px; }
  .nsf-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
}

@media (max-width:599px) {
  .nsf-dark { padding: 48px 0 32px; }
  .nsf-wrap { padding: 0 24px; }
  .nsf-black-inner { padding: 24px; flex-direction: column; gap: 16px; }
  .nsf-grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .nsf-social { flex-wrap: wrap; justify-content: center; }
  .nsf-copyright { flex-wrap: wrap; justify-content: center; gap: 8px; }
  .nsf-copyright-links { flex-wrap: wrap; gap: 10px; justify-content: center; }
  .nsf-copyright-year { text-align: center; }
}