:root{
  --ct-nav-bg: rgba(10, 12, 18, 0.78);
  --ct-nav-bg-solid: #0a0c12;
  --ct-nav-border: rgba(255,255,255,0.10);
  --ct-text: rgba(255,255,255,0.92);
  --ct-muted: rgba(255,255,255,0.70);
  --ct-glow: rgba(13,110,253,0.28);
}



/* =========================
   TYPOGRAPHY (Google Fonts)
========================== */
:root{
  --ct-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  --ct-font-display: "Sora", "Inter", ui-sans-serif, system-ui;
  --ct-font-sign: "Dancing Script", "Inter", ui-sans-serif, system-ui;
}

/* =========================
   GLOBAL TYPOGRAPHY (Google Fonts)
   (No layout changes)
========================== */
:root{
  --ct-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  --ct-font-display: "Sora", "Inter", ui-sans-serif, system-ui;
  --ct-font-sign: "Dancing Script", "Inter", ui-sans-serif, system-ui;
}

/* Base */
html, body{
  font-family: var(--ct-font-sans);
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.ct-hero__title, .ct-who__title, .ct-services__title,
.ct-brands__title, .ct-newsletter__title{
  font-family: var(--ct-font-display);
  letter-spacing: -0.02em;
}

/* Body text */
p, li, label, input, button, a{
  font-family: var(--ct-font-sans);
  letter-spacing: 0.01em;
}

/* Better reading rhythm */
p{
  line-height: 1.65;
}

/* Keep your “signature” script style (used in hero) */
.ct-heroSig{
  font-family: var(--ct-font-sign);
}

/* Small UI text */
.ct-who__kicker,
.ct-newsletter__kicker,
.ct-serviceCard__badge,
.ct-pill{
  letter-spacing: 0.06em;
}

/* =========================
   HERO BRAND (logo only + signature)
========================== */
.ct-heroBrand{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  gap: 12px;
  margin-bottom: 14px;
}

.ct-heroLogo{
  height: 120px;      /* ✅ bigger on mobile */
  width: auto;
  max-width: min(340px, 80vw);
  object-fit: contain;
  display:block;
  filter: drop-shadow(0 18px 50px rgba(0,0,0,0.45));
}

.ct-heroSig{
  font-family: "Dancing Script", "Inter", ui-sans-serif, system-ui;
  font-weight: 700;
  font-size: clamp(18px, 2vw, 26px);
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.78);
  text-shadow: 0 10px 30px rgba(0,0,0,0.55);
}

@media (min-width: 992px){
  .ct-heroLogo{
    height: 50rem;    /* ✅ bigger on desktop */
    max-width: 520px;
  }
}

/* ✅ HERO logo bigger (text stays under, same placement) */
.ct-heroBrand{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  gap: 1px;              /* keeps same spacing to the text under */
}

.ct-heroLogo{
  height: 45vh;                 /* ✅ ~half screen */
  width: auto;
  max-width: min(900px, 92vw);
  object-fit: contain;
  display:block;
}


/* keep signature under logo, centered */
.ct-heroSig{
  display:block;
  text-align:center;
  margin: 0;
}


html, body{
  font-family: var(--ct-font-sans);
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,h2,h3,
.ct-hero__title,
.ct-services__title{
  font-family: var(--ct-font-display);
  letter-spacing: -0.02em;
}

p, .ct-who__lead, .ct-services__subtitle{
  letter-spacing: 0.01em;
}



/* =========================
   BRAND (Logo big + signature)
========================== */
.ct-brandMark{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

/* ✅ Bigger logo */
.ct-brandLogo{
  height: 44px;           /* mobile/tablet */
  width: auto;
  display: block;
  object-fit: contain;
}

@media (min-width: 992px){
  .ct-brandLogo{
    height: 54px;         /* desktop */
  }
}

/* Text stack (tall -> short) */
.ct-brandText{
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.ct-brandName{
  font-family: var(--ct-font-display);
  font-weight: 800;
  font-size: 1.06rem;     /* tall */
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.92);
}

.ct-brandSig{
  margin-top: 6px;
  font-family: var(--ct-font-sign);
  font-weight: 700;
  font-size: 0.95rem;     /* short */
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.72);
}

/* Optional: slightly tighter on very small screens */
@media (max-width: 420px){
  .ct-brandLogo{ height: 40px; }
  .ct-brandName{ font-size: 1.00rem; }
  .ct-brandSig{ font-size: 0.90rem; }
}

/* =========================
   FOOTER logo sizing (if needed)
========================== */
.ct-footer img,
.ct-footer__logo img{
  height: 14rem;
  width: auto;
  object-fit: contain;
}

@media (min-width: 992px){
  .ct-footer img,
  .ct-footer__logo img{
    height: 11rem;
  }
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  background: radial-gradient(900px 500px at 20% 0%, rgba(13,110,253,0.12), transparent 55%),
              radial-gradient(900px 500px at 80% 10%, rgba(255,255,255,0.06), transparent 50%),
              #070910;
  color: var(--ct-text);
  padding-top: 0; /* hero can go under navbar */
}

/* ===== Navbar ===== */
.ct-navbar{
  background: var(--ct-nav-bg);
  border-bottom: 1px solid var(--ct-nav-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 1050;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.ct-navbar::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ct-glow), transparent);
  opacity: 0.7;
  pointer-events: none;
}

/* Brand */
.ct-brand-icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 14px 34px rgba(0,0,0,0.38);
}

.ct-brand-fa{
  font-size: 14px;
  opacity: 0.95;
}

.ct-brand-text{
  font-weight: 900;
  letter-spacing: .2px;
}

/* Links */
.ct-nav-links{ gap: 6px; }

.ct-navbar .nav-link{
  color: rgba(255,255,255,0.86);
  font-weight: 650;
  padding: .55rem .9rem;
  border-radius: 999px;
  position: relative;
  transition: transform .16s ease, background .18s ease, color .18s ease, border-color .18s ease;
  border: 1px solid transparent;
}

.ct-navbar .nav-link:hover{
  background: rgba(255,255,255,0.06);
  transform: translateY(-1px);
  color: #fff;
}

.ct-navbar .nav-link.active{
  background: rgba(13,110,253,0.18);
  border-color: rgba(13,110,253,0.22);
  color: #fff;
  box-shadow: 0 10px 28px rgba(13,110,253,0.10);
}

@media (min-width: 992px){
  .ct-navbar .nav-link::after{
    content:"";
    position:absolute;
    left: 14px;
    right: 14px;
    bottom: 7px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .22s ease;
    opacity: 0.65;
  }
  .ct-navbar .nav-link:hover::after{ transform: scaleX(1); }
}

/* ===== Custom animated toggler ===== */
.ct-toggler{
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  position: relative;
  z-index: 1052;
}

.ct-toggler:hover{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-1px);
}

.ct-toggler-lines{
  width: 22px;
  height: 16px;
  position: relative;
  display: block;
}

.ct-toggler-lines span{
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: rgba(255,255,255,0.92);
  border-radius: 999px;
  transition: transform .22s ease, top .22s ease, opacity .18s ease;
}
.ct-toggler-lines span:nth-child(1){ top: 0; }
.ct-toggler-lines span:nth-child(2){ top: 7px; }
.ct-toggler-lines span:nth-child(3){ top: 14px; }

.ct-toggler[aria-expanded="true"] .ct-toggler-lines span:nth-child(1){ top: 7px; transform: rotate(45deg); }
.ct-toggler[aria-expanded="true"] .ct-toggler-lines span:nth-child(2){ opacity: 0; }
.ct-toggler[aria-expanded="true"] .ct-toggler-lines span:nth-child(3){ top: 7px; transform: rotate(-45deg); }

@media (min-width: 992px){
  .ct-toggler{ display: none !important; }
}

/* ===== Fullscreen animated mobile menu ===== */
@media (max-width: 991.98px){
  body.ct-nav-open{ overflow: hidden; }
  .ct-navbar .navbar-brand{ position: relative; z-index: 1052; }

  .ct-navbar .navbar-collapse{
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(8, 10, 16, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 94px 18px 22px 18px;
    opacity: 0;
    transform: translateY(-14px);
    transition: opacity .22s ease, transform .22s ease;
    z-index: 1051;
  }

  .ct-navbar .navbar-collapse.show{
    opacity: 1;
    transform: translateY(0);
  }

  .ct-nav-links{ font-size: 1.08rem; gap: 10px; }

  .ct-link-ico{
    width: 22px;
    margin-right: 10px;
    opacity: 0.85;
  }

  .ct-navbar .nav-link{
    padding: .95rem 1.0rem;
    border-radius: 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    transform: translateY(8px);
    opacity: 0;
  }

  .ct-navbar .navbar-collapse.show .nav-link{
    animation: ctMenuIn .42s cubic-bezier(.2,.8,.2,1) both;
    animation-delay: calc((var(--i, 1)) * 55ms);
  }

  .ct-navbar .nav-link.active{
    background: rgba(13,110,253,0.22);
    border-color: rgba(13,110,253,0.28);
  }

  .ct-nav-foot{
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.10);
  }
}

@keyframes ctMenuIn{
  from{ opacity: 0; transform: translateY(10px); }
  to  { opacity: 1; transform: translateY(0); }
}

/* Reduce motion support */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== Page ===== */
.ct-page{
  flex: 1;
  min-height: 100vh;
  padding-top: 76px; /* content offset, hero uses negative margin */
}

/* ✅ Hero starts under navbar (background visible behind it) */
.ct-hero{
  position: relative;
  width: 100%;
  overflow: hidden;

  margin-top: -76px;
  padding-top: calc(72px + 76px);
  padding-bottom: 84px;

  /* base layer (keep your nice look) */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.00));
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* background layer that holds the moving orbs */
.ct-hero-bg{
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;

  /* subtle continuous color drift (nice with random movement) */
  animation: ctHue 18s linear infinite;
  filter: saturate(1.15);
}

@keyframes ctHue{
  from{ filter: saturate(1.15) hue-rotate(0deg); }
  to  { filter: saturate(1.15) hue-rotate(360deg); }
}

/* the orbs (circles) */
.ct-orb{
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--size, 520px);
  height: var(--size, 520px);
  border-radius: 999px;

  /* soft colorful blob */
  background: radial-gradient(circle at 30% 30%,
    rgba(13,110,253,0.38),
    rgba(13,110,253,0.12) 35%,
    rgba(255,255,255,0.00) 70%
  );

  opacity: var(--o, 0.78);
  transform: translate(-50%, -50%) scale(var(--s, 1));
  filter: blur(18px);
  mix-blend-mode: screen;

  transition:
    left var(--d, 7000ms) cubic-bezier(.2,.8,.2,1),
    top  var(--d, 7000ms) cubic-bezier(.2,.8,.2,1),
    transform var(--d, 7000ms) cubic-bezier(.2,.8,.2,1),
    opacity 800ms ease;

  will-change: left, top, transform;
}

/* different sizes so it feels natural */
.ct-orb-1{ --size: 640px; }
.ct-orb-2{ --size: 520px; }
.ct-orb-3{ --size: 760px; }
.ct-orb-4{ --size: 460px; }

/* Hero content above background */
.ct-hero-inner{
  position: relative;
  z-index: 1;

  min-height: 52vh;
  display: grid;
  place-items: center;
  text-align: center;
}

.ct-hero-content{
  max-width: 820px;
  padding: 0 16px;
}

.ct-hero-title{
  margin: 0;
  font-weight: 950;
  letter-spacing: .2px;
  font-size: clamp(2.0rem, 4vw, 3.25rem);
  line-height: 1.08;
}

.ct-hero-sub{
  margin: 14px 0 0;
  color: var(--ct-muted);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  line-height: 1.6;
  max-width: 65ch;
  margin-left: auto;
  margin-right: auto;
}

/* ===== Footer ===== */
.ct-footer{
  background: var(--ct-nav-bg);
  border-top: 1px solid var(--ct-nav-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 18px 0;
  position: relative;
}

.ct-footer::before{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ct-glow), transparent);
  opacity: 0.65;
  pointer-events: none;
}

.ct-footer-logoWrap{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.ct-footer-logo{
  height: 10rem;
  width: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.35));
}

.ct-footer-card{
  height: 100%;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  padding: 14px 14px;
}

.ct-footer-title{
  font-weight: 900;
  letter-spacing: .2px;
  margin-bottom: 10px;
}

.ct-footer-item{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(255,255,255,0.86);
  text-decoration: none;
  padding: 8px 8px;
  border-radius: 12px;
  transition: background .18s ease, transform .16s ease, color .18s ease;
}

.ct-footer-item:hover{
  background: rgba(255,255,255,0.06);
  transform: translateY(-1px);
  color: #fff;
}

.ct-footer-ico{
  margin-top: 2px;
  width: 18px;
  opacity: 0.9;
}

.ct-footer-bottom{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: center;
}

/* Reduce motion: stop hue drift and movement transitions become instant */
@media (prefers-reduced-motion: reduce){
  .ct-hero-bg{ animation: none !important; }
  .ct-orb{ transition: none !important; }
}
/* background layer that holds the moving orbs */
.ct-hero-bg{
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;

  /* color drift */
  animation: ctHue 18s linear infinite;
  filter: saturate(1.15);
}

@keyframes ctHue{
  from{ filter: saturate(1.15) hue-rotate(0deg); }
  to  { filter: saturate(1.15) hue-rotate(360deg); }
}

/* the orbs */
.ct-orb{
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--size, 520px);
  height: var(--size, 520px);
  border-radius: 999px;

  /* each orb has its own tint */
  background: radial-gradient(circle at 30% 30%,
    rgba(var(--c, 13,110,253), 0.38),
    rgba(var(--c, 13,110,253), 0.14) 35%,
    rgba(255,255,255,0.00) 70%
  );

  opacity: var(--o, 0.78);
  transform: translate(-50%, -50%) translate3d(0,0,0) scale(var(--s, 1));
  filter: blur(18px);
  mix-blend-mode: screen;

  will-change: left, top, transform, opacity;
}

/* Sizes */
.ct-orb-1{ --size: 640px; }
.ct-orb-2{ --size: 520px; }
.ct-orb-3{ --size: 760px; }
.ct-orb-4{ --size: 460px; }

/* Initial anchor positions + different base colors */
.ct-orb-1{ --x: 22%; --y: 28%; --c: 13,110,253; }      /* blue */
.ct-orb-2{ --x: 78%; --y: 24%; --c: 255, 80, 180; }    /* pink */
.ct-orb-3{ --x: 42%; --y: 78%; --c: 110, 231, 183; }   /* green */
.ct-orb-4{ --x: 82%; --y: 72%; --c: 168, 85, 247; }    /* purple */

/* ✅ Fallback motion (CSS-only) so it moves even if JS doesn't run */
.ct-orb-1{ animation: ctFloat1 18s ease-in-out infinite alternate; }
.ct-orb-2{ animation: ctFloat2 22s ease-in-out infinite alternate; }
.ct-orb-3{ animation: ctFloat3 26s ease-in-out infinite alternate; }
.ct-orb-4{ animation: ctFloat4 20s ease-in-out infinite alternate; }

@keyframes ctFloat1{
  0%   { transform: translate(-50%,-50%) translate3d(0,0,0) scale(1); }
  20%  { transform: translate(-50%,-50%) translate3d(8vw,-2vh,0) scale(1.12); }
  55%  { transform: translate(-50%,-50%) translate3d(-4vw,6vh,0) scale(0.98); }
  100% { transform: translate(-50%,-50%) translate3d(10vw,8vh,0) scale(1.08); }
}
@keyframes ctFloat2{
  0%   { transform: translate(-50%,-50%) translate3d(0,0,0) scale(1); }
  28%  { transform: translate(-50%,-50%) translate3d(-10vw,3vh,0) scale(1.10); }
  62%  { transform: translate(-50%,-50%) translate3d(6vw,10vh,0) scale(0.95); }
  100% { transform: translate(-50%,-50%) translate3d(-8vw,-6vh,0) scale(1.05); }
}
@keyframes ctFloat3{
  0%   { transform: translate(-50%,-50%) translate3d(0,0,0) scale(1); }
  18%  { transform: translate(-50%,-50%) translate3d(7vw,-8vh,0) scale(1.14); }
  52%  { transform: translate(-50%,-50%) translate3d(-12vw,-2vh,0) scale(0.96); }
  100% { transform: translate(-50%,-50%) translate3d(6vw,12vh,0) scale(1.06); }
}
@keyframes ctFloat4{
  0%   { transform: translate(-50%,-50%) translate3d(0,0,0) scale(1); }
  30%  { transform: translate(-50%,-50%) translate3d(-6vw,-6vh,0) scale(1.10); }
  65%  { transform: translate(-50%,-50%) translate3d(12vw,2vh,0) scale(0.97); }
  100% { transform: translate(-50%,-50%) translate3d(-4vw,10vh,0) scale(1.05); }
}

/* ✅ Random mode (when JS adds .ct-orbs-random to .ct-hero) */
.ct-hero.ct-orbs-random .ct-orb{
  animation: none; /* stop fallback floats */

  transition-property: left, top, transform, opacity;
  transition-duration: var(--d, 7000ms);
  transition-timing-function: cubic-bezier(.2,.8,.2,1);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .ct-hero-bg{ animation: none !important; }
  .ct-orb{ animation: none !important; transition: none !important; }
}

/* stars */
/* =========================
   BRANDS PLAYFIELD SECTION
   ========================= */

.ct-brands{
  background: #e9ecef;
  color: #0b0f17;
  padding: 0;

  /* full bleed even inside bootstrap container */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.ct-brands__playfield{
  width: 100%;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: transparent;
}

.ct-brands__text-wrap{
  width: min(1100px, 92vw);
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 5;
  padding-top: clamp(26px, 4vw, 64px);
}

.ct-brands__textBox{
  display: inline-block;
  max-width: min(720px, 92vw);
  position: relative;
  text-align: center;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Light “background” under each letter via glow */
.ct-brands__title{
  margin: 0;
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 900;
  letter-spacing: 0.2px;
  padding: 0;
  display: inline-block;

  text-shadow:
    0 0 6px  rgba(255,255,255,0.85),
    0 0 18px rgba(255,255,255,0.65),
    0 0 34px rgba(255,255,255,0.40);
}

.ct-brands__subtitle{
  margin: 10px 0 0;
  max-width: 720px;
  font-size: clamp(14px, 1.35vw, 18px);
  line-height: 1.6;
  color: rgba(11, 15, 23, 0.78);
  padding: 0;
  display: inline-block;

  text-shadow:
    0 0 4px  rgba(255,255,255,0.75),
    0 0 12px rgba(255,255,255,0.55);
}

@media (prefers-color-scheme: dark){
  .ct-brands{
    background: #05060a;
    color: #f8f9fa;
  }
  .ct-brands__subtitle{
    color: rgba(248,249,250,0.82);
  }

  .ct-brands__title{
    text-shadow:
      0 0 6px  rgba(255,255,255,0.6),
      0 0 18px rgba(255,255,255,0.35),
      0 0 32px rgba(255,255,255,0.25);
  }
  .ct-brands__subtitle{
    text-shadow:
      0 0 4px  rgba(255,255,255,0.55),
      0 0 10px rgba(255,255,255,0.35);
  }
}

.ct-brands__space{
  width: 100%;
  height: clamp(260px, 38vw, 420px);
}

.ct-brand{
  width: clamp(92px, 10vw, 130px);
  height: clamp(92px, 10vw, 130px);
  border-radius: 999px;

  background: rgba(255,255,255,0.92);
  border: none;
  box-shadow: 0 14px 36px rgba(0,0,0,0.14);

  overflow: hidden;
  position: absolute;
  top: 0; left: 0;
  will-change: transform;

  display: grid;
  place-items: center;
  text-decoration: none;
  user-select: none;
  -webkit-user-drag: none;

  z-index: 2;
  transition: box-shadow .18s ease, background .18s ease;
}

.ct-brand img{
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 999px;
  object-fit: cover;
  object-position: center;
  transform: scale(1.03);
}

.ct-brand:hover{
  background: rgba(255,255,255,1);
  box-shadow: 0 20px 52px rgba(0,0,0,0.18);
}

.ct-brand:focus-visible{
  outline: 3px solid rgba(13,110,253,0.35);
  outline-offset: 3px;
}

/* Stars canvas layer */
.ct-brands__sparkles{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  width: 100%;
  height: 100%;
  display: block;
}

@media (prefers-reduced-motion: reduce){
  .ct-brand{ transition: none; }
  .ct-brands__sparkles{ display: none; }
}


/* our services */

/* =========================
   SERVICES SECTION (Dark)
========================== */

.ct-services{
  /* scoped vars so we don’t override your global :root */
  --ct-bg: #070A10;
  --ct-panel: rgba(255,255,255,0.06);
  --ct-border: rgba(255,255,255,0.10);
  --ct-text: rgba(255,255,255,0.90);
  --ct-muted: rgba(255,255,255,0.68);
  --ct-glow: rgba(110,231,183,0.18);
  --ct-glow2: rgba(99,102,241,0.18);
  --ct-shadow: 0 16px 60px rgba(0,0,0,0.55);

  position: relative;
  padding: clamp(48px, 6vw, 84px) 16px;
  background:
    radial-gradient(900px 500px at 20% 10%, var(--ct-glow), transparent 60%),
    radial-gradient(900px 500px at 85% 25%, var(--ct-glow2), transparent 60%),
    linear-gradient(180deg, #05070c 0%, var(--ct-bg) 60%, #05070c 100%);
  color: var(--ct-text);
  overflow: hidden;
}

.ct-services__container{
  max-width: 1200px;
  margin: 0 auto;
}

.ct-services__header{
  display: grid;
  gap: 10px;
  margin-bottom: 22px;
}

.ct-services__header--center{
  justify-items: center;
  text-align: center;
}

.ct-services__title{
  font-size: clamp(24px, 3.2vw, 36px);
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0;
}

.ct-services__subtitle{
  margin: 0;
  max-width: 68ch;
  color: var(--ct-muted);
  font-size: clamp(14px, 1.5vw, 16px);
}

.ct-services__grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.ct-serviceCard{
  grid-column: span 12;
  border: 1px solid var(--ct-border);
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.04) 100%);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 35px rgba(0,0,0,0.35);
  transform: translateZ(0);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  position: relative;
}

.ct-serviceCard::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(500px 180px at 20% 0%, rgba(255,255,255,0.12), transparent 60%);
  opacity: .55;
  pointer-events: none;
}

.ct-serviceCard:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.18);
  box-shadow: var(--ct-shadow);
}

.ct-serviceCard__media{
  padding: 14px 14px 0;
}

.ct-serviceCard__img{
  height: 170px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
}

.ct-serviceCard__photo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  filter: saturate(1.05) contrast(1.03);
}

.ct-serviceCard__img::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}

.ct-serviceCard__badge{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
}

.ct-serviceCard__body{
  padding: 14px 16px 16px;
  display: grid;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.ct-serviceCard__title{
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.ct-serviceCard__text{
  margin: 0;
  color: var(--ct-muted);
  font-size: 14px;
  line-height: 1.55;
}

.ct-serviceCard__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.ct-pill{
  font-size: 12px;
  color: rgba(255,255,255,0.80);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
}

.ct-services__cta{
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

.ct-seeMore{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  box-shadow: 0 12px 35px rgba(0,0,0,0.35);
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  backdrop-filter: blur(12px);
}

.ct-seeMore:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 18px 55px rgba(0,0,0,0.5);
}

.ct-seeMore__icon{
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.14);
}

.ct-seeMore__text{
  font-weight: 600;
  letter-spacing: 0.02em;
}

.ct-seeMore__spark{
  position: absolute;
  inset: -40%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.14) 35%,
    rgba(255,255,255,0.40) 50%,
    rgba(255,255,255,0.14) 65%,
    transparent 100%);
  transform: rotate(18deg) translateX(-60%);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}

.ct-seeMore:hover .ct-seeMore__spark{
  opacity: 1;
  animation: ctShimmer 1.1s ease forwards;
}

@keyframes ctShimmer{
  from{ transform: rotate(18deg) translateX(-60%); }
  to  { transform: rotate(18deg) translateX(60%); }
}

/* Responsive columns */
@media (min-width: 640px){
  .ct-serviceCard{ grid-column: span 6; }
  .ct-serviceCard__img{ height: 180px; }
}
@media (min-width: 1024px){
  .ct-serviceCard{ grid-column: span 4; }
  .ct-serviceCard__img{ height: 190px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ct-serviceCard,
  .ct-seeMore,
  .ct-seeMore__spark{
    transition: none !important;
    animation: none !important;
  }
}

/* Cursor */
/* =========================
   B&W CUSTOM CURSOR (SITE-WIDE)
========================== */

/* Dark-mode friendly defaults */
:root{
  --cursor-fill: #000000;
  --cursor-stroke: #ffffff;
  --cursor-shadow: rgba(0,0,0,.22);
  --cursor-hand: #000000;
  --cursor-ink: rgba(0,0,0,0.92);
}

@media (prefers-color-scheme: dark){
  :root{
    --cursor-fill: #ffffff;
    --cursor-stroke: #000000;
    --cursor-shadow: rgba(255,255,255,.18);
    --cursor-hand: #ffffff;
    --cursor-ink: rgba(255,255,255,0.92);
  }
}

/* Hide system cursor only when our cursor is active */
body.ct-bw-cursor-on,
body.ct-bw-cursor-on *{
  cursor: none !important;
}


/* Keep normal text cursor for inputs/text areas so it doesn’t feel broken */
body.ct-bw-cursor-on input,
body.ct-bw-cursor-on textarea,
body.ct-bw-cursor-on select,
body.ct-bw-cursor-on [contenteditable="true"]{
  cursor: text !important;
}


.bw-cursor{
  position: fixed;
  left: 0; top: 0;
  transform: translate(-100px,-100px);
  pointer-events: none;
  z-index: 9999;
  filter: drop-shadow(0 10px 14px var(--cursor-shadow));
  will-change: transform;
  transform-origin: var(--ox, 0px) var(--oy, 0px);

  /* Change this from none to block */
  display: block; 
}


.bw-cursor svg{
  width: 34px;
  height: 34px;
  display: block;
}

.bw-cursor .stroke{ stroke: var(--cursor-stroke); }
.bw-cursor .fill{ fill: var(--cursor-fill); }

/* Click press */
.bw-cursor.is-down{
  animation: cursorPress 180ms ease-out;
}
@keyframes cursorPress{
  0%   { transform: translate(var(--cx, -100px), var(--cy, -100px)) scale(1); }
  35%  { transform: translate(var(--cx, -100px), var(--cy, -100px)) scale(.92); }
  100% { transform: translate(var(--cx, -100px), var(--cy, -100px)) scale(1); }
}

/* Ring */
.click-ring{
  position: fixed;
  left: 0; top: 0;
  width: 12px; height: 12px;
  border-radius: 999px;
  border: 2px solid var(--cursor-ink);
  pointer-events: none;
  z-index: 9998;
  transform: translate(-9999px,-9999px);
  opacity: .9;
  will-change: transform, opacity;
}

.click-ring.play{
  animation: ringPop 520ms cubic-bezier(.2,.9,.2,1) forwards;
}
@keyframes ringPop{
  0%{ transform: translate(var(--x), var(--y)) scale(.5); opacity:.9; }
  70%{ transform: translate(var(--x), var(--y)) scale(3.2); opacity:.28; }
  100%{ transform: translate(var(--x), var(--y)) scale(4.2); opacity:0; }
}

/* Sparks */
.bw-spark{
  position: fixed;
  left: 0; top: 0;
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--cursor-ink);
  pointer-events: none;
  z-index: 9997;
  transform: translate(-9999px,-9999px);
  opacity: 0;
  will-change: transform, opacity;
}
.bw-spark.play{
  animation: sparkFly 520ms cubic-bezier(.15,.85,.25,1) forwards;
}
@keyframes sparkFly{
  0%{ transform: translate(var(--sx), var(--sy)) scale(.9); opacity:.85; }
  100%{ transform: translate(calc(var(--sx) + var(--dx)), calc(var(--sy) + var(--dy))) scale(.2); opacity:0; }
}

/* Disable on touch devices automatically */
@media (pointer: coarse){
  .bw-cursor, .click-ring, .bw-spark{ display: none !important; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .bw-cursor, .click-ring, .bw-spark{ display: none !important; }
}

/* Scroolbar */

/* =========================
   PREMIUM B&W SCROLLBAR (GLOBAL)
   - Auto adapts to dark mode
========================== */

:root{
  /* Scrollbar palette (Light) */
  --sb-track: rgba(0,0,0,.06);
  --sb-track-border: rgba(0,0,0,.18);

  --sb-thumb: rgba(0,0,0,.65);
  --sb-thumb-hover: rgba(0,0,0,.85);
  --sb-thumb-border: rgba(255,255,255,.75);

  --sb-corner: rgba(0,0,0,.08);
}

@media (prefers-color-scheme: dark){
  :root{
    /* Scrollbar palette (Dark) */
    --sb-track: rgba(255,255,255,.08);
    --sb-track-border: rgba(255,255,255,.22);

    --sb-thumb: rgba(255,255,255,.72);
    --sb-thumb-hover: rgba(255,255,255,.92);
    --sb-thumb-border: rgba(0,0,0,.75);

    --sb-corner: rgba(255,255,255,.10);
  }
}

/* Firefox */
*{
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}

/* WebKit (Chrome/Safari/Edge) */
::-webkit-scrollbar{
  width: 12px;
  height: 12px;
}

/* Track: soft panel + subtle diagonal texture */
::-webkit-scrollbar-track{
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.0) 0px,
      rgba(255,255,255,0.0) 6px,
      rgba(0,0,0,0.06) 6px,
      rgba(0,0,0,0.06) 12px
    ),
    var(--sb-track);
  border-left: 1px solid var(--sb-track-border);
}

/* Thumb: pill + micro-grip + clean border */
::-webkit-scrollbar-thumb{
  border-radius: 999px;
  border: 2px solid var(--sb-thumb-border);
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.0) 0px,
      rgba(255,255,255,.0) 5px,
      rgba(255,255,255,.25) 5px,
      rgba(255,255,255,.25) 6px
    ),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.10)),
    var(--sb-thumb);
  background-clip: padding-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(0,0,0,.25);
}

::-webkit-scrollbar-thumb:hover{
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.0) 0px,
      rgba(255,255,255,.0) 5px,
      rgba(255,255,255,.30) 5px,
      rgba(255,255,255,.30) 6px
    ),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.12)),
    var(--sb-thumb-hover);
}

::-webkit-scrollbar-thumb:active{
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.0) 0px,
      rgba(255,255,255,.0) 5px,
      rgba(255,255,255,.34) 5px,
      rgba(255,255,255,.34) 6px
    ),
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.14)),
    var(--sb-thumb-hover);
}

/* Corner for dual-axis scroll areas */
::-webkit-scrollbar-corner{
  background: var(--sb-corner);
}

/* Optional: smoother feel in scroll containers */
.scroll-area{
  scroll-behavior: smooth;
}

/* email collection */
/* =========================
   NEWSLETTER SECTION
========================== */

.ct-newsletter{
  position: relative;
  padding: clamp(48px, 6vw, 86px) 16px;
  overflow: hidden;

  /* full-bleed like your other sections */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  /* fits dark aesthetic + subtle premium glow */
  background:
    radial-gradient(900px 520px at 20% 18%, rgba(110,231,183,0.16), transparent 62%),
    radial-gradient(900px 520px at 82% 35%, rgba(99,102,241,0.16), transparent 62%),
    linear-gradient(180deg, #05060a 0%, #070a10 55%, #05060a 100%);
  color: rgba(255,255,255,0.92);
}

.ct-newsletter::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(closest-side at 40% 30%, rgba(255,255,255,0.07), transparent 62%),
    radial-gradient(closest-side at 75% 60%, rgba(255,255,255,0.05), transparent 70%);
  pointer-events:none;
  opacity:.9;
}

.ct-newsletter__inner{
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.ct-newsletter__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: center;
}

.ct-newsletter__copy{
  border-radius: 18px;
  padding: 18px 8px 6px;
}

.ct-newsletter__kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: .92;
}

.ct-newsletter__title{
  margin: 12px 0 0;
  font-size: clamp(26px, 3.3vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.ct-newsletter__subtitle{
  margin: 10px 0 0;
  max-width: 62ch;
  color: rgba(255,255,255,0.72);
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.6;
}

.ct-newsletter__bullets{
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  color: rgba(255,255,255,0.80);
  font-size: 14px;
}

.ct-newsletter__bullets li{
  display: flex;
  gap: 10px;
  align-items: center;
}

.ct-newsletter__bullets li::before{
  content: "✓";
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}

/* Right card */
.ct-newsletter__card{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  box-shadow: 0 18px 55px rgba(0,0,0,0.48);
  backdrop-filter: blur(12px);
  overflow: hidden;
}

.ct-newsletter__form{
  padding: 18px;
  display: grid;
  gap: 12px;
}

.ct-field{
  display: grid;
  gap: 6px;
}

.ct-field__label{
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}

.ct-field__input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.24);
  color: rgba(255,255,255,0.92);
  outline: none;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}

.ct-field__input::placeholder{
  color: rgba(255,255,255,0.48);
}

.ct-field__input:focus{
  border-color: rgba(255,255,255,0.28);
  background: rgba(0,0,0,0.34);
}

.ct-newsletter__btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05));
  color: rgba(255,255,255,0.92);
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,0.45);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  backdrop-filter: blur(12px);
}

.ct-newsletter__btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.24);
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
}

.ct-newsletter__btnIcon{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.14);
}

.ct-newsletter__btnShine{
  position: absolute;
  inset: -40%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.12) 35%,
    rgba(255,255,255,0.40) 50%,
    rgba(255,255,255,0.12) 65%,
    transparent 100%);
  transform: rotate(18deg) translateX(-60%);
  opacity: 0;
  pointer-events: none;
}

.ct-newsletter__btn:hover .ct-newsletter__btnShine{
  opacity: 1;
  animation: ctNlShimmer 1.1s ease forwards;
}

@keyframes ctNlShimmer{
  from{ transform: rotate(18deg) translateX(-60%); }
  to  { transform: rotate(18deg) translateX(60%); }
}

.ct-newsletter__fineprint{
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,0.55);
}

/* Layout on larger screens */
@media (min-width: 900px){
  .ct-newsletter__grid{
    grid-template-columns: 1.05fr 0.95fr;
    gap: 22px;
  }
  .ct-newsletter__form{
    padding: 20px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ct-newsletter__btn,
  .ct-newsletter__btnShine{
    transition: none !important;
    animation: none !important;
  }
}
/* =========================
   WHO WE ARE SECTION (Fixed + Equal Height Columns)
========================== */
.ct-who{
  position: relative;
  padding: clamp(44px, 6vw, 84px) 16px;
  overflow: hidden;

  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  background:
    radial-gradient(900px 520px at 15% 15%, rgba(110,231,183,0.12), transparent 62%),
    radial-gradient(900px 520px at 85% 25%, rgba(99,102,241,0.12), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.35) 65%, rgba(0,0,0,0.00) 100%);
}

.ct-who::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(closest-side at 30% 35%, rgba(255,255,255,0.05), transparent 65%),
    radial-gradient(closest-side at 75% 60%, rgba(255,255,255,0.04), transparent 70%);
  pointer-events:none;
  opacity:.9;
}

.ct-who__inner{
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ✅ stretch makes left/right match height */
.ct-who__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: stretch;
}

/* Left side */
.ct-who__copy{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ct-who__kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.90);
}

.ct-who__title{
  margin: 12px 0 0;
  font-size: clamp(26px, 3.3vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.94);
}

.ct-who__lead{
  margin: 10px 0 0;
  color: rgba(255,255,255,0.72);
  font-size: clamp(14px, 1.45vw, 16px);
  line-height: 1.7;
  max-width: 74ch;
}

.ct-who__points{
  margin-top: 16px;
  display: grid;
  gap: 12px;
}

.ct-who__point{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  box-shadow: 0 12px 35px rgba(0,0,0,0.28);
}

.ct-who__icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.22);
}

.ct-who__icon svg{ width: 22px; height: 22px; }

.ct-who__pointTitle{
  font-weight: 850;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.92);
}

.ct-who__pointText{
  margin-top: 4px;
  color: rgba(255,255,255,0.68);
  font-size: 14px;
  line-height: 1.55;
}

/* Right side */
.ct-who__right{
  height: 100%;
}

/* ✅ right card fills full column height */
.ct-whoCard{
  height: 100%;
  display: flex;
  flex-direction: column;

  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(255,255,255,0.085), rgba(255,255,255,0.04));
  box-shadow: 0 18px 55px rgba(0,0,0,0.50);
  backdrop-filter: blur(12px);
  overflow: hidden;
  padding: 16px;
  position: relative;
}

.ct-whoCard::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(600px 240px at 25% 0%, rgba(255,255,255,0.12), transparent 65%);
  opacity:.55;
  pointer-events:none;
}

.ct-whoCard__top{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}

.ct-whoTag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.22);
  color: rgba(255,255,255,0.92);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.ct-whoTag--soft{
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.84);
}

.ct-whoTag__dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(110,231,183,0.9);
  box-shadow: 0 0 0 4px rgba(110,231,183,0.18);
}

.ct-whoCard__headline{
  font-weight: 950;
  letter-spacing: -0.02em;
  font-size: 18px;
  line-height: 1.25;
  color: rgba(255,255,255,0.94);
  position: relative;
  z-index: 1;
}

.ct-whoCard__text{
  margin: 8px 0 0;
  color: rgba(255,255,255,0.72);
  line-height: 1.65;
  font-size: 14px;
  position: relative;
  z-index: 1;
}

.ct-whoCaps{
  margin-top: 12px;
  display: grid;
  gap: 10px;
  position: relative;
  z-index: 1;
}

/* capability rows */
.ct-whoCap{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
}

.ct-whoCap__ico{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  font-weight: 900;
}

.ct-whoCap__title{
  font-weight: 900;
  color: rgba(255,255,255,0.92);
  letter-spacing: -0.01em;
}

.ct-whoCap__sub{
  margin-top: 3px;
  color: rgba(255,255,255,0.68);
  font-size: 13px;
  line-height: 1.45;
}

/* stats */
.ct-whoStats{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  position: relative;
  z-index: 1;
}

.ct-whoStat{
  padding: 10px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  text-align: center;
}

.ct-whoStat__num{
  font-weight: 950;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.94);
  font-size: 16px;
}

.ct-whoStat__lbl{
  margin-top: 4px;
  color: rgba(255,255,255,0.62);
  font-size: 12px;
}

.ct-whoCard__line{
  height: 1px;
  background: rgba(255,255,255,0.12);
  margin: 14px 0 12px;
  position: relative;
  z-index: 1;
}

/* ✅ push CTA to bottom so card fills height nicely */
.ct-whoCard__cta{
  margin-top: auto;
  display:flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.ct-whoBtn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05));
  color: rgba(255,255,255,0.92);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,0.45);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  backdrop-filter: blur(12px);
}

.ct-whoBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.24);
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
}

.ct-whoBtn__icon{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.14);
}

.ct-whoBtn__shine{
  position: absolute;
  inset: -40%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.12) 35%,
    rgba(255,255,255,0.40) 50%,
    rgba(255,255,255,0.12) 65%,
    transparent 100%);
  transform: rotate(18deg) translateX(-60%);
  opacity: 0;
  pointer-events: none;
}

.ct-whoBtn:hover .ct-whoBtn__shine{
  opacity: 1;
  animation: ctWhoShimmer 1.1s ease forwards;
}

@keyframes ctWhoShimmer{
  from{ transform: rotate(18deg) translateX(-60%); }
  to  { transform: rotate(18deg) translateX(60%); }
}

.ct-whoGhost{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.18);
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  font-weight: 800;
  transition: transform .18s ease, border-color .18s ease;
}

.ct-whoGhost:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.20);
}

/* responsive */
@media (min-width: 980px){
  .ct-who__grid{
    grid-template-columns: 1fr 1fr; /* ✅ same width columns */
    gap: 22px;
  }
}

@media (max-width: 420px){
  .ct-whoStats{ grid-template-columns: 1fr; }
}
/* =========================
   CONTACT PAGE (design only)
   Uses your existing tokens + vibe
========================== */

/* shorter hero height */
.ct-hero--compact{
  padding: clamp(44px, 6vw, 74px) 16px;
}
.ct-hero--compact .ct-hero-inner{
  min-height: clamp(220px, 30vh, 320px);
}

/* hero text */
.ct-contactHeroTitle{
  margin: 0;
  font-size: clamp(30px, 4.2vw, 48px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-align:center;
}
.ct-contactHeroSub{
  margin: 12px auto 0;
  max-width: 70ch;
  text-align:center;
  color: rgba(255,255,255,0.72);
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: 1.6;
}

/* main contact section */
.ct-contact{
  position: relative;
  padding: clamp(52px, 6vw, 84px) 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.01) 100%);
  color: rgba(255,255,255,0.92);
}

.ct-contact__inner{
  max-width: 1200px;
  margin: 0 auto;
}

.ct-contact__header{
  text-align:center;
  margin-bottom: 18px;
  display:grid;
  gap: 10px;
}

.ct-contact__title{
  margin:0;
  font-size: clamp(22px, 3vw, 34px);
  letter-spacing: -0.02em;
}
.ct-contact__subtitle{
  margin:0 auto;
  max-width: 70ch;
  color: rgba(255,255,255,0.68);
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.6;
}

.ct-contact__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 18px;
}

.ct-contact__form{
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.04) 100%);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 12px 45px rgba(0,0,0,0.35);
}

.ct-contact__row{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.ct-field__textarea{
  min-height: 150px;
  resize: vertical;
}

/* ✅ reCAPTCHA spacing + centering */
.ct-recaptcha{
  margin-top: 14px;        /* proper margin from top */
  margin-bottom: 6px;
  display:flex;
  justify-content:center;
  align-items:center;
}
.ct-recaptcha > .g-recaptcha{
  transform-origin: center;
}

/* Alerts (inside form box) */
.ct-contact__alert{
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border-radius: 16px;
  padding: 14px 14px;
  box-shadow: 0 12px 45px rgba(0,0,0,0.28);
  margin: 0 0 14px;
  backdrop-filter: blur(12px);
}
.ct-contact__alertTitle{
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.ct-contact__alertText{
  color: rgba(255,255,255,0.78);
  line-height: 1.6;
  font-size: 14px;
}
.ct-contact__muted{
  color: rgba(255,255,255,0.62);
}
.ct-contact__alertActions{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
}
.ct-contact__linkBtn{
  text-decoration:none;
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.18);
  padding: 10px 12px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.ct-contact__linkBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.26);
  background: rgba(0,0,0,0.28);
}
.ct-contact__inlineForm{
  display:inline-flex;
  margin: 0;
}
.ct-contact__ghostBtn{
  border: 1px dashed rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.10);
  color: rgba(255,255,255,0.82);
  padding: 10px 12px;
  border-radius: 999px;
  cursor:pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.ct-contact__ghostBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.30);
  background: rgba(0,0,0,0.16);
}

.ct-contact__alert--success{ border-color: rgba(120, 255, 190, 0.22); }
.ct-contact__alert--warn{    border-color: rgba(255, 210, 120, 0.22); }
.ct-contact__alert--error{   border-color: rgba(255, 120, 120, 0.22); }
.ct-contact__alert--info{    border-color: rgba(150, 200, 255, 0.22); }

/* success-in-form-box */
.ct-contact__form--sent{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(18px, 2.6vw, 26px);
}
.ct-contact__sentInner{
  width: 100%;
  max-width: 560px;
  text-align:center;
  display:grid;
  gap: 10px;
}
.ct-contact__sentBadge{
  display:inline-flex;
  align-self:center;
  justify-self:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(120, 255, 190, 0.22);
  background: rgba(0,0,0,0.18);
  color: rgba(255,255,255,0.92);
  font-weight: 700;
  letter-spacing: .02em;
}
.ct-contact__sentTitle{
  margin: 0;
  font-size: clamp(18px, 2.2vw, 24px);
  letter-spacing: -0.01em;
}
.ct-contact__sentText{
  margin: 0 auto;
  max-width: 62ch;
  color: rgba(255,255,255,0.75);
  line-height: 1.65;
  font-size: 14px;
}
.ct-contact__sentActions{
  margin-top: 6px;
  display:flex;
  justify-content:center;
}
.ct-contact__sentFine{
  margin: 4px 0 0;
  color: rgba(255,255,255,0.58);
  font-size: 12px;
  line-height: 1.55;
}

/* button matches your “shine” style */
.ct-contact__btn{
  margin-top: 12px;
  width: 100%;
  border: 1px solid rgba(255,255,255,0.16);
  background: linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
  color: rgba(255,255,255,0.92);
  border-radius: 999px;
  padding: 12px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  cursor:pointer;
  box-shadow: 0 14px 45px rgba(0,0,0,0.35);
  position:relative;
  overflow:hidden;
  backdrop-filter: blur(12px);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.ct-contact__btn:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 20px 60px rgba(0,0,0,0.50);
}
.ct-contact__btn:disabled{
  cursor: not-allowed;
  opacity: .65;
  transform: none;
  box-shadow: 0 12px 45px rgba(0,0,0,0.30);
}
.ct-contact__btnText{ font-weight: 650; letter-spacing: .02em; }
.ct-contact__btnIcon{
  width: 34px; height: 34px;
  display:grid; place-items:center;
  border-radius: 999px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.14);
}
.ct-contact__btnShine{
  position:absolute;
  inset:-40%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.14) 35%,
    rgba(255,255,255,0.40) 50%,
    rgba(255,255,255,0.14) 65%,
    transparent 100%);
  transform: rotate(18deg) translateX(-60%);
  opacity:0;
  pointer-events:none;
}
.ct-contact__btn:hover .ct-contact__btnShine{
  opacity:1;
  animation: ctContactShimmer 1.1s ease forwards;
}
@keyframes ctContactShimmer{
  from { transform: rotate(18deg) translateX(-60%); }
  to   { transform: rotate(18deg) translateX(60%); }
}

.ct-contact__fineprint{
  margin: 12px 0 0;
  color: rgba(255,255,255,0.62);
  font-size: 12px;
  line-height: 1.55;
  text-align:center;
}
.ct-contact__clientHint{
  margin: 10px 0 0;
  color: rgba(255,255,255,0.62);
  font-size: 12px;
  text-align:center;
}

/* info card */
.ct-contact__card{
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.04) 100%);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 12px 45px rgba(0,0,0,0.35);
}
.ct-contactCard__kicker{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
}
.ct-contactCard__headline{
  margin-top: 10px;
  font-size: 18px;
  letter-spacing: -0.01em;
  font-weight: 700;
}
.ct-contactCard__text{
  margin: 10px 0 0;
  color: rgba(255,255,255,0.70);
  line-height: 1.65;
  font-size: 14px;
}

.ct-contactFacts{
  margin-top: 14px;
  display:grid;
  gap: 10px;
}
.ct-contactFact{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}
.ct-contactFact__ico{
  width: 38px; height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.22);
  display:grid; place-items:center;
}
.ct-contactFact__title{
  font-weight: 700;
  font-size: 14px;
}
.ct-contactFact__sub{
  margin-top: 2px;
  color: rgba(255,255,255,0.68);
  font-size: 13px;
  line-height: 1.45;
}

/* ✅ clickable phone/address styling */
.ct-contactLink{
  color: rgba(255,255,255,0.86);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  padding-bottom: 1px;
  transition: border-color .18s ease, color .18s ease, opacity .18s ease;
}
.ct-contactLink:hover{
  color: rgba(255,255,255,0.92);
  border-bottom-color: rgba(255,255,255,0.32);
}
.ct-contactLink:active{
  opacity: .85;
}

.ct-contactCard__line{
  height: 1px;
  background: rgba(255,255,255,0.10);
  margin: 14px 0;
}

.ct-contactSocial{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ct-contactSocial__link{
  text-decoration:none;
  color: rgba(255,255,255,0.86);
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.18);
  padding: 10px 12px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  transition: transform .18s ease, border-color .18s ease;
}
.ct-contactSocial__link:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.22);
}

/* paragraph section between form and footer */
.ct-contactNote{
  padding: clamp(40px, 5vw, 64px) 16px;
}
.ct-contactNote__inner{
  max-width: 1200px;
  margin: 0 auto;
}
.ct-contactNote__card{
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.03) 100%);
  border-radius: 18px;
  padding: clamp(16px, 2.4vw, 22px);
  box-shadow: 0 12px 45px rgba(0,0,0,0.28);
  text-align:center;
}
.ct-contactNote__kicker{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
}
.ct-contactNote__title{
  margin: 10px 0 0;
  font-size: clamp(18px, 2.4vw, 26px);
  letter-spacing: -0.01em;
}
.ct-contactNote__text{
  margin: 10px auto 0;
  max-width: 78ch;
  color: rgba(255,255,255,0.70);
  line-height: 1.65;
  font-size: 14px;
}
.ct-contactNote__chips{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 14px;
}

/* responsive */
@media (min-width: 900px){
  .ct-contact__grid{
    grid-template-columns: 1.2fr 0.8fr;
    align-items: stretch;
  }
  .ct-contact__row{
    grid-template-columns: 1fr 1fr;
  }
}


/* =========================
   SERVICES = HERO STYLE BG
   ========================= */
.ct-services--hero{
  position: relative;
  overflow: hidden;
  /* base like hero */
  background: #070A10;
}

/* keep your content above the orbs */
.ct-services--hero .ct-services__container{
  position: relative;
  z-index: 2;
}

/* reuse hero bg wrapper inside services */
.ct-services-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* optional: readability veil (same vibe as hero) */
.ct-services--hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(110,231,183,0.12), transparent 60%),
    radial-gradient(900px 520px at 85% 25%, rgba(99,102,241,0.12), transparent 60%),
    linear-gradient(180deg, rgba(5,7,12,0.72) 0%, rgba(7,10,16,0.92) 60%, rgba(5,7,12,0.78) 100%);
}

/* If your hero orb styles already exist, you can SKIP this block.
   If not, keep it. It makes the orbs MOVE (not just color). */
.ct-services--hero .ct-orb{
  position: absolute;
  border-radius: 999px;
  filter: blur(34px);
  opacity: 0.78;
  mix-blend-mode: screen;
  will-change: transform;

  width: var(--sz, 420px);
  height: var(--sz, 420px);
  left: var(--x, 0%);
  top: var(--y, 0%);

  animation: ctOrbFloat var(--dur, 18s) ease-in-out infinite alternate;
  transform: translate3d(0,0,0) scale(1);
}

/* per-orb sizes + positions + motion */
.ct-services--hero .ct-orb-1{
  --sz: 520px; --x: -14%; --y: -18%;
  --dx: 150px; --dy: 110px; --sc: 1.08; --dur: 18s;
  background: rgba(110,231,183,0.22);
}
.ct-services--hero .ct-orb-2{
  --sz: 460px; --x: 68%; --y: -22%;
  --dx: -160px; --dy: 140px; --sc: 1.10; --dur: 21s;
  background: rgba(99,102,241,0.22);
}
.ct-services--hero .ct-orb-3{
  --sz: 520px; --x: -12%; --y: 58%;
  --dx: 190px; --dy: -110px; --sc: 1.06; --dur: 23s;
  background: rgba(56,189,248,0.18);
}
.ct-services--hero .ct-orb-4{
  --sz: 520px; --x: 62%; --y: 62%;
  --dx: -180px; --dy: -140px; --sc: 1.07; --dur: 19s;
  background: rgba(244,114,182,0.16);
}

@keyframes ctOrbFloat{
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(var(--dx, 140px), var(--dy, 90px), 0) scale(var(--sc, 1.08)); }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .ct-services--hero .ct-orb{ animation: none !important; }
}

/* services */

/* === Added: "Technologies Used" area (replaces old tags row) === */
.ct-tech{
  margin-top: 14px;
}

.ct-tech__label{
  font-size: .85rem;
  letter-spacing: .02em;
  color: rgba(255,255,255,.70);
  margin-bottom: 10px;
}

.ct-tech__pills{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ct-tech__pill{
  display: inline-flex;
  align-items: center;
  padding: .38rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-size: .78rem;
  line-height: 1;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Optional: nicer spacing between description and tech area without changing overall layout */
.ct-service-card__desc{
  margin-bottom: 12px;
}