:root{
  --bg:#f3f3f3;
  --text:#0c0c0d;
  --light:#dedee2;
  --cyan:#4ca8bd;
  --teal:#31bbb7;
  --coral:#cf846a;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;min-width:320px}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Avenir Next",Avenir,Montserrat,"Helvetica Neue",Arial,sans-serif;
}

.one-group-page{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  background:var(--bg);
  isolation:isolate;
}

.shell{
  position:relative;
  z-index:2;
  width:min(1180px, calc(100% - 72px));
  min-height:100svh;
  margin:0 auto;
  padding:clamp(48px,6vw,88px) 0 clamp(56px,7vw,86px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.hero{
  width:min(760px,100%);
  margin:0 auto 46px;
  text-align:center;
}

.logo{
  display:block;
  width:min(100%,620px);
  height:auto;
  margin:0 auto;
}

/* EXACTLY EQUAL COLUMNS */
.companies{
  width:min(100%,1020px);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  column-gap:54px;
  align-items:start;
}

.company{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  min-width:0;
  color:inherit;
  text-decoration:none;
  text-align:center;
  padding:0;
  background:transparent;
}

/* No card/box hover — keeps all 3 visually identical */
.company:hover,
.company:focus-visible{
  background:transparent;
  box-shadow:none;
  outline:none;
}

.text-block{
  width:100%;
  display:grid;
  grid-template-rows:56px 24px 52px;
  align-items:start;
  justify-items:center;
}

.company h2{
  width:100%;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(2rem,2.65vw,2.72rem);
  line-height:1;
  font-weight:700;
  text-align:center;
  white-space:nowrap;
}

.centacc h2{color:var(--cyan)}
.empowering h2{color:var(--coral)}
.finx h2{color:var(--teal)}

.company h3{
  width:100%;
  margin:0;
  font-size:.94rem;
  line-height:1.2;
  font-weight:700;
  text-align:center;
}

.company p{
  width:100%;
  margin:0;
  font-size:.98rem;
  line-height:1.35;
  font-weight:400;
  text-align:center;
}

/* All QR codes get the exact same box and centre point */
.qr-wrap{
  width:184px;
  height:184px;
  margin:22px auto 0;
  display:flex;
  align-items:center;
  justify-content:center;
}

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

/* Decorative side elements only */
.decor{
  position:absolute;
  z-index:0;
  pointer-events:none;
  border-radius:999px;
  transform:rotate(-45deg);
}

.pill{height:54px}
.fill.light{background:var(--light)}
.fill.teal{background:var(--teal)}
.fill.coral{background:var(--coral)}
.outline.teal{border:3px solid var(--teal)}
.outline.coral{border:3px solid var(--coral)}

.l1{width:410px;top:18px;left:-145px}
.l2{width:290px;top:92px;left:-24px}
.l3{width:230px;top:70px;left:136px}
.l4{width:150px;top:430px;left:-104px}
.l5{width:190px;top:500px;left:-54px}
.l6{width:245px;top:575px;left:-32px}
.l7{width:330px;bottom:22px;left:-104px}
.l8{width:170px;bottom:104px;left:124px}

.r1{width:210px;top:18px;right:-36px}
.r2{width:285px;top:102px;right:-94px}
.r3{width:350px;top:282px;right:-144px}
.r4{width:160px;top:530px;right:-60px}
.r5{width:290px;top:610px;right:12px}
.r6{width:285px;bottom:84px;right:-104px}
.r7{width:235px;bottom:28px;right:-78px}
.r8{width:175px;bottom:146px;right:110px}

.side-dot{
  position:absolute;
  z-index:0;
  border-radius:50%;
  pointer-events:none;
}
.side-dot.teal{background:var(--teal)}
.side-dot.coral{background:var(--coral)}
.side-dot.light{background:var(--light)}

.d1{width:18px;height:18px;top:218px;left:18px}
.d2{width:24px;height:24px;top:352px;right:28px}
.d3{width:44px;height:44px;bottom:260px;left:38px}
.d4{width:16px;height:16px;bottom:120px;right:46px}

@media (max-width:980px){
  .shell{
    width:min(860px,calc(100% - 40px));
  }
  .hero{
    width:min(620px,100%);
    margin-bottom:38px;
  }
  .logo{
    width:min(100%,520px);
  }
  .companies{
    width:min(100%,820px);
    column-gap:28px;
  }
  .company h2{
    font-size:clamp(1.7rem,3vw,2.15rem);
  }
  .text-block{
    grid-template-rows:50px 22px 50px;
  }
  .company h3{font-size:.85rem}
  .company p{font-size:.9rem}
  .qr-wrap{
    width:156px;
    height:156px;
  }
}

/* MOBILE: still centred, stacked, no left/right split */
@media (max-width:700px){
  .shell{
    width:min(100% - 24px,500px);
    min-height:auto;
    padding:32px 0 42px;
    justify-content:flex-start;
  }

  .hero{
    width:min(100%,340px);
    margin-bottom:28px;
  }

  .logo{
    width:min(100%,330px);
  }

  .companies{
    grid-template-columns:1fr;
    gap:20px;
    width:100%;
  }

  .company{
    width:100%;
    padding:20px 16px 22px;
    border:1px solid rgba(0,0,0,.05);
    border-radius:20px;
    background:rgba(255,255,255,.76);
  }

  .text-block{
    grid-template-rows:auto auto auto;
    row-gap:8px;
  }

  .company h2{
    font-size:1.72rem;
    white-space:normal;
  }

  .company h3{
    font-size:.8rem;
  }

  .company p{
    font-size:.82rem;
  }

  .company p br{
    display:none;
  }

  .qr-wrap{
    width:118px;
    height:118px;
    margin-top:16px;
  }

  /* side decoration stays at edges */
  .l1{width:220px;height:42px;top:10px;left:-148px}
  .l2{width:150px;height:36px;top:50px;left:-86px}
  .l3{width:110px;height:34px;top:36px;left:18px;border-width:2px}
  .l4{display:none}
  .l5{width:140px;height:38px;top:300px;left:-118px}
  .l6{width:160px;height:40px;top:510px;left:-122px;border-width:2px}
  .l7{width:210px;height:42px;bottom:14px;left:-150px}
  .l8{width:100px;height:30px;bottom:104px;left:8px;border-width:2px}

  .r1{width:120px;height:36px;top:16px;right:-72px}
  .r2{width:160px;height:40px;top:90px;right:-136px;border-width:2px}
  .r3{width:185px;height:42px;top:270px;right:-152px}
  .r4{display:none}
  .r5{width:165px;height:40px;top:640px;right:-132px;border-width:2px}
  .r6{width:195px;height:42px;bottom:104px;right:-142px}
  .r7{width:145px;height:36px;bottom:26px;right:-124px}
  .r8{width:112px;height:32px;bottom:176px;right:6px;border-width:2px}

  .d1{width:12px;height:12px;top:126px;left:16px}
  .d2{width:14px;height:14px;top:176px;right:18px}
  .d3{width:20px;height:20px;bottom:220px;left:14px}
  .d4{width:12px;height:12px;bottom:72px;right:42px}
}

@media (max-width:380px){
  .shell{width:calc(100% - 18px)}
  .qr-wrap{width:106px;height:106px}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto}
}