/* ===== Vega Layout ===== */

:root{
  --ink:#0b0f14;
  --paper:#ffffff;
  --wash:#f4f5f7;

  --line:rgba(11,15,20,.12);
  --line-2:rgba(11,15,20,.08);
  --line-dark:rgba(255,255,255,.14);

  --muted:rgba(11,15,20,.68);

  --cta:#ff8a00;
  --accent:#6a5cff;
  --max:1200px;
  --r:18px;

  --proof-bg:#07090f;
  --proof-line:rgba(255,255,255,.10);
  --proof-text:rgba(255,255,255,.92);
  --proof-shadow: 0 18px 55px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Manrope", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  padding-top:64px;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}

/* =========================================================
   NAV
========================================================= */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:60;
  background:rgba(11,15,20,.88);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--line-dark);
}
.navrow{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:18px;
}
.brand{
  display:flex; align-items:center;
  color:#fff;
  white-space:nowrap;
  font-weight:950;
  letter-spacing:-.02em;
  font-size:16px;
}
.navlinks{
  display:flex; align-items:center; gap:8px;
  font-weight:850; font-size:14px;
  color:rgba(255,255,255,.86);
  position:relative;
}
.navLink{
  padding:10px 10px;
  border-radius:999px;
  color:rgba(255,255,255,.86);
}
.navLink:hover{background:rgba(255,255,255,.06); color:#fff;}

.navBtn{
  appearance:none;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.86);
  font:inherit;
  font-weight:900;
  padding:10px 10px;
  border-radius:999px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.navBtn:hover{background:rgba(255,255,255,.06); color:#fff;}
.navBtn:after{
  content:"▾";
  font-weight:950;
  font-size:12px;
  line-height:1;
  opacity:.9;
  transform: translateY(-1px) rotate(0deg);
  transition: transform .14s ease;
}
.navBtn[aria-expanded="true"]{background:rgba(255,255,255,.06); color:#fff;}
.navBtn[aria-expanded="true"]:after{transform: translateY(-1px) rotate(180deg);}
.navRight{display:flex; gap:10px; align-items:center;}

.cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  font-weight:950;
  font-size:14px;
  border:1px solid rgba(255,138,0,.34);
  color:#111;
  background: linear-gradient(180deg, rgba(255,138,0,1), rgba(255,120,0,1));
  box-shadow: 0 10px 24px rgba(255,138,0,.18);
  transition: transform .12s ease, filter .12s ease;
}
.cta:hover{filter:brightness(.98); transform: translateY(-1px);}

.btnGhost{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px;
  border-radius:999px;
  font-weight:950;
  font-size:14px;
  border:1px solid rgba(255,255,255,.22);
  background:transparent;
  color:#fff;
}
.btnGhost:hover{background:rgba(255,255,255,.06);}

.menuBtn{
  display:none;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  color:#fff;
  border-radius:999px;
  padding:10px 12px;
  font-weight:950;
  cursor:pointer;
  gap:10px;
  align-items:center;
}
.burger{width:18px; height:12px; position:relative; display:inline-block;}
.burger:before, .burger:after, .burger i{
  content:"";
  position:absolute; left:0; right:0;
  height:2px; border-radius:2px;
  background: rgba(255,255,255,.92);
}
.burger:before{top:0}
.burger i{top:5px; opacity:.9}
.burger:after{bottom:0; opacity:.85}

/* Desktop dropdown layer */
.dropLayer{
  position:absolute;
  left:0; right:0;
  top:100%;
  display:none;
  padding: 10px 0 18px;
  background: rgba(0,0,0,.45);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.dropLayer.open{display:block;}
.dropPanel{
  display:none;
  width:min(680px, calc(100vw - 48px));
  margin-left:auto;
  margin-right:auto;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(17,24,36,.94);
  backdrop-filter: blur(14px);
  border-radius: 18px;
  padding: 10px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.dropPanel.open{display:block;}
.dropSimple{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 12px;
  padding: 6px 6px 4px;
}
.dropSimple a{
  display:block;
  padding: 10px 8px;
  border-radius: 10px;
  color: rgba(255,255,255,.92);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: -.01em;
}
.dropSimple a:hover{background: rgba(255,255,255,.08);}

/* =========================================================
   HERO
========================================================= */
header.top{
  background:
    radial-gradient(1100px 420px at 20% 0%, rgba(255,138,0,.16), transparent 60%),
    radial-gradient(1100px 420px at 80% 10%, rgba(106,92,255,.16), transparent 60%),
    var(--ink);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.hero{
  padding: 34px 0 12px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.hero h1{
  margin:0;
  font-size: clamp(28px, 3.0vw, 44px);
  line-height:1.05;
  letter-spacing:-.04em;
  font-weight:950;
  max-width: 28ch;
}
.bannerActions{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px;}

/* =========================================================
   IMPACT
========================================================= */
.impact{
  padding: 10px 0 34px;
  margin-top: 6px;
}
.impactTray{
  background:
    radial-gradient(900px 280px at 20% 0%, rgba(255,138,0,.10), transparent 60%),
    radial-gradient(900px 280px at 80% 30%, rgba(106,92,255,.10), transparent 60%),
    var(--proof-bg);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 34px;
  padding: 18px;
  box-shadow: var(--proof-shadow);
}
.impactGrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.impactCard{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 26px;
  padding: 18px 18px 16px;
  color: rgba(255,255,255,.92);
  min-height: 170px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.impactTitle{
  font-weight: 950;
  font-size: 16px;
  letter-spacing: -.02em;
  color: rgba(255,255,255,.96);
  margin-bottom: 8px;
}
.impactValue{
  font-weight: 950;
  font-size: 54px;
  line-height: 1;
  letter-spacing: -.02em;
}
.impactText{
  margin-top:10px;
  color: rgba(255,255,255,.78);
  font-size:14px;
  line-height:1.45;
  font-weight:650;
  max-width: 44ch;
}
.cOrange{color:#ff8a00;}
.cGreen{color:#1fda7a;}
.cPink{color:#ff2a8b;}
.cPurple{color:#6a5cff;}

.awardsRow{
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,.10);
}

.awardsStrip{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
}
.awardBadge{
  height:100px;
  width:210px;
  border:1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: #fff;
  overflow:hidden;
}
.awardBadge img{
  max-height:80px;
  max-width:140px;
  width:auto;
  height:auto;
  opacity:.92;
}

/* =========================================================
   MAIN / LAYOUT
========================================================= */
main{background:var(--paper);}
section{padding:44px 0;}
.sectionDivider{
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(244,245,247,.55), rgba(244,245,247,0));
}
.sectionHead{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:18px; flex-wrap:wrap;
  margin-bottom:16px;
}
.sectionHead h2{margin:0; font-size:30px; letter-spacing:-.02em; font-weight:950;}
.sectionHead p{margin:0; color:var(--muted); max-width:78ch; font-weight:600;}

.twoCol{display:grid; grid-template-columns: 1fr 1fr; gap:14px; align-items:stretch;}
.panel{
  border:1px solid var(--line);
  border-radius: 18px;
  padding:22px;
  background:var(--paper);
}
.panel h3{
  margin:0 0 8px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(11,15,20,.70);
  font-weight:950;
}
.panel p{margin:0; color:var(--muted); font-size:15px; font-weight:600;}

/* Shared grid */
.grid{display:grid; grid-template-columns:repeat(12, 1fr); gap:14px;}

/* =========================================================
   SERVICES
========================================================= */
.serviceCard{
  grid-column: span 3;
  border:1px solid var(--line);
  border-radius: 20px;
  padding:18px;
  background:#fff;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
  min-height: 170px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.serviceCard:hover{
  transform: translateY(-2px);
  border-color:rgba(11,15,20,.22);
  box-shadow: 0 16px 36px rgba(11,15,20,.06);
}
.serviceTitle{
  font-size:16px;
  letter-spacing:-.02em;
  font-weight:950;
  margin:0 0 8px;
  line-height:1.15;
  color: rgba(11,15,20,.94);
}
.serviceDesc{
  margin:0;
  color:var(--muted);
  font-size:13px;
  font-weight:650;
  line-height:1.45;
  max-width: 44ch;
}
.inlineLink{
  font-weight:950;
  font-size:13px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  color: var(--cta);
}
.inlineLink:hover{text-decoration:underline;}

/* =========================================================
   CLIENTS / PARTNERS / TESTIMONIALS
========================================================= */
.clients{background:#fff;}
.clientGrid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:12px;
}
.clientLogo{
  height:56px;
  border:1px solid rgba(11,15,20,.10);
  border-radius: 14px;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  color:rgba(11,15,20,.55);
  font-weight:950;
  letter-spacing:.06em;
  font-size:12px;
}

.tGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
.quote{
  border:1px solid rgba(11,15,20,.10);
  border-radius: 18px;
  padding:18px;
  background:#fff;
}
.quote p{margin:0; color:rgba(11,15,20,.86); font-size:14px; font-weight:650;}
.who{margin-top:12px; font-weight:950; font-size:13px;}
.role{color:var(--muted); font-size:13px; font-weight:700;}

.miniDivider{
  margin: 22px 0 18px;
  border-top: 1px solid var(--line-2);
}

.partnerGrid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:12px;
  margin-top: 10px;
}
.partnerLogo{
  height:56px;
  border:1px solid rgba(11,15,20,.10);
  border-radius: 14px;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  color:rgba(11,15,20,.55);
  font-weight:950;
  letter-spacing:.06em;
  font-size:12px;
}

/* =========================================================
   CTA
========================================================= */
.ctaBand{
  padding: 0;
  background:
    radial-gradient(1100px 340px at 15% 30%, rgba(255,138,0,.22), transparent 60%),
    radial-gradient(1100px 340px at 85% 10%, rgba(106,92,255,.22), transparent 60%),
    #0b0f14;
  color:#fff;
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.ctaBandInner{
  padding: 78px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.ctaBand h2{
  margin:0;
  font-size: clamp(30px, 3.0vw, 52px);
  line-height:1.04;
  letter-spacing:-.04em;
  font-weight:950;
  max-width: 26ch;
}
.ctaBand p{
  margin:14px 0 0;
  color: rgba(255,255,255,.76);
  font-weight:650;
  font-size: 16px;
  max-width: 70ch;
}
.ctaBandRight{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.ctaBig{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:18px 22px;
  border-radius:999px;
  font-weight:950;
  font-size:16px;
  border:1px solid rgba(255,138,0,.34);
  color:#111;
  background: linear-gradient(180deg, rgba(255,138,0,1), rgba(255,120,0,1));
  box-shadow: 0 18px 44px rgba(255,138,0,.20);
  transition: transform .12s ease, filter .12s ease;
}
.ctaBig:hover{filter:brightness(.98); transform: translateY(-1px);}

/* =========================================================
   FOOTER
========================================================= */
footer{background:var(--ink); color:#fff; margin-top:0;}
.footTop{padding:42px 0 18px; border-top:1px solid var(--line-dark);}
.footGrid{display:grid; grid-template-columns: 1fr 1fr 1fr 1.05fr; gap:18px;}
.footCol h4{
  margin:0 0 10px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.70);
  font-weight:950;
}
.footCol a{
  display:block;
  padding:8px 0;
  color:rgba(255,255,255,.78);
  font-weight:850;
  font-size:14px;
}
.footCol a:hover{color:#fff;}

.addr{
  color:rgba(255,255,255,.78);
  font-weight:750;
  font-size:14px;
  line-height:1.55;
}
.addr b{
  display:block;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
  margin-bottom:8px;
  font-weight:950;
}

.cityLink{display:inline-flex; align-items:center; gap:8px; text-decoration:none;}
.cityLink:after{content:"↗"; font-weight:950; opacity:.85; transform: translateY(-1px);}
.cityLinkOrange{color: rgba(255,138,0,.98);}
.cityLinkOrange:visited{color: rgba(255,138,0,.98);}
.cityLinkPurple{color: rgba(106,92,255,.98);}
.cityLinkPurple:visited{color: rgba(106,92,255,.98);}

.socials{display:flex; gap:10px; margin-top: 14px; flex-wrap:wrap; align-items:center;}
.social{
  display:inline-grid;
  place-items:center;
  width:40px; height:40px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
}
.social:hover{background: rgba(255,255,255,.08);}
.social svg{width:18px; height:18px; display:block; fill: rgba(255,255,255,.92);}


/* ===== Footer Bottom ===== */

.footBottom{
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:50px;
  padding:28px 0 34px;
  color:rgba(255,255,255,.70);
  font-size:13px;
}

/* WRAPPER */
.footBottomInner{
  display:flex;
  flex-direction:column;
  gap:20px;
}

/* TOP ROW */
.footBottomTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
}

/* LOGOS */
.footLogos{
  display:flex;
  align-items:center;
  gap:32px;
}

.footLogos img{
  height:72px;
  width:auto;
  object-fit:contain;
  opacity:.95;
  transition:opacity .15s ease, transform .15s ease;
}

.footLogos img:hover{
  opacity:1;
  transform:translateY(-2px);
}

/* SOCIALS */
.socials{
  display:flex;
  gap:14px;
}

.social{
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.2);
}

.social svg{
  width:18px;
  height:18px;
  fill:#fff;
}

/* BOTTOM ROW */
.footBottomBottom{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:6px;
}

/* LINKS */
.footBottomLinks{
  display:flex;
  gap:10px;
}

.footBottomLinks a{
  color:rgba(255,255,255,.70);
  font-weight:800;
}

.footBottomLinks a:hover{
  color:#fff;
}

.dotSep{
  opacity:.6;
}

/* COPYRIGHT */
.footCopy{
  font-size:12px;
  opacity:.7;
}

/* MOBILE */
@media (max-width: 720px){

  .footBottomTop{
    flex-direction:column;
    gap:20px;
  }

}


/* =========================================================
   MOBILE DRAWER
========================================================= */
.drawer{display:none; position:fixed; inset:0; background: rgba(0,0,0,.55); z-index:80;}
.drawer.open{display:block;}
.drawerPanel{
  position:absolute;
  right:0; top:0; height:100%;
  width:min(420px, 92vw);
  background: #0b1020;
  border-left: 1px solid rgba(255,255,255,.12);
  padding:16px;
  color:#fff;
  overflow:auto;
}
.drawerHead{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 0 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  margin-bottom: 10px;
}
.drawerBrand{font-weight:950; letter-spacing:-.02em;}
.drawerClose{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color:#fff;
  border-radius: 999px;
  padding:8px 10px;
  font-weight:950;
  font-size:12px;
  cursor:pointer;
}
/* === Make accordion buttons match drawer links === */

.accBtn{
  width:100%;
  text-align:left;

  /* reset button weirdness */
  font: inherit;
  font-size:17px;
  font-weight:950;
  letter-spacing:-0.01em;

  /* match link spacing */
  padding:12px 6px;
  margin:8px 0 0;

  /* visuals */
  color:rgba(255,255,255,.92);
  background:transparent;
  border:0;
  border-top:1px solid rgba(255,255,255,.10);

  cursor:pointer;

  /* layout */
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.accBtn::after{
  content:"▾";
  font-size:14px;
  font-weight:950;
  opacity:.9;
  transform: translateY(-1px) rotate(0deg);
  transition: transform .14s ease;
}

.accBtn[aria-expanded="true"]::after{
  transform: translateY(-1px) rotate(180deg);
}


.accBtn[aria-expanded="true"]:after{transform: translateY(-1px) rotate(180deg);}
.accPanel{padding: 4px 0 10px; margin-left: 0;}
.accPanel a{
  display:block;
  padding:10px 6px;
  color: rgba(255,255,255,.86);
  font-weight:850;
  border-radius: 10px;
}
.accPanel a:hover{background: rgba(255,255,255,.06); color:#fff;}
.drawerLink{
  display:block;
  padding:12px 6px;
  color: rgba(255,255,255,.92);
  font-weight:950;
  border-top:1px solid rgba(255,255,255,.10);
  margin-top: 8px;
}
.drawerCTA{
  display:block;
  text-align:center;
  padding:12px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,138,0,.34);
  background: linear-gradient(180deg, rgba(255,138,0,1), rgba(255,120,0,1));
  color: #111;
  margin-top: 14px;
  font-weight:950;
  box-shadow: 0 12px 26px rgba(255,138,0,.18);
}

/* Responsive */
@media (max-width: 980px){
  .menuBtn{display:inline-flex;}
  .navlinks{display:none;}
  .dropLayer{display:none !important;}

  .impactGrid{grid-template-columns: 1fr;}
  .twoCol{grid-template-columns: 1fr;}
  .serviceCard{grid-column: span 6;}
  .clientGrid{grid-template-columns: repeat(3, 1fr);}
  .tGrid{grid-template-columns: 1fr;}
  .partnerGrid{grid-template-columns: repeat(3, 1fr);}
  .footGrid{grid-template-columns: 1fr 1fr;}
}
@media (max-width: 560px){
  .serviceCard{grid-column: span 12;}
  .clientGrid{grid-template-columns: repeat(2, 1fr);}
  .partnerGrid{grid-template-columns: repeat(2, 1fr);}
  .ctaBandInner{padding:64px 0;}
}

/* =========================================================
   HOMEPAGE HERO OVERRIDES
========================================================= */
body.home header.top .hero{
  padding: 68px 0 34px;
}
body.home header.top .hero h1{
  font-size: clamp(38px, 4.6vw, 78px);
  line-height:1.02;
  letter-spacing:-.055em;
  max-width: 18ch;
}
body.home .impact{
  padding: 34px 0 46px;
  margin-top: 0;
}

/* =========================================================
   COMPONENTS: GENERIC
========================================================= */


/* =========================
   Full-width copy block
========================= */

.fullText {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  background: #fff;

  /* spacing fix */
  margin-top: 18px;
}

/* remove extra top space if it's the first element */
.wrap .fullText:first-of-type {
  margin-top: 0;
}

.fullText p {
  margin: 0;
  color: var(--muted);
  font-weight: 650;
  line-height: 1.6;
}

/* =========================
   Clean version (no bubble)
========================= */

.fullText--clean {
  padding: 0;
  border: none;
  background: transparent;

  /* keep spacing consistent */
  margin-top: 18px;
}

/* ensure clean version text matches site */
.fullText--clean p {

}

/* =========================
   consistent spacing system

========================= */

/* adds spacing between stacked elements inside wrap */
.wrap > * + .fullText {
  margin-top: 18px;
}


.card{
  grid-column: span 4;
  border:1px solid var(--line);
  border-radius: 20px;
  padding:18px;
  background:#fff;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
  min-height: 150px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.card:hover{
  transform: translateY(-2px);
  border-color:rgba(11,15,20,.22);
  box-shadow: 0 16px 36px rgba(11,15,20,.06);
}
.cardTitle{
  margin:0 0 8px;
  font-size:16px;
  letter-spacing:-.02em;
  font-weight:950;
  color: rgba(11,15,20,.94);
}
.cardDesc{
  margin:0;
  color:var(--muted);
  font-size:13px;
  font-weight:650;
  line-height:1.45;
}

.btnRow{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}
.btnLight{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  font-weight:950;
  font-size:14px;
  border:1px solid rgba(11,15,20,.14);
  background:#fff;
  color:var(--ink);
  cursor:pointer;
}
.btnLight:hover{background:rgba(11,15,20,.03);}

.ctaSmall{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  font-weight:950;
  font-size:14px;
  border:1px solid rgba(255,138,0,.34);
  color:#111;
  background: linear-gradient(180deg, rgba(255,138,0,1), rgba(255,120,0,1));
}

@media (max-width: 980px){
  .card{grid-column: span 6;}
}
@media (max-width: 560px){
  .card{grid-column: span 12;}
}

/* Logo images inside logo tiles */
.clientLogo img{
  max-height:60px;
  max-width:200px;
  width:auto;
  height:auto;
  display:block;
  object-fit:contain;
  opacity:.85;
}
.partnerLogo img{
  max-height:50px;
  max-width:120px;
  width:auto;
  height:auto;
  display:block;
  object-fit:contain;
  opacity:.9;
  filter:none;
}

/* =========================================================
   COMPONENTS: ELEMENTS LIBRARY (FAQs / media split / forms)
========================================================= */

/* Screen-reader-only helper */
.srOnly{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* FAQs */
.faq{
  display:grid;
  gap:12px;
}
.faqItem{
  border:1px solid var(--line);
  border-radius: 18px;
  background:#fff;
  overflow:hidden;
}
.faqItem > summary{
  list-style:none;
  cursor:pointer;
  padding:16px 18px;
  font-weight:950;
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.faqItem > summary::-webkit-details-marker{display:none;}
.faqItem > summary:after{
  content:"+";
  font-weight:950;
  color:rgba(11,15,20,.65);
}
.faqItem[open] > summary{
  border-bottom: 1px solid var(--line-2);
}
.faqItem[open] > summary:after{content:"–";}
.faqBody{
  padding: 14px 18px 18px;
  color:rgba(11,15,20,.86);
}
.faqBody p{margin:0; line-height:1.6; font-weight:650; color:var(--muted);}

/* Media split */
.mediaSplit{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
  align-items:stretch;
}
.mediaCard{
  grid-column: span 5;
  border:1px solid var(--line);
  border-radius: 20px;
  background:#fff;
  padding:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 220px;
}
.mediaCard img{
  max-width: 100%;
  max-height: 160px;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}
.copyCard{
  grid-column: span 7;
  border:1px solid var(--line);
  border-radius: 20px;
  background:#fff;
  padding:22px;
}
.copyCard .kicker{
  margin:0 0 8px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(11,15,20,.70);
  font-weight:950;
}
.copyCard .title{
  margin:0 0 10px;
  font-size:22px;
  letter-spacing:-.02em;
  font-weight:950;
  line-height:1.15;
}
.copyCard p{
  margin:0 0 12px;
  color:var(--muted);
  font-weight:650;
  line-height:1.6;
  max-width: 70ch;
}
.copyCard p:last-of-type{margin-bottom:0;}
@media (max-width: 900px){
  .mediaCard{grid-column: span 12; min-height: 180px;}
  .copyCard{grid-column: span 12;}
}

/* Form (stacked, full-width). Scoped to form.formNeo + .formNeoGrid */
form.formNeo .formNeoGrid{
  display:grid !important;
  grid-template-columns: 1fr !important;
  gap:12px !important;
}
form.formNeo .field{
  display:block !important;
  margin:0 !important;
}
form.formNeo label{ display:none !important; } 
form.formNeo input,
form.formNeo textarea,
form.formNeo select{
  width:100% !important;
  max-width: 760px;
  display:block !important;
  font: inherit !important;
  outline:none !important;

  border-radius: 999px !important;
  border:1px solid rgba(11,15,20,.16) !important;
  background:#fff !important;
  color: var(--ink) !important;

  padding: 16px 20px !important;
}
form.formNeo input,
form.formNeo select{
  height:56px !important;
}
form.formNeo textarea{
  border-radius: 22px !important;
  min-height: 180px !important;
  resize: vertical !important;
}
form.formNeo input:focus,
form.formNeo textarea:focus{
  border-color: rgba(255,138,0,.70) !important;
  box-shadow: 0 0 0 4px rgba(255,138,0,.14) !important;
}
form.formNeo .formActions{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex-wrap:wrap !important;
  margin-top: 6px !important;
}
form.formNeo .formHint{
  color: var(--muted) !important;
  font-size:12px !important;
  font-weight:750 !important;
}
/* =========================================================
   PRODUCT TILES
========================================================= */

.productGrid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
}

.productTile{
  grid-column: span 3;
  border:1px solid var(--line);
  border-radius: 20px;
  padding:18px;
  background:#fff;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height: 140px;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.productTile:hover{
  transform: translateY(-2px);
  border-color: rgba(11,15,20,.22);
  box-shadow: 0 16px 36px rgba(11,15,20,.06);
}

.productName{
  font-weight:950;
  font-size:16px;
  letter-spacing:-.02em;
  color: rgba(11,15,20,.94);
  line-height:1.15;
}

.productMeta{
  color: var(--muted);
  font-weight:650;
  font-size:13px;
  line-height:1.45;
  margin-top:-2px;
  max-width: 44ch;
}

.productLink{
  margin-top:auto;
  color: var(--cta);
  font-weight:950;
  font-size:13px;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.productTile:hover .productLink{
  text-decoration: underline;
}

@media (max-width: 980px){
  .productTile{grid-column: span 6;}
}
@media (max-width: 560px){
  .productTile{grid-column: span 12;}
}

/* =========================================================
   COMPONENTS: Chips, Detail Cards, Constellation, Case Studies, Proof Hero
========================================================= */

/* Chips / bubbles */
.chipRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 14px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(11,15,20,.14);
  background: linear-gradient(180deg, rgba(11,15,20,.04), rgba(11,15,20,.02));
  font-weight:900;
  font-size:13px;
  letter-spacing:-.01em;
  color: rgba(11,15,20,.92);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
  white-space:nowrap;
}
.chip:after{
  content:"↗";
  font-weight:950;
  opacity:.8;
  transform: translateY(-1px);
}
.chip:hover{
  transform: translateY(-1px);
  border-color: rgba(11,15,20,.22);
  box-shadow: 0 14px 34px rgba(11,15,20,.06);
  background: linear-gradient(180deg, rgba(11,15,20,.06), rgba(11,15,20,.02));
}

/* Dark chips (for dark sections) */
.chip--dark{
  border:1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  color: rgba(255,255,255,.92);
}
.chip--dark:hover{
  border-color: rgba(255,255,255,.26);
  box-shadow: 0 18px 44px rgba(0,0,0,.38);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
}

/* DetailCard (card detail format + chips + sell copy + CTA row) */
.detailCard{
  grid-column: span 6;
  border:1px solid var(--line);
  border-radius: 22px;
  padding: 20px;
  background:#fff;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height: 220px;
  position:relative;
  overflow:hidden;
}
.detailCard:hover{
  transform: translateY(-2px);
  border-color: rgba(11,15,20,.22);
  box-shadow: 0 18px 44px rgba(11,15,20,.08);
}
.detailCard .kicker{
  margin:0 0 8px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(11,15,20,.70);
  font-weight:950;
}
.detailCard .title{
  margin:0 0 10px;
  font-size:26px;
  letter-spacing:-.03em;
  font-weight:950;
  line-height:1.05;
}
.detailCard .sell{
  margin:0;
  color:var(--muted);
  font-weight:650;
  font-size:14px;
  line-height:1.55;
  max-width: 64ch;
}
.detailCard .detailActions{
  margin-top: 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.detailCard .secondary{
  font-weight:950;
  color: rgba(11,15,20,.88);
  opacity:.9;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.detailCard .secondary:after{
  content:"→";
  font-weight:950;
  opacity:.85;
}
.detailCard .secondary:hover{opacity:1; text-decoration:underline;}

/* Make detail cards full width on small screens */
@media (max-width: 980px){
  .detailCard{grid-column: span 12;}
}

/* Constellation band (homepage module) */
.constellation{
  padding: 0;
  background:
    radial-gradient(1000px 360px at 15% 25%, rgba(255,138,0,.18), transparent 60%),
    radial-gradient(1000px 360px at 85% 15%, rgba(106,92,255,.18), transparent 60%),
    #0b0f14;
  color:#fff;
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.constellationInner{
  padding: 62px 0;
  display:grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 18px;
  align-items:center;
}
.constellation h2{
  margin:0;
  font-size: clamp(28px, 3vw, 44px);
  line-height:1.05;
  letter-spacing:-.04em;
  font-weight:950;
  max-width: 30ch;
}
.constellation p{
  margin:12px 0 0;
  color: rgba(255,255,255,.76);
  font-weight:650;
  max-width: 72ch;
}
.constellation .constellationActions{
  margin-top: 18px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}
.constellationMap{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(17,24,36,.60);
  border-radius: 26px;
  padding: 18px;
  box-shadow: 0 28px 70px rgba(0,0,0,.55);
  position:relative;
  overflow:hidden;
}
.constellationSvg{
  width:100%;
  height:auto;
  display:block;
}
.constellationNode{
  cursor:pointer;
}
.constellationNode circle{
  fill: rgba(255,255,255,.10);
  stroke: rgba(255,255,255,.92);
  stroke-width: 2.5;
}
.constellationNode text{
  fill: rgba(255,255,255,.92);
  font-weight:900;
  font-size: 12px;
  letter-spacing: -.01em;
}
.constellationNode:hover circle{
  fill: rgba(255,138,0,.22);
  stroke: rgba(255,138,0,1);
}
.constellationCenter circle{
  fill: rgba(255,138,0,.22);
  stroke: rgba(255,138,0,1);
  stroke-width: 3;
}
.constellationLines{
  stroke: rgba(255,255,255,.62);
  stroke-width: 3;
  fill:none;
  stroke-linecap: round;
}
@media (max-width: 980px){
  .constellationInner{grid-template-columns: 1fr; padding: 52px 0;}
}

/* Case Study Cards */
.csCard{
  border:1px solid var(--line);
  border-radius: 22px;
  padding:18px;
  background:#fff;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height: 240px;
}
.csCard:hover{
  transform: translateY(-2px);
  border-color: rgba(11,15,20,.22);
  box-shadow: 0 18px 44px rgba(11,15,20,.08);
}
.csCardTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.csTitle{
  margin:0;
  font-size:18px;
  letter-spacing:-.02em;
  font-weight:950;
  line-height:1.15;
}
.csMeta{
  margin-top:10px;
  display:grid;
  gap:10px;
}
.csLine{
  border-top:1px solid var(--line-2);
  padding-top:10px;
}
.csLabel{
  font-weight:950;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(11,15,20,.70);
  margin:0 0 6px;
}
.csText{
  margin:0;
  color:var(--muted);
  font-weight:650;
  font-size:14px;
  line-height:1.55;
}
.csResult{
  margin-top: 10px;
  border-radius: 18px;
  border:1px solid rgba(11,15,20,.12);
  background: linear-gradient(180deg, rgba(255,138,0,.08), rgba(255,138,0,.03));
  padding: 14px;
}
.csResult .big{
  font-weight:950;
  font-size:28px;
  letter-spacing:-.02em;
  margin:0;
}
.csResult .small{
  margin:6px 0 0;
  color:rgba(11,15,20,.72);
  font-weight:700;
  font-size:13px;
}

/* Card sizes (use with your existing .grid) */
.csCard--sm{grid-column: span 3; min-height: 220px;}
.csCard--md{grid-column: span 4;}
.csCard--lg{grid-column: span 6; min-height: 280px;}

@media (max-width: 980px){
  .csCard--sm, .csCard--md, .csCard--lg{grid-column: span 12;}
}

/* Proof Hero */
.proofHero{
  position:relative;
  color:#fff;
  overflow:hidden;
  background:
    radial-gradient(1100px 420px at 20% 0%, rgba(255,138,0,.16), transparent 60%),
    radial-gradient(1100px 420px at 80% 10%, rgba(106,92,255,.16), transparent 60%),
    #05070c;
}
.proofHero:before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--bg, none);
  background-size: cover;
  background-position: center;
  opacity: .38;
  filter: saturate(.9) contrast(1.05);
}
.proofHero:after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(5,7,12,.86), rgba(5,7,12,.62) 45%, rgba(5,7,12,.86));
}
.proofHeroInner{
  position:relative;
  padding: 74px 0 60px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  align-items:center;
}
.proofHero h1{
  margin:0;
  font-size: clamp(34px, 4.4vw, 64px);
  line-height:1.02;
  letter-spacing:-.05em;
  font-weight:950;
}
.proofHero .sub{
  margin:10px 0 0;
  color: rgba(255,255,255,.82);
  font-weight:650;
  font-size:16px;
  max-width: 62ch;
}
.proofTiles{
  display:grid;
  gap:12px;
}
.proofTile{
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  border-radius: 18px;
  padding: 16px 18px;
  backdrop-filter: blur(10px);
}
.proofValue{
  margin:0;
  font-weight:950;
  font-size:34px;
  letter-spacing:-.02em;
}
.proofLabel{
  margin:6px 0 0;
  color: rgba(255,255,255,.78);
  font-weight:700;
  font-size:13px;
  line-height:1.4;
}
@media (max-width: 980px){
  .proofHeroInner{grid-template-columns: 1fr; padding: 64px 0 54px;}
}
/* --- Constellation: --- */
.constellationMap{
  background: #000; /* pure black like screenshot 2 */
  border: 0;
  box-shadow: none;
  border-radius: 28px;
}

.constellationLines{
  stroke: rgba(255,255,255,.92);
  stroke-width: 6;              
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 1;
}

/* Outer nodes: hollow ring */
.constellationNode circle{
  fill: transparent;           
  stroke: rgba(255,255,255,.95);
  stroke-width: 6;
}

/* Center node */
.constellationCenter circle{
  fill: transparent;
  stroke: rgba(255,138,0,1);
  stroke-width: 7;
}
.constellationCenterDot{
  fill: rgba(255,138,0,1);
  stroke: none;
}

/* Labels */
.constellationNode text{
  fill: rgba(255,255,255,.95);
  font-weight: 900;
  font-size: 14px;
}

/* Hover */
.constellationNode:hover circle{
  stroke: rgba(255,255,255,1);
}
.constellationCenter:hover circle{
  stroke: rgba(255,160,30,1);
}
/* --- Case study card layout --- */
.csCard{
  position:relative;
  padding:18px 18px 72px;
}

.csHeading{
  display:grid;
  gap:6px;
  margin-bottom:10px;
}
.csClient{
  font-weight:950;
  font-size:14px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(11,15,20,.62);
}
.csProject{
  margin:0;
  font-size:18px;
  letter-spacing:-.02em;
  font-weight:950;
  line-height:1.15;
}

.csFooter{
  position:absolute;
  left:18px;
  right:18px;
  bottom:16px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}

/* Chips bottom-right */
.csFooter .chipRow{
  margin-top:0;
  justify-content:flex-end;
}

/* Results label */
.csResult .label{
  margin:0 0 8px;
  font-weight:950;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(11,15,20,.62);
}

/* Optional link on bottom-left */
.csReadMore{
  font-weight:950;
  font-size:13px;
  color: var(--cta);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.csReadMore:hover{text-decoration:underline;}

/* Keep the module from breaking the grid layout */
.constellationMap{
  overflow: hidden;              
}

.constellationSvg{
  display:block;
  width:100%;
  height:auto;
  transform: scale(.92);
  transform-origin: center;
}

/* Constellation image */
.constellationMap{
  background:#000;
  border-radius:28px;
  overflow:hidden;           
  padding:18px;               
  border:0;
  box-shadow:none;
  display:flex;
  align-items:center;
  justify-content:center;
}

.constellationImg{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  aspect-ratio: 780 / 520;   
}

/* Detail cards */
.detailCard .secondary{
  color: var(--cta);
  font-weight: 950;
  font-size: 13px;
  opacity: 1;
}

.detailCard .secondary:after{
  content:"→";
  font-weight: 950;
  opacity: .85;
}

.detailCard .secondary:hover{
  text-decoration: underline;
}

/* Case studies */
.csClient{
  font-weight: 950;
  font-size: 12px;          
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(11,15,20,.70);
}

/* =========================================================
   Detail cards + Case study cards consistency
   - Orange inline links on detail cards
   - Case study brand labels stronger
   - Read more + chips ordering support
========================================================= */


/* ----------  Detail cards ---------- */

.detailCard .secondary{
  color: var(--cta);
  font-weight: 950;
  font-size: 13px;
  opacity: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.detailCard .secondary:after{
  content:"→";
  font-weight:950;
  opacity:.85;
}

.detailCard .secondary:hover{
  text-decoration: underline;
}


/* ----------  Case study cards ---------- */

.csCard .csClient{
  font-weight: 950;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(11,15,20,.65);
  margin-bottom: 6px;
  display:block;
}


/* ---------- Case study footer ordering ---------- */

.csFooter{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}

.csFooter .csReadMore{
  order:1;
}

.csFooter .chipRow{
  order:2;
}


/* ---------- Read more ---------- */

.csReadMore{
  font-weight:950;
  font-size:13px;
  color: var(--cta);
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.csReadMore:after{
  content:"→";
  font-weight:950;
  opacity:.85;
}

.csReadMore:hover{
  text-decoration: underline;
}

/* Case studies */
.csCard .csClient{
  font-size: 12px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  font-weight: 950 !important;
  color: rgba(11,15,20,.70) !important;
  margin: 0 0 10px !important;
  display: block !important;
  line-height: 1.2 !important;
}

/* ---------- Case study hero ---------- */

.proofHero,
.caseHero,
.caseStudyHero {
  position: relative;
  overflow: hidden;
}

/* background image layer */
.proofHero::before,
.caseHero::before,
.caseStudyHero::before {
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--bg, none);
  background-size: cover;
  background-position: center;
  opacity:.35;
  z-index:0;
  pointer-events:none;   
}

/* dark gradient layer */
.proofHero::after,
.caseHero::after,
.caseStudyHero::after {
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      rgba(5,7,12,.88),
      rgba(5,7,12,.55) 45%,
      rgba(5,7,12,.88)
    );
  z-index:1;
  pointer-events:none;   
}

/* content always above background */
.proofHero > *,
.caseHero > *,
.caseStudyHero > * {
  position: relative;
  z-index: 2;
}

/* =========================================================
   WEBINARS + PODCAST LISTING (built on .mediaSplit)
========================================================= */

.mediaList{
  display:grid;
  gap:14px;
}

/* One item existing .mediaSplit layout */
.mediaItem{
  border:1px solid var(--line);
  border-radius: 22px;
  background:#fff;
  overflow:hidden;
}

/* Wrap existing .mediaSplit */
.mediaItem .mediaSplit{
  padding: 14px;
}

/* Meta row (date + tags + badge) */
.mediaMetaRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin: 0 0 10px;
  color: var(--muted);
  font-weight: 750;
  font-size: 13px;
}

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius:999px;
  border:1px solid rgba(11,15,20,.14);
  background: rgba(11,15,20,.03);
  color: rgba(11,15,20,.78);
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.badge--live{
  border-color: rgba(255,138,0,.30);
  background: rgba(255,138,0,.10);
  color: rgba(11,15,20,.90);
}

.badge--done{
  border-color: rgba(11,15,20,.10);
  background: rgba(11,15,20,.02);
  color: rgba(11,15,20,.58);
}

/* Action row */
.mediaActions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  margin-top: 14px;
}

/* Spotify button variant */
.btnSpotify{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  font-weight:950;
  font-size:14px;
  border:1px solid rgba(11,15,20,.14);
  background:#fff;
  color: var(--ink);
  cursor:pointer;
  gap:10px;
}
.btnSpotify:hover{background:rgba(11,15,20,.03);}

/* Faded past webinars */
.mediaItem.isDone{
  opacity: .55;
  filter: grayscale(.15);
}
.mediaItem.isDone:hover{
  opacity: .72; /* still readable on hover */
  filter: none;
}

/* Optional: make thumbnail dim slightly when done */
.mediaItem.isDone .mediaCard img{
  opacity:.75;
}

/* =========================================================
   Clients marquee
========================================================= */

.clientsMarquee{
  margin-top: 14px;
  position: relative;
  border-top: 1px solid rgba(255,255,255,.10);
  padding-top: 14px;
}

/* fade edges */
.clientsMarquee .marqueeFade{
  pointer-events:none;
  position:absolute;
  inset: 14px 0 0 0;
  background:
    linear-gradient(90deg,
      rgba(7,9,15,1) 0%,
      rgba(7,9,15,0) 12%,
      rgba(7,9,15,0) 88%,
      rgba(7,9,15,1) 100%);
  z-index: 2;
  border-radius: 18px;
}

/* scrolling track */
.marqueeTrack{
  display:flex;
  gap: 34px;
  overflow:hidden;
  align-items:center;
  padding: 10px 4px;
  z-index: 1;
  position: relative;
}

/* loop animation */
.marqueeTrack{
  --speed: 28s;
}
.marqueeTrack > .marqueeGroup{
  display:flex;
  gap: 34px;
  align-items:center;
  flex: 0 0 auto;
  animation: marqueeScroll var(--speed) linear infinite;
}
.clientsMarquee:hover .marqueeGroup{
  animation-play-state: paused;
}

@keyframes marqueeScroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* logos — normalized size box */
.marqueeGroup img{
  height: 32px;                 
  max-height: 32px;
  max-width: 120px;             
  width: auto;

  object-fit: contain;
  display: block;

  opacity: 1;
  filter: grayscale(1) contrast(1.1);

  transition: filter .18s ease, transform .18s ease;
  image-rendering: -webkit-optimize-contrast;
}

.marqueeGroup img:hover{
  filter: none;
  transform: translateY(-1px);
}

/* accessibility */
@media (prefers-reduced-motion: reduce){
  .marqueeGroup{ animation: none !important; }
}

/* =========================================================
   Content Block Service Spec
========================================================= */

.specBlock{
  display:grid;
  grid-template-columns: 1.05fr 2fr;
  gap: 44px;
  align-items:start;
}

/* Left column (big title) */
.specLeft{
  position: sticky;           
  top: 92px;                   
  align-self:start;
}

.specLeft .eyebrow{
  margin:0 0 10px;
  font-weight:950;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(11,15,20,.65);
}

.specLeft h2{
  margin:0;
  font-size: clamp(38px, 4.2vw, 64px);
  line-height:1.02;
  letter-spacing:-.05em;
  font-weight:950;
}

.specLeft p{
  margin: 14px 0 0;
  max-width: 44ch;
  color: var(--muted);
  font-weight:650;
  font-size:15px;
  line-height:1.6;
}

/* Right column grid */
.specRight{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px 44px;
}

.specItem h3{
  margin:0 0 8px;
  font-size:22px;
  letter-spacing:-.02em;
  font-weight:950;
  line-height:1.15;
}

.specItem p{
  margin:0;
  color: var(--muted);
  font-weight:650;
  font-size:14px;
  line-height:1.6;
  max-width: 52ch;
}

/* Optional: subtle separators */
.specRight .specItem{
  padding-top: 2px;
}

/* Responsive */
@media (max-width: 980px){
  .specBlock{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .specLeft{
    position: static;
    top:auto;
  }
  .specRight{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .specLeft h2{
    font-size: clamp(30px, 6vw, 44px);
  }
}

.specLink{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  font-weight:950;
  font-size:13px;
  color: var(--cta);
}

.specLink:hover{
  text-decoration: underline;
}

/* ===== Awards Strip ===== */

.awardsStrip--clean{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;

  padding: 16px 0; 
}

.awardsStrip--clean img{
  display: block;        
  height: 60px;
  max-width: 220px;
  width: auto;

  opacity: 1;
  filter: grayscale(0) contrast(1.1);

  transition: filter .18s ease, opacity .18s ease, transform .18s ease;
}

.awardsStrip--clean img:hover{
  opacity: 1;
  filter: grayscale(0) contrast(1);
  transform: translateY(-1px);
}


/* Stats row */
.caseStats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 18px 0 24px;
}

.caseStat {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  background: #fff;
}

.caseStat .big {
  font-size: 28px;
  font-weight: 900;
  margin: 0 0 4px;
}

.caseStat .small {
  margin: 0;
  color: var(--muted);
}

.caseStat span {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.6;
}

/* Lite cases */
.caseLiteGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.caseLite {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  background: #fff;
}

.caseLite h3 {
  margin: 0 0 6px;
  font-size: 20px;
}

.caseLite p {
  margin: 0;
  color: var(--muted);
}

.caseLite span {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  opacity: 0.6;
}


/* Grid */
.statGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 24px;
}

/* Card */
.statCard {
  border-radius: 18px;
  padding: 20px;
}

/* CLEAN version (what you want) */
.statCard--clean {
  background: #fff;
  border: 1px solid var(--line);
}

/* Text */
.statCard .kicker {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 950;
  color: rgba(11,15,20,.6);
}

.statBig {
  margin: 0 0 6px;
  font-size: 42px;
  font-weight: 950;
  line-height: 1;
}

/* Colour variants (keep your brand feel) */
.statBig--orange { color: #ff8a00; }
.statBig--green  { color: #1ed760; }
.statBig--pink   { color: #ff3ea5; }
.statBig--purple { color: #6c63ff; }

.statText {
  margin: 0;
  color: var(--muted);
  font-weight: 650;
}

.statMeta {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  opacity: 0.6;
}

/* ===== Awards List (On Rows) ===== */

.awardsList{
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 18px;
}

/* each row */
.awardRow{
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: 18px;

  padding: 18px 0;
  border-top: 1px solid var(--line);
}

/* remove top border from first */
.awardRow:first-child{
  border-top: none;
}

/* logo column */
.awardLogo{
  display: flex;
  align-items: center;
  justify-content: center;
}

.awardLogo img{
  max-height: 120px;
  max-width: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* content column */
.awardContent{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* title */
.awardTitle{
  margin: 0;
  font-weight: 950;
  font-size: 16px;
  letter-spacing: -0.01em;
}

/* meta / description */
.awardMeta{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
}

/* ===== Mobile ===== */
@media (max-width: 720px){

  .awardRow{
    grid-template-columns: 1fr;
    gap: 12px;
    text-align: left;
  }

  .awardLogo{
    justify-content: flex-start;
  }

}

/* =========================================================
   ORBITAL SYSTEM
========================================================= */

.orbitalList{
  display:flex;
  flex-direction:column;
  gap:34px;
}

.orbitalItem{
  padding-bottom:30px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.orbitalItem:last-child{
  border-bottom:none;
  padding-bottom:0;
}

.orbitalTop{
  display:flex;
  align-items:baseline;
  gap:14px;
  margin-bottom:12px;
}

.orbitalTop span{
  font-size:11px;
  font-weight:900;
  letter-spacing:.18em;
  color:rgba(255,255,255,.34);
  line-height:1;
  min-width:26px;
}

.orbitalTop h3{
  margin:0;
  font-size:30px;
  line-height:1;
  letter-spacing:-.04em;
  color:#fff;
  font-weight:900;
}

.orbitalItem p{
  margin:0;
  color:rgba(255,255,255,.72);
  font-size:16px;
  line-height:1.7;
  max-width:54ch;
}

/* =========================================================
   COMPOUND BAND
========================================================= */

.compoundBand{
  position:relative;
  overflow:hidden;

  padding:120px 0;

  background:
    radial-gradient(
      1200px 420px at 10% 0%,
      rgba(255,138,0,.08),
      transparent 60%
    ),
    radial-gradient(
      1200px 420px at 90% 20%,
      rgba(106,92,255,.08),
      transparent 60%
    ),
    #07090f;

  border-top:1px solid rgba(255,255,255,.06);
}

/* subtle orbital atmosphere */
.compoundBand::after{
  content:"";
  position:absolute;

  width:1200px;
  height:1200px;

  border:1px solid rgba(255,255,255,.04);
  border-radius:50%;

  right:-700px;
  bottom:-980px;
}

/* =========================================================
   INTRO
========================================================= */

.compoundIntro{
  position:relative;
  z-index:2;

  margin-bottom:72px;
  width:100%;
}

.compoundEyebrow{
  margin:0 0 14px;

  color:rgba(255,255,255,.54);

  font-size:11px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.compoundIntro h2{
  margin:0 0 18px;

  color:#fff;

  font-size:clamp(44px,7vw,50px);
  line-height:.92;
  letter-spacing:-.07em;
  font-weight:650;

  max-width:none;
}
.compoundIntro p{
  margin:0;

  color:rgba(255,255,255,.72);

  font-size:18px;
  line-height:1.75;

  max-width:58ch;
}

/* =========================================================
   GRID
========================================================= */

.compoundGrid{
  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:34px;
}

/* =========================================================
   CARD
========================================================= */

.compoundCard{
  position:relative;
  padding-top:18px;
}

/* subtle top divider */
.compoundCard::before{
  content:"";
  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:1px;

  background:rgba(255,255,255,.08);
}

.compoundCard span{
  display:block;

  margin:0 0 18px;

  color:rgba(255,255,255,.34);

  font-size:11px;
  font-weight:900;
  letter-spacing:.18em;
}

.compoundCard h3{
  margin:0 0 18px;

  color:#fff;

  font-size:clamp(24px,2vw,24px);
  line-height:.95;
  letter-spacing:-.06em;
  font-weight:800;

  min-height:4.2em;

  display:flex;
  align-items:flex-start;
}

.compoundCard p{
  margin:0;

  color:rgba(255,255,255,.72);

  font-size:16px;
  line-height:1.75;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width:1200px){

  .compoundGrid{
    grid-template-columns:repeat(2,1fr);
    gap:42px;
  }

}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width:720px){

  .compoundBand{
    padding:90px 0;
  }

  .compoundGrid{
    grid-template-columns:1fr;
    gap:42px;
  }

  .compoundIntro{
    margin-bottom:54px;
  }

  .compoundIntro h2{
    max-width:12ch;
    font-size:56px;
  }

  .compoundIntro p,
  .compoundCard p{
    font-size:16px;
  }

}

/* =========================================================
   CONSTELLATION MANIFESTO
========================================================= */

.constellationManifesto{
  margin:0;

  max-width:13ch;

  color:#fff;

  font-size:clamp(54px,6vw,108px);
  line-height:.96;
  letter-spacing:-.07em;
  font-weight:950;
}


/* North Star Overview */


.northStarIntro{
  margin:0 0 54px;
}

.northStarEyebrow{
  margin:0 0 18px;
  color:rgba(11,15,20,.52);
  font-size:12px;
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.northStarIntro h2{
  margin:0;
  font-size:clamp(34px,4vw,52px);
  line-height:1.02;
  letter-spacing:-.05em;
  font-weight:950;
}

.northStarLead{
  margin:24px 0 0;
  line-height:1.3;
  letter-spacing:-.03em;
  font-weight:700;
  color:rgba(11,15,20,.92);
}

.northStarText{
  margin:18px 0 0;
  color:var(--muted);
  font-size:17px;
  line-height:1.7;
  font-weight:650;
}

.northStarIntro .btnGhost{
  color: var(--ink);
  border: 1px solid rgba(11,15,20,.16);
  background: #fff;
}

.northStarIntro .btnGhost:hover{
  background: rgba(11,15,20,.04);
}