/* ==========================================
   BRAND — Easy TopUp teal/cyan (from logo)
   ========================================== */
:root {
  --t1: #2DD4A8;
  --t2: #1AAFE0;
  --grad: linear-gradient(135deg, #2DD4A8 0%, #1AAFE0 100%);
  --grad90: linear-gradient(90deg, #2DD4A8, #1AAFE0);
  --black: #07090A;
  --dark: #0D1012;
  --dark2: #111518;
  --dark3: #181C1F;
  --white: #FFFFFF;
  --offwhite: #F5F6F7;
  --ink: #141718;
  --muted: #6C7880;
  --border: #E4E8EB;
  --bd: rgba(45,212,168,.12);
  --yellow: #EBFF00;
  /* Fluid type — consistent across viewports */
  --text-body: clamp(0.9375rem, 0.88rem + 0.35vw, 1.0625rem);
  --text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem);
  --text-lead: clamp(1rem, 0.92rem + 0.45vw, 1.125rem);
}

/* ── ITS: scroll progress bar */
#scroll-bar {
  position: fixed; top: 0; left: 0; height: 2px;
  background: var(--grad); z-index: 99999;
  transform-origin: left; transform: scaleX(0);
  will-change: transform;
}

/* ══════════════════════════════════
   ITS-EXACT SERVICES / PRODUCTS LAYOUT
   Matches ITS servicesSection exactly:
   - 4-column Bootstrap-style row
   - servieslist (name+items) | animated-button | imgBox (50%)
   - imgBox.img-move: clip-path scrub from bottom on scroll
   ══════════════════════════════════ */
.its-svc {
  background: var(--offwhite);
  padding: 0 clamp(20px, 5vw, 80px);
}
.its-svc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(16px, 3vw, 40px);
  padding: clamp(40px, 6vw, 80px) 0 clamp(24px, 4vw, 48px);
}
.its-svc-head .s-h2 {
  font-size: clamp(1.85rem, 1.15rem + 2.8vw, 4.25rem);
  line-height: 1.06;
}
.its-svc-head .s-sub {
  max-width: 420px;
  align-self: flex-end;
}
/* Each row — matches ITS Bootstrap row layout */
.its-row {
  display: grid;
  /* ITS col-xl-3 (25%) | col-xl-3 (25%) | col-xl-6 (50%) */
  grid-template-columns: 1fr 1fr 2fr;
  gap: clamp(16px, 3vw, 40px);
  padding: clamp(30px, 5vw, 60px) 0;
  align-items: stretch;
}
.its-row.border-top { border-top: 1px solid var(--border); }

/* Keep copy + CTA aligned to bottom; image column sets row height */
.its-servlist,
.its-btn-col {
  align-self: end;
}

/* servieslist: service title + items list — ITS d-grid align-items-end */
.its-servlist {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0;
}
.its-servlist h2 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.2rem, 1.05rem + 1.1vw, 2rem);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.5px;
  line-height: 1.15;
  margin: 0 0 16px;
}
.its-items {
  list-style: none;
  padding: 0; margin: 0;
}
.its-items li {
  border-bottom: 1px solid var(--border);
}
.its-items li a{
  display:block;
  padding:10px 0;
  font-size:var(--text-sm);
  line-height:1.45;
  transition:color .2s,padding-left .2s;
}
.its-items li a:hover {
  color: var(--t1);
  padding-left: 8px;
}

/* Button column — ITS col-xl-3 d-flex align-items-end */
.its-btn-col {
  display: flex;
  align-items: flex-end;
  padding-bottom: 2px;
}

/* Image box — same visual height for every solutions row */
.its-imgbox {
  display: flex;
  align-items: stretch;
  min-width: 0;
}

/* THE CORE ITS ANIMATION: imgBox img-move
   Image container starts FULLY CLIPPED from top (100% inset)
   GSAP ScrollTrigger scrubs clip-path to 0% as you scroll
   Creating a smooth wipe-up-from-bottom reveal */
.imgBox {
  width: 100%;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}
/* Fixed frame so Web / Mobile / Social / IT visuals share identical dimensions */
.its-svc .its-imgbox .imgBox.img-move {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: clamp(188px, 32vw, 300px);
}
.its-svc .its-imgbox .imgBox.img-move .its-imginner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
  border-radius: 12px;
}
.imgBox.img-move {
  /* Start clipped — image fully hidden, clipped from the top */
  clip-path: inset(100% 0 0 0);
  will-change: clip-path;
  /* No CSS transition — GSAP ScrollTrigger scrub handles this */
}
.its-imginner {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-end;
}
/* Info box overlay at bottom — same as ITS infoBoxmain */
.its-infobox {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 20px 24px;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.its-infobox-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.1rem, 2vw, 1.8rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
  line-height: 1;
}
.its-infobox-ico {
  flex-shrink: 0;
  margin-left: 16px;
}
/* Hero emoji and subtitle in center of image */
.its-img-hero {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -65%);
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: 1;
  filter: drop-shadow(0 0 20px rgba(45,212,168,0.4));
}
.svc-icon3d{
  width:clamp(96px,10vw,150px);
  height:clamp(96px,10vw,150px);
  border-radius:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:clamp(2rem,4vw,3.3rem);
  transform:rotateX(14deg) rotateY(-14deg);
  box-shadow:0 22px 35px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.22);
}
.svc-web{background:linear-gradient(145deg,#2f7cf6,#00b5ff);}
.svc-mobile{background:linear-gradient(145deg,#10b981,#14b8a6);}
.svc-social{background:linear-gradient(145deg,#7c3aed,#ec4899);}
.svc-it{background:linear-gradient(145deg,#f59e0b,#ea580c);}
.its-img-hero-img {
  width: clamp(84px, 11vw, 170px);
  height: clamp(84px, 11vw, 170px);
  object-fit: contain;
  filter: drop-shadow(0 24px 26px rgba(0, 0, 0, 0.25));
  animation: heroFloat 3.8s ease-in-out infinite;
}
.its-real-img{
  width:clamp(140px,20vw,240px);
  height:clamp(110px,14vw,180px);
  border-radius:14px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 20px 40px rgba(0,0,0,.25);
}
.its-img-sub {
  display:none;
}

/* Full-bleed solution visuals — image fills the clipped box */
.its-imginner--cover {
  align-items: stretch;
  justify-content: stretch;
}
.its-imginner--cover .its-img-hero.its-hero-full {
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  transform: none;
  width: 100%;
  height: 100%;
  margin: 0;
}
.its-imginner--cover .its-hero-full img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  animation: none;
  border: none;
  box-shadow: none;
  filter: none;
}
.its-imginner--social {
  background: linear-gradient(145deg, #140820 0%, #2a0d42 45%, #180a28 100%);
  align-items: center;
  justify-content: center;
}
.soc-3d-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 900px;
  transform: perspective(900px) rotateX(7deg);
  overflow: hidden;
}
.soc-3d-orbit {
  position: relative;
  width: min(78%, 320px);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  animation: socRing 26s linear infinite;
}
@keyframes socRing {
  to { transform: rotateY(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .soc-3d-orbit { animation: none; }
}
.soc-3d-face {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 1.28rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transform: rotateY(calc(var(--a) * 1deg)) translateZ(min(36vw, 132px));
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.CertifiedCarousel .owl-stage-outer::-webkit-scrollbar {
  display: none;
}

/* Mobile responsive */
@media (max-width: 900px) {
  .its-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "list btn" "img img";
  }
  .its-servlist { grid-area: list; }
  .its-btn-col { grid-area: btn; }
  .its-imgbox { grid-area: img; }
}
@media (max-width: 576px) {
  .its-row {
    grid-template-columns: 1fr;
    grid-template-areas: "list" "btn" "img";
  }
}
.seq-pin-wrap { position: relative; }
.seq-sticky {
  position: sticky; top: 0;
  height: 100vh; overflow: hidden;
  background: var(--black);
  display: flex; align-items: center; justify-content: center;
}
.seq-img {
  position: absolute; inset: 0;
  opacity: 0; transform: scale(1.08);
  will-change: opacity, transform;
  display: flex; align-items: center; justify-content: center;
}
.seq-img-bg {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 20px;
  position: relative;
}
.seq-img-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
}
.seq-emoji {
  font-size: clamp(5rem, 12vw, 10rem);
  line-height: 1;
  filter: drop-shadow(0 0 40px rgba(45,212,168,0.3));
  opacity: 0; transform: translateY(30px);
  will-change: opacity, transform;
}
.seq-label {
  font-family: 'Syne', sans-serif;
  font-size: clamp(2.5rem, 7vw, 8rem);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -3px;
  line-height: 1;
  opacity: 0; transform: translateY(30px);
  will-change: opacity, transform;
}
.seq-sub {
  font-size: clamp(0.9rem, 2vw, 1.2rem);
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.02em;
  opacity: 0; transform: translateY(20px);
  will-change: opacity, transform;
}
.seq-dots {
  position: absolute; bottom: 40px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 10px;
}
.sq-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transition: background 0.3s, transform 0.3s;
}
.sq-dot.active {
  background: var(--t1);
  transform: scale(1.4);
}

/* ══════════════════════════════════
   BLACK OVERLAY REVEAL SECTION
   ══════════════════════════════════ */
.blk-reveal-wrap {
  background: var(--white);
  position: relative; overflow: hidden;
}
.blk-overlay-enter {
  clip-path: inset(100% 0 0 0);
  background: var(--dark);
  border-top: 1px solid rgba(45,212,168,0.1);
}
.blk-inner {
  padding: clamp(60px, 12vw, 140px) clamp(24px, 8vw, 120px);
}
.blk-headline {
  font-family: 'Syne', sans-serif;
  font-size: clamp(2.2rem, 6vw, 7rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  letter-spacing: -3px;
  opacity: 0; transform: translateY(60px);
  will-change: opacity, transform;
}
.blk-headline em {
  font-style: normal;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.blk-sub {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: rgba(255,255,255,0.5);
  max-width: 540px;
  margin-top: 28px; line-height: 1.75;
  opacity: 0; transform: translateY(30px);
  will-change: opacity, transform;
}
.blk-stats {
  display: flex; flex-wrap: wrap;
  gap: 40px; margin-top: 56px;
  opacity: 0; transform: translateY(30px);
  will-change: opacity, transform;
}
.blk-stat-n {
  font-family: 'Syne', sans-serif;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 800;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.blk-stat-l {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 4px;
}

/* ── ITS: cert card 3D container */
.cert-grid { perspective: 800px; }
.cert-card { will-change: transform; transition: box-shadow 0.3s; }
.cert-card:hover { box-shadow: 0 20px 60px rgba(45,212,168,0.15); }
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:auto;overflow-x:hidden;}
body{font-family:'DM Sans',sans-serif;font-size:var(--text-body);line-height:1.65;background:var(--white);color:var(--ink);overflow-x:hidden;cursor:none;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
img{display:block;max-width:100%;height:auto;}
::-webkit-scrollbar{width:3px;}
::-webkit-scrollbar-track{background:var(--black);}
::-webkit-scrollbar-thumb{background:var(--grad);}

/* ==========================================
   CURSOR
   ========================================== */
#cDot{
  position:fixed;width:10px;height:10px;
  background:var(--t1);border-radius:50%;
  top:0;left:0;pointer-events:none;z-index:99999;
  transform:translate(-50%,-50%);transition:transform .1s;
}
#cRing{
  position:fixed;width:38px;height:38px;
  border:1.5px solid rgba(45,212,168,.6);border-radius:50%;
  top:0;left:0;pointer-events:none;z-index:99998;
  transform:translate(-50%,-50%);
  transition:width .25s,height .25s,opacity .25s;
}
body.hov #cRing{width:58px;height:58px;opacity:.4;}

/* ==========================================
   PRELOADER
   ========================================== */
#loader{
  position:fixed;inset:0;background:#010101;

  z-index:999999;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:30px;
}
#loader.gone{opacity:0;pointer-events:none;transition:opacity .7s ease;}

/* New loader: logo image + brand text */
.ldr-logo-wrap {
  display:flex;flex-direction:column;align-items:center;gap:16px;
  animation: ldrFadeUp 0.8s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes ldrFadeUp { from{opacity:0;transform:translateY(24px);} to{opacity:1;transform:translateY(0);} }

/* Animated spinning/bouncing logo image */
.ldr-logo-img {
  width: clamp(90px, 18vw, 130px);
  height: auto;
  animation: ldrLogoBounce 1.8s cubic-bezier(.34,1.56,.64,1) forwards, ldrLogoSpin 0.9s ease-out forwards;
  opacity:0;
  mix-blend-mode: screen; /* removes black background on dark bg */
}
@keyframes ldrLogoBounce {
  0%   { opacity:0; transform: scale(0.3) translateY(40px); }
  60%  { opacity:1; transform: scale(1.08) translateY(-8px); }
  80%  { transform: scale(0.96) translateY(2px); }
  100% { opacity:1; transform: scale(1) translateY(0); }
}

/* Brand name: EASY + TOPUP */
.ldr-brand {
  display:flex;align-items:baseline;gap:0;
  font-family:'Syne',sans-serif;
  font-size:clamp(1.8rem,5vw,3rem);
  font-weight:800;letter-spacing:-1.5px;
  animation: ldrBrandIn 0.7s cubic-bezier(.16,1,.3,1) 0.5s forwards;
  opacity:0;
}
@keyframes ldrBrandIn { from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:translateY(0);} }
.ldr-easy {
  background: linear-gradient(135deg, #2DD4A8 0%, #1AAFE0 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.ldr-topup { color:var(--white); -webkit-text-fill-color:var(--white); }

/* Tagline */
.ldr-tagline {
  font-size:clamp(0.55rem,1.4vw,0.72rem);
  letter-spacing:3px;text-transform:uppercase;
  color:rgba(255,255,255,0.3);
  animation: ldrBrandIn 0.7s cubic-bezier(.16,1,.3,1) 0.75s forwards;
  opacity:0;
}

/* Legacy .ldr-logo still used in some places */
.ldr-logo{font-family:'Syne',sans-serif;font-size:clamp(2rem,5vw,3.4rem);font-weight:800;letter-spacing:-2px;color:var(--white);}
.ldr-logo em{background:linear-gradient(135deg,#2DD4A8,#1AAFE0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-style:normal;}

.ldr-bar{width:220px;height:1.5px;background:rgba(255,255,255,.07);overflow:hidden;}
.ldr-fill{height:100%;width:0;background:linear-gradient(90deg,#2DD4A8,#1AAFE0);animation:lFill 2.5s cubic-bezier(.4,0,.2,1) forwards;}
@keyframes lFill{to{width:100%;}}

/* ==========================================
   NAVBAR
   ========================================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:20px 60px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid transparent;
  transition:all .4s;
}
.nav.scrolled{
  background:rgba(7,9,10,.96);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  padding:12px 60px;border-color:var(--bd);
}
.nav-logo{
  font-family:'Syne',sans-serif;font-size:1.3rem;font-weight:800;
  letter-spacing:-.5px;color:var(--white);
  display:inline-flex;align-items:baseline;gap:0;
}
/* EASY = gradient */
.nav-logo .nl-easy {
  background: linear-gradient(135deg, #2DD4A8 0%, #1AAFE0 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
/* TOPUP = white */
.nav-logo .nl-topup { color:var(--white); -webkit-text-fill-color:var(--white); }
/* legacy em support */
.nav-logo em{background:linear-gradient(135deg,#2DD4A8,#1AAFE0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-style:normal;}
/* Small logo icon in nav */
.nav-logo-img { width:28px; height:28px; object-fit:contain; margin-right:6px; flex-shrink:0; mix-blend-mode: screen; }
.nav-menu{display:flex;gap:32px;}
.nav-menu a{
  color:rgba(255,255,255,.55);font-size:.875rem;font-weight:500;
  position:relative;transition:color .2s;
}
.nav-menu a::after{
  content:'';position:absolute;bottom:-4px;left:0;right:0;
  height:1px;background:var(--t1);
  transform:scaleX(0);transform-origin:left;transition:transform .3s;
}
.nav-menu a:hover{color:var(--white);}
.nav-menu a:hover::after{transform:scaleX(1);}
.nav-cta{
  padding:1px 5px;background:var(--grad);color:var(--white);
  font-weight:700;font-size:.82rem;border-radius:2px;
  transition:opacity .2s,transform .2s;white-space:nowrap;
}
.nav-cta:hover{opacity:.88;transform:translateY(-1px);}
.nav-ham{display:none;background:none;border:none;cursor:none;flex-direction:column;gap:5px;}
.nav-ham span{display:block;width:26px;height:1.5px;background:var(--white);transition:transform .35s,opacity .35s;}

/* ==========================================
   FULLSCREEN MENU
   ========================================== */
.fsmenu{
  position:fixed;inset:0;background:var(--black);z-index:990;
  display:flex;align-items:center;justify-content:center;
  transform:translateY(-100%);transition:transform .65s cubic-bezier(.77,0,.175,1);
}
.fsmenu.open{transform:translateY(0);}
.fs-links{display:flex;flex-direction:column;gap:4px;text-align:center;}
.fs-links a{
  font-family:'Syne',sans-serif;font-size:clamp(3rem,8vw,5.5rem);
  font-weight:800;letter-spacing:-3px;color:var(--white);transition:color .2s;
}
.fs-links a:hover{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.fs-footer{
  position:absolute;bottom:36px;left:60px;right:60px;
  display:flex;justify-content:space-between;align-items:center;
}
.fs-contacts a{color:rgba(255,255,255,.35);font-size:.85rem;margin-right:22px;transition:color .2s;}
.fs-contacts a:hover{color:var(--t1);}

/* ==========================================
   HERO
   ========================================== */
.hero{
  min-height:100vh;background:var(--black);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 60px 68px;position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;top:-10%;right:-10%;
  width:65%;height:70%;
  background:radial-gradient(ellipse,rgba(45,212,168,.07) 0%,transparent 65%);
  pointer-events:none;
}
.hero::after{
  content:'';position:absolute;bottom:-15%;left:-5%;
  width:50%;height:55%;
  background:radial-gradient(ellipse,rgba(26,175,224,.04) 0%,transparent 65%);
  pointer-events:none;
}
.h-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px;}
.h-welcome{font-size:.7rem;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.3);}
.h-right{text-align:right;}
.h-right p{font-family:'Syne',sans-serif;letter-spacing:-.3px;font-size:clamp(.9rem,1.4vw,1.15rem);font-weight:700;}
.h-right p:first-child{color:var(--white);}
.h-right p:last-child{color:rgba(255,255,255,.35);}

/* Hero giant title — Splitting.js char-by-char */
.h-giant{
  font-family:'Syne',sans-serif;
  font-size:clamp(66px,17vw,220px);
  font-weight:800 !important;letter-spacing:-15px;line-height:0.92;
  color:var(--white);overflow:visible;
  display:block;
}
/* EASY = diagonal gradient top-left → bottom-right */
.hero-easy {
  display:inline;
}
/* Apply gradient to every Splitting.js .char inside hero-easy */
.hero-easy .char {
  background: linear-gradient(135deg, #2DD4A8 0%, #1AAFE0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  will-change: transform, opacity;
}
/* TOPUP = white */
.hero-topup {
  display:inline;
  color: var(--white);
}
.hero-topup .char {
  display: inline-block;
  color: var(--white);
  -webkit-text-fill-color: var(--white);
  will-change: transform, opacity;
}

.h-bottom{display:flex;align-items:flex-end;justify-content:space-between;margin-top:28px;gap:24px;}
.h-desc{max-width:380px;font-size:var(--text-body);color:rgba(255,255,255,.5);line-height:1.7;}
.h-desc strong{color:var(--t1);font-weight:400;}
.h-flags{display:flex;gap:7px;margin-top:13px;flex-wrap:wrap;}
.h-flag{padding:5px 12px;border:1px solid rgba(45,212,168,.2);border-radius:20px;font-size:.7rem;color:rgba(255,255,255,.4);}
.h-counters{display:flex;flex-direction:column;gap:6px;}
.hc-num{
  font-family:'Syne',sans-serif;font-size:2.7rem;font-weight:800;line-height:1;
  background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hc-lbl{font-size:.68rem;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.3);margin-top:2px;}
.h-cta a{display:flex;align-items:center;gap:12px;color:var(--white);font-size:.9rem;font-weight:500;}
.h-arr{width:50px;height:50px;border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;transition:background .25s,border-color .25s;}
.h-cta a:hover .h-arr{background:var(--t1);border-color:var(--t1);}

/* ==========================================
   MARQUEE
   ========================================== */
.mq{overflow:hidden;}
.mq-track{display:flex;white-space:nowrap;will-change:transform;}
.mq-track.ml{animation:mqL 22s linear infinite;}
.mq-track.mr{animation:mqR 22s linear infinite;}
@keyframes mqL{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes mqR{from{transform:translateX(-50%);}to{transform:translateX(0);}}
.mq-half{display:inline-flex;flex-shrink:0;}
.mq-word{
  display:inline-flex;align-items:center;gap:0;
  padding:13px 0;font-size:.82rem;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;white-space:nowrap;
}
.mq-word span{padding:0 22px;}
.mq-sep{color:rgba(255,255,255,.2);padding:0 4px;}
.mq-d1{background:linear-gradient(135deg, #2DD4A8 0%, #1AAFE0 100%);}
.mq-d1 .mq-word{color:rgba(255,255,255,.55);}
.mq-d1 .mq-sep{color:var(--t1);}
.mq-g{background:var(--grad);}
.mq-g .mq-word{color:var(--white);}
.mq-g .mq-sep{color:rgba(255,255,255,.35);}
.mq-d2{background: linear-gradient(135deg, #2DD4A8 0%, #1AAFE0 100%);}
.mq-d2 .mq-word{color:white;}
.mq-d2 .mq-accent{color:var(--t1);}

/* ==========================================
   SECTION HEAD ROW
   ========================================== */
.s-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:70px 60px 44px;border-bottom:1px solid var(--border);
}
.s-head.dk{border-color:var(--bd);}
.s-icon{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.7rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  margin-bottom:13px;
}
.s-icon::before{content:'✦';background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:.9rem;}
.s-icon.d{color:rgba(255,255,255,.35);}
.s-icon.l{color:var(--muted);}
.s-h2{
  font-family:'Syne',sans-serif;
  font-size:clamp(1.75rem,1rem + 3.4vw,5rem);font-weight:800;
  letter-spacing:-2px;line-height:1.08;
}
.s-h2.d{color:var(--white);}
.s-h2.l{color:var(--ink);}
.gr{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.s-sub{max-width:380px;font-size:var(--text-lead);line-height:1.75;}
.s-sub.d{color:rgba(255,255,255,.45);}
.s-sub.l{color:var(--muted);}
.learn-more{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 26px;background:var(--grad);color:var(--white);
  font-weight:700;font-size:.83rem;border-radius:2px;
  transition:opacity .2s,transform .2s;margin-top:20px;
}
.learn-more:hover{opacity:.88;transform:translateY(-2px);}

/* ==========================================
   SOLUTIONS
   ========================================== */
.solutions-bg{background:var(--offwhite);}
.srow{
  display:grid;grid-template-columns:180px 1fr 300px 58px;
  align-items:center;padding:34px 60px;
  border-bottom:1px solid var(--border);
  cursor:none;position:relative;overflow:hidden;
  transition:background .25s;
}
.srow::after{
  content:'';position:absolute;bottom:0;left:0;width:0;height:1.5px;
  background:var(--grad90);transition:width .5s cubic-bezier(.4,0,.2,1);
}
.srow:hover{background:rgba(45,212,168,.03);}
.srow:hover::after{width:100%;}
.srow-num{
  font-family:'Syne',sans-serif;font-size:.72rem;font-weight:800;
  letter-spacing:3px;text-transform:uppercase;
  background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.srow-title{
  font-family:'Syne',sans-serif;
  font-size:clamp(22px,3vw,46px);font-weight:800;
  letter-spacing:-2px;line-height:1;color:var(--ink);
}
.srow-chips{display:flex;flex-wrap:wrap;gap:7px;}
.srow-chip{padding:5px 13px;background:var(--white);border:1px solid var(--border);border-radius:2px;font-size:.73rem;color:var(--muted);}
.srow-arr{
  width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);
  display:flex;align-items:center;justify-content:center;margin-left:auto;
  transition:backgroud.25s,border-color .25s,transform .4s;
}
.srow:hover .srow-arr{background:var(--t1);border-color:var(--t1);transform:rotate(45deg);}
.srow:hover .srow-arr svg path{stroke:var(--white);}

/* ==========================================
   PRODUCTS
   ========================================== */
.products-bg{background:var(--white);}
.pcards{padding:0 60px 80px;}
.pcard{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:60px;align-items:center;
  padding:58px 60px;border:1px solid var(--border);border-radius:4px;
  margin-bottom:20px;background:var(--white);
  position:relative;overflow:hidden;
  transition:box-shadow .4s,transform .4s;
}
.pcard::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--grad90);transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.pcard:hover::before{transform:scaleX(1);}
.pcard:hover{box-shadow:0 28px 70px rgba(45,212,168,.1);transform:translateY(-4px);}
.pcard-num{
  position:absolute;right:56px;top:22px;
  font-family:'Syne',sans-serif;font-size:7.5rem;font-weight:800;
  color:rgba(45,212,168,.06);line-height:1;pointer-events:none;
}
.pcard-we{font-size:.7rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px;}
.pcard-h{font-family:'Syne',sans-serif;font-size:clamp(28px,3vw,44px);font-weight:800;letter-spacing:-1.5px;line-height:1;color:var(--ink);margin-bottom:13px;}
.pcard-p{font-size:.93rem;color:var(--muted);line-height:1.75;margin-bottom:18px;}
.pcard-list{list-style:none;display:flex;flex-direction:column;gap:10px;}
.pcard-list li{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--muted);}
.pcard-list li::before{
  content:'';flex-shrink:0;width:18px;height:18px;border-radius:50%;
  background:var(--grad);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8'%3E%3Cpath d='M1 4l2.5 2.5L9 1' stroke='%23fff' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;
}
.pcard-img{
  background:var(--offwhite);border-radius:8px;
  padding:36px 28px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.pcard-emoji{font-size:4rem;line-height:1;}
.pcard-img-h{font-family:'Syne',sans-serif;font-size:1.05rem;font-weight:800;color:var(--ink);}
.pcard-img-p{font-size:.8rem;color:var(--muted);line-height:1.5;}
.pcard-pills{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:6px;}
.pcard-pill{padding:3px 9px;border:1px solid var(--border);border-radius:20px;font-size:.68rem;color:var(--muted);}

/* ==========================================
   APP SECTION
   ========================================== */
.app-sec{background:var(--dark);padding:100px 60px;position:relative;overflow:hidden;}
.app-sec::before{content:'';position:absolute;top:-250px;right:-200px;width:700px;height:700px;background:radial-gradient(circle,rgba(45,212,168,.06) 0%,transparent 65%);pointer-events:none;}
.app-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.app-sec{padding:clamp(40px,5vw,70px) clamp(20px,5vw,56px);}
.app-grid{margin-top:16px !important;gap:30px;align-items:start;}
.app-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid rgba(45,212,168,.25);border-radius:20px;font-size:.7rem;color:var(--t1);letter-spacing:2px;text-transform:uppercase;margin-bottom:18px;}
.app-h{font-family:'Syne',sans-serif;font-size:clamp(34px,4.5vw,64px);font-weight:800;letter-spacing:-2px;color:var(--white);line-height:1;margin-bottom:20px;}
.app-p{font-size:.97rem;color:rgba(255,255,255,.45);line-height:1.8;margin-bottom:30px;}
.stbns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:34px;}
.stbn{display:flex;align-items:center;gap:12px;padding:12px 20px;border:1px solid rgba(255,255,255,.13);border-radius:8px;color:var(--white);transition:border-color .2s,background .2s;}
.stbn:hover{border-color:var(--t1);background:rgba(45,212,168,.07);}
.stbn-s{font-size:.6rem;color:rgba(255,255,255,.38);text-transform:uppercase;letter-spacing:1px;}
.stbn-l{font-family:'Syne',sans-serif;font-size:.96rem;font-weight:800;}
.app-feats{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;max-width:100%;align-items:stretch;}
.af{padding:16px 14px;border:1px solid rgba(45,212,168,.1);border-radius:4px;transition:border-color .2s,background .2s;}
.af:hover{border-color:var(--t1);background:rgba(45,212,168,.05);}
.af-ico{font-size:1.4rem;margin-bottom:7px;}
.af-ico-img{
  width:42px;
  height:42px;
  object-fit:contain;
  filter:drop-shadow(0 8px 15px rgba(0,0,0,.18));
}
.af-h{font-family:'Syne',sans-serif;font-size:.88rem;font-weight:800;color:var(--white);margin-bottom:3px;}
.af-p{font-size:.75rem;color:rgba(255,255,255,.35);line-height:1.4;}
.phone-wrap{display:flex;align-items:center;justify-content:center;}
.phone{width:218px;height:450px;background:var(--dark2);border-radius:32px;border:1.5px solid rgba(45,212,168,.2);box-shadow:0 40px 70px rgba(0,0,0,.55);position:relative;overflow:hidden;}
.phone-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:80px;height:24px;background:var(--black);border-radius:0 0 14px 14px;z-index:2;}
.phone-scr{position:absolute;inset:36px 14px 22px;background:var(--grad);border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px 16px;}
.ps-ico{font-size:3.2rem;}
.app-ico-img{
  width:60px;
  height:60px;
  object-fit:contain;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.2));
}
.ps-logo{font-family:'Syne',sans-serif;font-size:1rem;font-weight:800;color:var(--white);}
.ps-sub{font-size:.63rem;color:rgba(255,255,255,.75);text-align:center;line-height:1.5;}
.ps-pills{display:flex;flex-direction:column;gap:5px;width:100%;margin-top:6px;}
.ps-pill{padding:7px 10px;background:rgba(255,255,255,.22);border-radius:14px;font-size:.66rem;color:var(--white);font-weight:700;text-align:center;}

/* ==========================================
   CERTIFIED — exact ITS.com.pk CSS (from style.min.css v2.0.81)
   ========================================== */

.iso-certification {
  position: relative;
  background: var(--white);
  padding: 50px 0 0;
}
.pintext {
  /* GSAP pins this via ScrollTrigger (same as ITS) */
  text-align: center;
  padding: 0 clamp(20px,5vw,80px) clamp(28px,5vw,56px);
}
.iso-heading {
  font-family: 'Syne', sans-serif;
  font-size: clamp(2rem, 5vw + 0.5rem, 8rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.05;
  margin-bottom: 16px;
}
p.h4.iso-text {
  font-size: clamp(0.9375rem, 0.85rem + 0.55vw, 1.25rem);
  width: min(100%, 42rem);
  margin: 0 auto;
  color: var(--muted);
  line-height: 1.65;
}
.pinLogos {
  /* ITS starts at scale(0.5), GSAP animates to target scale */
  transform: scale(0.5);
  padding: 40px clamp(20px,5vw,80px) 80px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pinLogos::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
@media (max-width: 1199px) {
  .pinLogos { transform: scale(1,1); }
}
@media (max-width: 650px) {
  .pinLogos { transform: scale(1); }
  .iso-heading { font-size: clamp(1.65rem, 5.5vw + 0.6rem, 2.25rem); }
  p.h4.iso-text { font-size: var(--text-body); }
}

/* ITS CertifiedCarousel */
.CertifiedCarousel .owl-stage-outer { overflow: visible !important; }
.CertifiedCarousel .owl-item { padding: 0 10px; }
.CertifiedCarousel .owl-nav { display: none; }
.CertifiedCarousel .owl-dots { display: none; }
.pinLogos{overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* ITS exact flip-box (from style.min.css) */
.box-item { padding: 50px 10px; }
.flip-box {
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  perspective: 1000px;
  -webkit-perspective: 1000px;
}
.flip-box-front,
.flip-box-back {
  background-size: cover;
  background-position: center;
  min-height: 85%;
  width: 100%;
  transition: transform 0.7s cubic-bezier(.4,.2,.2,1);
  -webkit-transition: transform 0.7s cubic-bezier(.4,.2,.2,1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 20px;
}
.flip-box-front {
  transform: rotateY(0deg);
  transform-style: preserve-3d;
  box-shadow: 0 0px 20px #00000021;
}
.flip-box:hover .flip-box-front {
  transform: rotateY(-180deg);
  transform-style: preserve-3d;
}
.flip-box-back {
  position: absolute;
  top: 50px;
  left: 0;
  transform: rotateY(180deg);
  transform-style: preserve-3d;
  background: var(--ink) !important;
}
.flip-box:hover .flip-box-back {
  transform: rotateY(0deg);
  transform-style: preserve-3d;
}
.flip-box .inner {
  position: absolute;
  left: 0;
  width: 100%;
  padding: 20px;
  outline: 1px solid transparent;
  -webkit-perspective: inherit;
  perspective: inherit;
  z-index: 2;
  transform: translateY(-50%) translateZ(60px) scale(.94);
  top: 50%;
}
.flip-box-header {
  font-family: 'Syne', sans-serif;
  font-size: clamp(18px, 2vw, 34px);
  font-weight: 800;
}
.flip-box p {
  font-size: clamp(14px, 1.2vw, 20px);
  line-height: 1.5em;
}
.graybg { background: #f5f6f7; }
.color-white .flip-box-header,
.color-white p { color: var(--white); }
.flip-box-front img { border-radius: 20px; width: 100%; object-fit: contain; }
.flip-box{height:320px;}

/* ==========================================
   CARD STACKING — ITS Products Section
   Each .stackCard is pinned by GSAP ScrollTrigger
   and scaled/pushed back as the next card scrolls up
   ========================================== */
.cardStacking { position: relative; }
.cardStacking__cards { display: flex; flex-direction: column; }

/* Each card takes full viewport height — position:sticky for native stacking */
.stackCard {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 600px;
  width: 100%;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  transform-origin: center top;
  will-change: transform;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card.stackCard .card-header,
.card.stackCard .card-footer {
  border: none !important;
  background: transparent !important;
}

/* ITS .innersectionWhatsapp / sc-inner-row */
.sc-inner-row {
  width: 100%;
  height: 100%;
  align-items: center;
  padding: 0;
  border-radius: 32px;
  border: 1px solid rgba(20,23,24,.08);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
/* ITS .custom-card color variants */
.card1 { background: #fdfffe; }
.card2 { background: #fffcf8; }
.card3 { background: #f8fbff; }
.card4 { background: #f9fff9; }
.card.stackCard {
  border: none !important;
  box-shadow: none !important;
}


/* Col 1: title + description (ITS .whatsappbtn + .para) */
.sc-col1 { padding: clamp(32px,5vw,70px) clamp(16px,3vw,40px); height: 100%; }
.sc-titlewrap { flex-shrink: 0; }
.sc-offer {
  font-family: 'Syne', sans-serif;
  font-size: 0.85rem; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.sc-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(2rem, 5.5vw, 5rem);
  font-weight: 800; line-height: 1;
  letter-spacing: -2px; color: var(--ink);
  margin: 0;
}
.sc-para { flex-shrink: 0; }
.sc-para p {
  font-size:20px; color: black;
  line-height: 1.78; margin: 0;
  max-width: 340px;
}

/* Col 2: Phone + toolboxes (ITS .WhatsAppPro) */
.sc-phonecol {
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 0;
  position: relative;
}
.sc-phoneimg {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 100%;
  width: 100%;
}

/* ITS .toolbox */
.toolbox {
  position: absolute;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 30px;
  padding: 8px 16px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  white-space: nowrap;
  z-index: 5;
}
.tolbox1 { top: 18%; left: -5%; }
.tolbox2 { top: 24%; right: -5%; }
.tolbox3 { bottom: 22%; left: -5%; }
.tolbox4 { bottom: 16%; right: -5%; }

/* Phone mockup replacing actual .webp images */
.sc-phone-mockup {
  width: clamp(180px, 22vw, 280px);
  height: clamp(380px, 70vh, 600px);
  background: #07090A;
  border-radius: 36px;
  border: 5px solid #1a1f22;
  box-shadow: 0 50px 100px rgba(0,0,0,0.2), 0 20px 40px rgba(0,0,0,0.1);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.spm-notch {
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 80px; height: 22px;
  background: #0a0c0d;
  border-radius: 0 0 14px 14px;
  z-index: 2;
}
.spm-screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; padding: 40px 20px 28px;
  border-radius: 32px;
}
.spm-appshot{
  width:84px;
  height:84px;
  object-fit:contain;
  border-radius:18px;
  background:rgba(255,255,255,.14);
  padding:7px;
}
.spm-icon { font-size: clamp(2.5rem,5vw,4rem); line-height: 1; }
.spm-name {
  font-family: 'Syne', sans-serif;
  font-size: 1rem; font-weight: 800;
  color: #fff; letter-spacing: -0.3px;
}
.spm-sub {
  font-size: 0.68rem; color: rgba(255,255,255,0.45);
  text-align: center; line-height: 1.5;
}
.spm-btn {
  margin-top: 6px;
  width: 80%; padding: 9px;
  background: linear-gradient(135deg, #2DD4A8 0%, #1AAFE0 100%);
  border-radius: 20px;
  font-size: 0.72rem; font-weight: 700;
  text-align: center; color: #07090A;
}
.spm-flags { font-size: 0.9rem; letter-spacing: 2px; margin-top: 4px; }

/* Col 3: number + logo (ITS .whatsapcol3) */
.sc-col3 { height: 100%; display: flex; align-items: flex-start; }
.sc-numwrap {
  display: flex; flex-direction: column;
  align-items: flex-end; gap: 16px;
  padding: clamp(32px,5vw,70px) clamp(16px,3vw,40px) 0 0;
}
.sc-num {
  font-family: 'Syne', sans-serif;
  font-size: clamp(4rem, 12vw, 11rem);
  font-weight: 800; line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}
.sc-icon-logo {
  width: clamp(50px,7vw,90px);
  height: clamp(50px,7vw,90px);
  background: var(--grad);
  border-radius: 14px;
  opacity: 0.12;
}

/* Mobile responsive */
@media (max-width: 1199px) {
  .stackCard { height: auto; min-height: 100vh; }
  .tolbox1,.tolbox2,.tolbox3,.tolbox4 { display: none; }
}
@media (max-width: 767px) {
  .sc-col1 { padding: 24px 16px 0; }
  .sc-phonecol { display: none; }
  .sc-col3 { display: none; }
  .sc-inner-row > div:first-child { width: 100%; }
  .flip-box { height: 300px; }
}

/* ==========================================
   PHILOSOPHY
   ========================================== */
/* ==========================================
   BLACKSECTION — exact ITS.com.pk (philosophy/alliance)
   ========================================== */
section.blacksection {
  overflow: hidden;
  color: #fff;
  position: relative;
  z-index: 1;
 
}
.pinsection {
  position: relative;
}
section.blacksection svg#demo {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}
.showafter50 {
  position: relative;
  z-index: 2;
}
.showafter50 {
  position: relative;
  z-index: 2;
}
/* style.css .theMask points at invalid mask (#the) — breaks About/philosophy text; disable here */
section.blacksection .theMask {
  mask: none !important;
  -webkit-mask: none !important;
}
.theMask {
  /* content rendered on top of SVG */
}
/* Marquee inside blacksection */
section.blacksection .marquee {
  padding: 32px 0;
  overflow: hidden;
}
section.blacksection .marquee__inner {
  -webkit-font-smoothing: antialiased;
  width: fit-content;
  display: flex;
  flex-direction: row;
}
section.blacksection .marquee__part {
  flex-shrink: 0;
  padding: 0 4px;
  font-size: 22px;
  color: #dde1e0;
  white-space: nowrap;
}
section.blacksection .marquee__part span {
  margin: 0 20px;
  color: #dde1e0;
  opacity: 0.5;
}
section.blacksection .serviceList {
  color: #dde1e0;
  text-decoration: none;
  transition: color 0.3s;
  margin: 0 30px;
}
section.blacksection .serviceList:hover { color: var(--t1); }
/* Alliance text block */
.alliance-head {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -1px;
}
.alliance-text {
  font-size: clamp(16px, 1.9vw, 22px);
  color: #3C3C3C;
  line-height: 1.65;
  margin-bottom: 40px;
}
.yellowtext-blk {
  background: #f6e01b;
  padding: 0 12px;
  border-radius: 100px;
  color: #000;
  font-weight: 600;
}
/* Stats row inside blacksection */
.phil-stats-blk {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.phil-stats-blk .blk-stat {
  display: flex;
  flex-direction: column;
}
.phil-stats-blk .blk-stat-n {
  font-family: 'Syne', sans-serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 800;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.phil-stats-blk .blk-stat-l {
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-top: 6px;
  max-width: 120px;
  line-height: 1.4;
}
.phil-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:80px;align-items:start;}
.offices{margin-top:40px;display:flex;flex-direction:column;gap:14px;}
.ocard{padding:20px 22px;border:1px solid var(--bd);border-radius:3px;transition:border-color .2s,background .2s;}
.ocard:hover{border-color:var(--t1);background:rgba(45,212,168,.04);}
.ocard-flag{font-size:1.5rem;margin-bottom:7px;}
.ocard-n{font-family:'Syne',sans-serif;font-size:.95rem;font-weight:800;color:var(--white);margin-bottom:3px;}
.ocard-d{font-size:.78rem;color:rgba(255,255,255,.35);line-height:1.5;}
.phil-copy{font-size:var(--text-lead);color:rgba(255,255,255,.55);line-height:1.75;}
.phil-copy p{margin-bottom:1rem;}
.phil-copy strong{color:var(--t1);font-weight:600;}
.phil-copy h5{
  font-family:'Syne',sans-serif;
  font-size:clamp(1.05rem,0.95rem + 0.55vw,1.35rem);
  font-weight:800;
  color:var(--white);
  margin-bottom:1rem;
  line-height:1.45;
}
.phil-copy h4{font-family:'Syne',sans-serif;font-size:clamp(1rem,0.92rem + 0.4vw,1.15rem);font-weight:800;color:var(--white);margin-bottom:16px;line-height:1.45;}
.phil-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(45,212,168,.1);border:1px solid rgba(45,212,168,.1);margin-top:46px;}
.pstat{padding:28px 30px;background:var(--dark);}
.pstat-n{font-family:'Syne',sans-serif;font-size:clamp(2rem,1.5rem + 2.5vw,3rem);font-weight:800;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;}
.pstat-l{font-size:.68rem;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.3);margin-top:6px;}

/* ==========================================
   CERTIFIED
   ========================================== */
/* .certified-bg now uses flip-box carousel above */
.cert-grid{display:none;}/* legacy — replaced by CertifiedCarousel */

/* ==========================================
   PARTNERS
   ========================================== */
.partners-bg{background:var(--offwhite);}
.client-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  padding:0 clamp(20px,5vw,80px) 70px;
}
.cs-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:30px 24px;
  text-align:center;
  min-height:150px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
.cs-num{
  font-family:'Syne',sans-serif;
  font-size:clamp(2rem,4vw,3.2rem);
  font-weight:800;
  line-height:1;
  background:var(--grad);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cs-lbl{
  margin-top:10px;
  font-size:.8rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:1px;
  min-height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.35;
}
.partners-grid{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--border);border-left:1px solid var(--border);}
.pcell{
  padding:34px 22px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  text-align:center;cursor:none;transition:background .25s, transform .25s;
}
.pcell:hover{background:var(--white);transform:translateY(-3px);}
.pcell-ico{width:50px;height:50px;background:var(--grad);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.3rem;}
.pcell-n{font-family:'Syne',sans-serif;font-size:.83rem;font-weight:800;color:var(--ink);}
.pcell-s{font-size:.7rem;color:var(--muted);}

/* ==========================================
   OUR WORK
   ========================================== */
.work-sec{background:var(--dark);padding:90px 60px;}
.work-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:48px;}
.work-item{
  border-radius:4px;overflow:hidden;
  background:var(--dark2);
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:1;position:relative;
  border:1px solid rgba(45,212,168,.07);
  transition:transform .3s,border-color .3s;
  cursor:none;
}
.work-item:hover{transform:scale(1.03);border-color:var(--t1);}
.work-item .wi-inner{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:20px;text-align:center;
}
.wi-emoji{font-size:2.2rem;line-height:1;}
.wi-name{font-family:'Syne',sans-serif;font-size:.82rem;font-weight:800;color:var(--white);}
.wi-cat{font-size:.7rem;color:rgba(255,255,255,.35);}
.work-item.big{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;}

/* ==========================================
   BIG CTA
   ========================================== */
.cta-sec{
  padding:120px 60px;text-align:center;
  background:var(--grad);position:relative;overflow:hidden;
}
.cta-ghost{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:'Syne',sans-serif;font-size:clamp(80px,18vw,240px);
  font-weight:800;letter-spacing:-8px;color:rgba(255,255,255,.1);
  white-space:nowrap;pointer-events:none;
}
.cta-eyebrow{
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:.7rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  color:rgba(255,255,255,.65);margin-bottom:14px;
}
.cta-h{
  font-family:'Syne',sans-serif;
  font-size:clamp(44px,7vw,100px);font-weight:800;
  letter-spacing:-4px;color:var(--white);line-height:.92;margin:0 0 22px;
}
.cta-sub{font-size:1rem;color:rgba(255,255,255,.7);margin-bottom:44px;}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.btn-wh{padding:15px 40px;background:var(--white);color:var(--t1);font-family:'Syne',sans-serif;font-weight:800;font-size:.88rem;border-radius:2px;display:inline-flex;align-items:center;gap:10px;transition:opacity .2s,transform .2s;}
.btn-wh:hover{opacity:.92;transform:translateY(-2px);}
.btn-ol{padding:15px 40px;border:2px solid rgba(255,255,255,.5);color:var(--white);font-family:'Syne',sans-serif;font-weight:800;font-size:.88rem;border-radius:2px;display:inline-flex;align-items:center;gap:10px;transition:all .2s;}
.btn-ol:hover{background:rgba(255,255,255,.12);border-color:var(--white);transform:translateY(-2px);}

/* ==========================================
   CONTACT
   ========================================== */
.contact-sec{background:var(--black);padding:100px 60px;}
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;}
.contact-left h3{
  font-family:'Syne',sans-serif;
  font-size:clamp(30px,4vw,56px);font-weight:800;
  letter-spacing:-2px;color:var(--white);line-height:1.05;margin-bottom:34px;
}
.cdet{display:flex;align-items:flex-start;gap:16px;padding:18px 0;border-bottom:1px solid rgba(45,212,168,.07);}
.cdet:last-of-type{border:none;}
.cdet-ico{width:40px;height:40px;flex-shrink:0;border:1px solid rgba(45,212,168,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(45,212,168,.06);}
.cdet-ico svg{stroke:var(--t1);}
.cdet-lbl{font-size:.68rem;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:3px;}
.cdet-val{font-size:.92rem;color:var(--white);}
.cdet-val a{color:var(--white);transition:color .2s;}
.cdet-val a:hover{color:var(--t1);}
.fl{display:block;font-size:.68rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:8px;}
.fi,.fta,.fsel{width:100%;padding:13px 16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:2px;color:var(--white);font-family:inherit;font-size:.9rem;outline:none;transition:border-color .2s,background .2s;-webkit-appearance:none;}
.fsel option{background:var(--dark2);}
.fi:focus,.fta:focus,.fsel:focus{border-color:var(--t1);background:rgba(45,212,168,.05);}
.fi::placeholder,.fta::placeholder{color:rgba(255,255,255,.2);}
.fta{resize:vertical;min-height:110px;}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.fg{margin-bottom:16px;}
.fsub{
  width:100%;padding:15px;background:var(--grad);color:var(--white);
  border:none;cursor:none;border-radius:2px;
  font-family:'Syne',sans-serif;font-weight:800;font-size:.92rem;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:opacity .2s,transform .2s;
}
.fsub:hover{opacity:.88;transform:translateY(-1px);}

/* ==========================================
   FOOTER
   ========================================== */
footer{background:var(--black);border-top:1px solid rgba(45,212,168,.07);padding:64px 60px 36px;}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;margin-bottom:52px;}
.f-logo{font-family:'Syne',sans-serif;font-size:1.45rem;font-weight:800;color:var(--white);display:block;margin-bottom:14px;letter-spacing:-.5px;display:flex;align-items:baseline;gap:0;}
.f-logo .fl-easy{background:linear-gradient(135deg,#2DD4A8,#1AAFE0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.f-logo .fl-topup{color:var(--white);-webkit-text-fill-color:var(--white);}
.f-logo em{background:linear-gradient(135deg,#2DD4A8,#1AAFE0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-style:normal;}
.f-desc{font-size:.87rem;color:rgba(255,255,255,.3);line-height:1.75;margin-bottom:22px;}
.f-socs{display:flex;gap:8px;}
.f-soc{width:34px;height:34px;border:1px solid rgba(255,255,255,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.35);font-size:.8rem;font-family:'Syne',sans-serif;font-weight:800;transition:all .2s;}
.f-soc:hover{border-color:var(--t1);background:var(--t1);color:var(--white);}
.f-col-h{font-family:'Syne',sans-serif;font-size:.72rem;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:var(--white);margin-bottom:18px;}
.f-links li{margin-bottom:9px;}
.f-links a{font-size:.87rem;color:rgba(255,255,255,.3);transition:color .2s;}
.f-links a:hover{color:var(--t1);}
.foot-bot{display:flex;align-items:center;justify-content:space-between;padding-top:26px;border-top:1px solid rgba(45,212,168,.06);}
.f-copy{font-size:.76rem;color:rgba(255,255,255,.2);}
.f-legal{display:flex;gap:20px;}
.f-legal a{font-size:.76rem;color:rgba(255,255,255,.2);transition:color .2s;}
.f-legal a:hover{color:var(--t1);}

/* ==========================================
   CHATBOT — Lumina (from chat script)
   ========================================== */
#chat-window{
  position:fixed;bottom:90px;right:24px;width:340px;
  background:var(--dark2);border:1px solid var(--bd);border-radius:12px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);z-index:9000;
  display:flex;flex-direction:column;overflow:hidden;
  transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .35s;
}
#chat-window.closed{transform:translateY(20px) scale(.96);opacity:0;pointer-events:none;}
#chat-window.open{transform:translateY(0) scale(1);opacity:1;}
.chat-header{
  padding:14px 16px;background:var(--grad);
  display:flex;align-items:center;justify-content:space-between;
}
.chat-header-left{display:flex;align-items:center;gap:10px;}
.chat-avatar{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:1.1rem;}
.chat-name{font-family:'Syne',sans-serif;font-size:.88rem;font-weight:800;color:var(--white);}
.chat-status{font-size:.65rem;color:rgba(255,255,255,.7);}
.closeBtn{background:none;border:none;color:var(--white);font-size:1.2rem;cursor:pointer;opacity:.7;transition:opacity .2s;display:none;}
.closeBtn.open{display:block;}
#chat-messages{
  height:280px;overflow-y:auto;padding:14px;
  display:flex;flex-direction:column;gap:10px;
  scrollbar-width:thin;scrollbar-color:rgba(45,212,168,.3) transparent;
}
.user-msg,.bot-msg{
  padding:9px 13px;border-radius:10px;font-size:.84rem;line-height:1.5;max-width:85%;
}
.user-msg{background:var(--grad);color:var(--white);align-self:flex-end;border-bottom-right-radius:3px;}
.bot-msg{background:rgba(255,255,255,.07);color:rgba(255,255,255,.85);align-self:flex-start;border-bottom-left-radius:3px;}
.sender{font-weight:700;font-size:.7rem;opacity:.6;}
.dots::after{content:'...';animation:dotAnim 1.2s infinite;}
@keyframes dotAnim{0%,100%{content:'.';}50%{content:'...';}75%{content:'....';}}
.chat-input-row{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;border-top:1px solid var(--bd);
}
#user-input{
  flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:20px;padding:8px 14px;color:var(--white);font-family:inherit;
  font-size:.84rem;outline:none;transition:border-color .2s;
}
#user-input:focus{border-color:var(--t1);}
#user-input::placeholder{color:rgba(255,255,255,.25);}
.send-btn{
  width:34px;height:34px;background:var(--grad);border:none;
  border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:opacity .2s;
}
.send-btn:hover{opacity:.85;}
.chat-toggle-btn{
  position:fixed;bottom:24px;right:24px;z-index:9001;
  width:54px;height:54px;background:var(--grad);border-radius:50%;
  border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 28px rgba(45,212,168,.35);
  transition:transform .25s,box-shadow .25s;
}
.chat-toggle-btn:hover{transform:scale(1.07);box-shadow:0 12px 36px rgba(45,212,168,.45);}
.Botopenclose{font-size:1.4rem;transition:opacity .2s;}
.Botopenclose.closed{opacity:0;position:absolute;}

/* ==========================================
   GSAP ANIMATE IN
   ========================================== */
.anim{opacity:0;transform:translateY(44px);}


/* ==========================================
   ITS — dot wave blob (near hero title)
   ========================================== */
.its-dot {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 110px;
  pointer-events: none;
  z-index: 0;
}
.its-dot-inner { position: relative; width: 100%; height: 100%; }
.its-dot-wave { position: absolute; inset: 0; width: 100%; height: 100%; }
.its-dot-wave path { fill: var(--t1); }
.its-dot-wave.bg { opacity: 0.08; }
.its-dot-wave.fg {
  opacity: 0.18;
  animation: itsDotPulse 3s ease-in-out infinite alternate;
}
@keyframes itsDotPulse {
  from { transform: scaleX(1) scaleY(1); }
  to   { transform: scaleX(1.12) scaleY(1.15); }
}

/* ==========================================
   ITS — .revalText word-by-word reveal
   ========================================== */
.its-reval-word {
  display: inline-block;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(.16,1,.3,1), opacity 0.5s;
}
.its-reval.revealed .its-reval-word {
  transform: translateY(0);
  opacity: 1;
}

/* ==========================================
   ITS — reveal-type-Heading color scrub
   ========================================== */
.its-head-reveal {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(to right, var(--white) 50%, rgba(255,255,255,0.12) 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  transition: background-position 1.1s cubic-bezier(.4,0,.2,1);
}
.its-head-reveal.light {
  background-image: linear-gradient(to right, var(--ink) 50%, rgba(0,0,0,0.1) 50%);
}
.its-head-reveal.revealed {
  background-position: 0 0;
}

/* ==========================================
   ITS — animated-button (circle fill + dual arrows)
   overrides existing .nav-cta / .learn-more on hover
   ========================================== */
.its-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0px;
  overflow: hidden;
  cursor: none;
  border-radius: 2px;
}
.its-btn .its-circle {
  position: absolute;
  inset: 0;
  background: var(--t1);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.5s cubic-bezier(.4,0,.2,1);
  transform-origin: center;
  z-index: 0;
}
.its-btn:hover .its-circle { transform: scale(4); }
.its-btn .its-btn-text,
.its-btn .its-arr1,
.its-btn .its-arr2 {
  position: relative;
  z-index: 1;
  transition: color 0.3s;
}
.its-btn .its-arr2 {
  transform: translateX(-6px);
  opacity: 0;
  transition: transform 0.3s, opacity 0.3s;
}
.its-btn:hover .its-arr2 {
  transform: translateX(0);
  opacity: 1;
}
.its-btn:hover .its-btn-text { color: var(--white); }
.its-btn:hover .its-arr1 svg path,
.its-btn:hover .its-arr2 svg path { stroke: var(--white); fill: var(--white); }

/* ==========================================
   ITS — SVG circle mask on dark section
   ========================================== */
.its-svg-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.its-svg-wrap svg { width: 100%; height: 100%; }
.its-mask-circle { transition: r 0.1s; }

/* ==========================================
   RESPONSIVE
   ========================================== */
@media(max-width:1100px){
  .nav,.nav.scrolled{padding:16px 24px;}
  .nav-menu,.nav-cta{display:none;}
  .nav-ham{display:flex;}
  .hero,.philosophy,.app-sec,.contact-sec,.cta-sec,.iso-certification,.work-sec,footer{padding-left:24px;padding-right:24px;}
  .s-head{padding:52px 24px 38px;}
  .pcards{padding:0 24px 60px;}
  .srow{grid-template-columns:70px 1fr 52px;padding:28px 24px;}
  .srow-chips{display:none;}
  .pcard{grid-template-columns:1fr;gap:24px;padding:38px 28px;}
  .pcard-num{font-size:5rem;right:28px;}
  .app-grid,.phil-grid,.contact-grid{grid-template-columns:1fr;gap:48px;}
  .phone-wrap{display:none;}
  .partners-grid{grid-template-columns:repeat(3,1fr);}
  .client-stats{grid-template-columns:repeat(2,1fr);padding:0 24px 50px;}
  .cert-grid{grid-template-columns:1fr 1fr;}
  .work-grid{grid-template-columns:repeat(3,1fr);}
  .work-item.big{grid-column:span 1;grid-row:span 1;}
  .foot-top{grid-template-columns:1fr 1fr;gap:28px;}
  .foot-bot{flex-direction:column;gap:12px;text-align:center;}
  .h-bottom{flex-direction:column;align-items:flex-start;gap:20px;}
  .h-top{flex-direction:column;gap:5px;}
  .fs-footer{left:24px;right:24px;}
  #chat-window{width:300px;}
}
@media(max-width:640px){
  .partners-grid{grid-template-columns:1fr 1fr;}
  .cert-grid{grid-template-columns:1fr;}
  .work-grid{grid-template-columns:1fr 1fr;}
  .client-stats{grid-template-columns:1fr;}
  .f2{grid-template-columns:1fr;}
  .foot-top{grid-template-columns:1fr;}
  .f-legal{flex-direction:column;gap:8px;}
  .cta-btns{flex-direction:column;align-items:center;}
  .phil-stats{grid-template-columns:1fr;}
  .app-feats{grid-template-columns:1fr;}
  .stbns{flex-direction:column;}
}
/* ==========================================
   icon colors
   ========================================== */
.f-soc {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #222;
  color: white;
  font-size: 18px;
  transition: 0.3s;
}

.f-soc:hover {
  transform: scale(1.1);
}

@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .its-img-hero-img,
  .phone,
  .mq-track,
  .anim,
  .pcell,
  .its-btn,
  .btn-wh,
  .btn-ol {
    animation: none !important;
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FINAL OVERRIDES — inline.css loads after style.css (see index head).
   style.css breaks Solutions + About:
   - `.img-move img { transform: scale(1.5) }` blows up / clips full-bleed photos
   - `.pinsection { height: 100vh !important; overflow: hidden }` cuts Philosophy
   - `.blacksection p { font-size: 1.9vw }` overrides .phil-copy sizing
   - `.theMask { -webkit-mask }` can clip About content
   ═══════════════════════════════════════════════════════════════════════════ */

.its-svc .imgBox.img-move img {
  transform: none !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center !important;
}

.its-svc .its-imgbox .imgBox.img-move {
  aspect-ratio: 16 / 9 !important;
  min-height: clamp(188px, 32vw, 300px) !important;
}

.its-svc .its-imgbox .imgBox.img-move .its-imginner {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

#philosophy.blacksection .pinsection {
  height: auto !important;
  min-height: 100vh;
  overflow: visible !important;
}

/* style.css sets .blacksection h2 { color: #3C3C3C } — illegible on dark */
.blacksection h2.s-h2,
.blacksection .s-h2.d {
  color: var(--white) !important;
}

.blacksection .phil-copy p {
  font-size: var(--text-lead) !important;
  line-height: 1.75 !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

.blacksection .phil-copy h5 {
  font-size: clamp(1.05rem, 0.95rem + 0.55vw, 1.35rem) !important;
  line-height: 1.45 !important;
  color: var(--white) !important;
}

section.blacksection .theMask,
#philosophy .theMask {
  mask: none !important;
  -webkit-mask: none !important;
}