.groups-page{background:var(--cream)}
.groups-hero{overflow:hidden;position:relative;border-bottom:1px solid #dfe3d3}
.groups-hero-inner{height:630px;display:grid;grid-template-columns:minmax(0,1fr) minmax(470px,.94fr);position:relative;align-items:stretch}
.groups-hero-copy{align-self:center;padding:112px 80px 38px 0;position:relative;z-index:3}
.groups-hero-copy .eyebrow{color:#647258;margin-bottom:20px}
.groups-hero-copy h1{font-size:clamp(48px,4.2vw,68px);max-width:590px;margin-bottom:24px}
.groups-hero-text{font-size:14px;line-height:1.8;max-width:500px;margin-bottom:31px}
.groups-hero-photo{position:relative;margin-right:calc((min(var(--container),100vw - 100px) - 100vw)/2);min-width:0;overflow:hidden}
.groups-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.groups-hero-mark{position:absolute;z-index:4;width:190px;height:475px;left:49%;top:54%;transform:translate(-50%,-50%);color:#c8ceb0;opacity:.78;pointer-events:none}
.groups-hero-mark img{width:100%;height:100%;object-fit:contain}
.groups-hero-benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;max-width:520px}
.groups-hero-benefits article{text-align:center;display:flex;flex-direction:column;align-items:center;gap:9px;min-width:0}
.groups-round-icon{width:50px;height:50px;border:1px solid #6b806877;border-radius:50%;display:grid;place-items:center}
.groups-round-icon .icon{width:29px;height:29px}
.groups-hero-benefits strong{font-size:9px;line-height:1.35;text-transform:uppercase;letter-spacing:.02em}
.groups-path{background:#f8f7f1;padding:72px 0 68px}
.groups-path-inner{display:grid;grid-template-columns:270px 1fr;gap:42px;align-items:center}
.groups-path-heading{padding-right:22px}
.groups-path-heading .eyebrow{margin-bottom:16px;color:#68745e}
.groups-path-heading h2{font-size:36px;margin-bottom:22px}
.groups-path-heading>p:last-child{font-size:12px;line-height:1.75;color:#687168}
.groups-step-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;align-items:stretch}
.groups-step{min-width:0;min-height:240px;text-align:center;padding:30px 18px 0;border-left:1px solid #dfe2d6;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.groups-step-number{display:grid;place-items:center;margin:0 auto 11px;width:30px;height:30px;border-radius:50%;background:var(--green);color:#fff;font-size:12px;font-weight:700}
.groups-step-label{min-height:34px;font-size:9px;line-height:1.4;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:13px}
.groups-step-icon{display:grid;place-items:center;width:50px;height:50px;margin:0 auto 14px;color:#70806a}
.groups-step-icon .icon{width:40px;height:40px;stroke-width:1.2}
.groups-step>p:last-child{font-size:9px;line-height:1.65;color:#687168;margin:0}
.groups-why{background:#e9eadf;padding:68px 0}
.groups-why-inner{display:grid;grid-template-columns:.82fr 1.18fr;gap:70px;align-items:center}
.groups-why-copy .eyebrow{margin-bottom:13px;color:#66735c}
.groups-why-copy h2{font-size:38px;margin-bottom:18px;max-width:490px}
.groups-why-copy>p:not(.eyebrow){font-size:13px;line-height:1.75;margin-bottom:22px;max-width:520px}
.groups-why-copy ul{padding:0;margin:0;list-style:none;display:grid;gap:9px}
.groups-why-copy li{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600}
.groups-why-copy li .icon{width:17px;height:17px}
.groups-why-photo{height:405px;border-radius:25px;overflow:hidden}
.groups-why-photo img{width:100%;height:100%;object-fit:cover}
.groups-audience{background:#faf9f4;padding:66px 0 70px}
.groups-audience header{margin-bottom:39px}
.groups-audience header .eyebrow{margin-bottom:10px;color:#65715b}
.groups-audience h2{font-size:38px;margin:0}
.groups-audience-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px}
.groups-audience-grid article{display:grid;grid-template-columns:58px 1fr;gap:17px;align-items:start}
.groups-audience-grid article>span{width:58px;height:58px;display:grid;place-items:center;color:#6d8170}
.groups-audience-grid .icon{width:47px;height:47px;stroke-width:1.1}
.groups-audience-grid h3{font-family:var(--sans);font-weight:700;letter-spacing:0;font-size:11px;line-height:1.45;margin:4px 0 7px}
.groups-audience-grid p{font-size:9px;line-height:1.65;color:#697269;margin:0}
.groups-cta{background:linear-gradient(100deg,#244c30,#315f3d);color:#f4f4e9;overflow:hidden}
.groups-cta-inner{min-height:170px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;position:relative}
.groups-cta-inner>img{position:absolute;left:-70px;width:78px;height:140px;object-fit:contain;filter:brightness(0) invert(1);opacity:.16;pointer-events:none}
.groups-cta-inner>div,.groups-cta-button{position:relative;z-index:1}
.groups-cta h2{font-size:34px;margin:0 0 9px;max-width:680px}
.groups-cta p{font-size:12px;line-height:1.7;color:#dbe4d7;margin:0;max-width:650px}
.groups-cta-button{background:#f2f0df;color:var(--green-dark);border-color:#f2f0df;white-space:nowrap}
.groups-cta-button:hover{color:#fff;border-color:var(--green-dark)}
@media(max-width:1100px){.groups-hero-copy{padding-right:45px}.groups-hero-inner{grid-template-columns:1fr .9fr}.groups-hero-mark{left:51%}.groups-path-inner{grid-template-columns:1fr}.groups-path-heading{max-width:620px}.groups-why-inner{gap:40px}.groups-audience-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:850px){.groups-hero-inner{height:auto;grid-template-columns:1fr}.groups-hero-copy{padding:120px 0 52px}.groups-hero-photo{height:470px;margin:0 -50px}.groups-hero-mark{left:auto;right:18px;top:520px;width:130px;height:330px}.groups-step-grid{grid-template-columns:repeat(2,1fr);gap:28px 0}.groups-step:last-child{grid-column:1/-1;max-width:50%;justify-self:center}.groups-why-inner{grid-template-columns:1fr}.groups-why-photo{order:-1}.groups-cta-inner{grid-template-columns:1fr}.groups-cta-button{grid-column:1;justify-self:start;margin-bottom:28px}}
@media(max-width:700px){.groups-hero-copy{padding-top:112px}.groups-hero-copy h1{font-size:45px}.groups-hero-benefits{grid-template-columns:repeat(2,1fr);gap:22px}.groups-hero-photo{height:380px;margin:0 -20px}.groups-hero-mark{top:570px;right:-10px}.groups-path{padding:54px 0}.groups-path-heading h2,.groups-why-copy h2,.groups-audience h2{font-size:32px}.groups-step-grid{grid-template-columns:1fr}.groups-step,.groups-step:last-child{max-width:none;grid-column:auto;border-left:0;border-top:1px solid #dfe2d6;padding:28px 10px}.groups-step-number{margin-top:-43px}.groups-why{padding:54px 0}.groups-why-photo{height:280px}.groups-audience-grid{grid-template-columns:1fr;gap:25px}.groups-cta-inner{grid-template-columns:1fr;gap:17px}.groups-cta-inner>img{width:50px}.groups-cta h2{font-size:28px}.groups-cta-button{width:100%}}

/* Match the horizontal hero system used on Pricing and the other pages. */
@media(min-width:851px){
  .groups-hero{background:#f5f2e8}
  .groups-hero-copy{align-self:center;padding:0 15px 0 0}
  .groups-hero-copy .eyebrow{font-size:12px;margin:0 0 23px;color:var(--green-dark)}
  .groups-hero-copy h1{font-size:clamp(48px,4.8vw,68px);line-height:1.12;max-width:none;margin:0 0 22px}
  .groups-hero-text{font-size:13px;line-height:1.75;max-width:440px;margin-bottom:31px}
  .groups-hero-mark{position:static;display:grid;place-items:center;width:auto!important;height:auto!important;left:auto;top:auto;transform:none;opacity:1}
}
@media(min-width:981px){.groups-hero-inner{grid-template-columns:.85fr 210px 1.25fr}}
@media(min-width:851px) and (max-width:980px){.groups-hero-inner{grid-template-columns:1fr 115px 1fr}}

/* Večja tipografija razdelka Kako poteka vadba. */
.groups-path-heading .eyebrow{font-size:12px}
.groups-path-heading h2{font-size:40px}
.groups-path-heading>p:last-child{font-size:14px;line-height:1.75}
.groups-step-number{width:34px;height:34px;font-size:14px}
.groups-step-label{font-size:11px;line-height:1.45}
.groups-step>p:last-child{font-size:12px;line-height:1.65}
@media(max-width:700px){
  .groups-path-heading h2{font-size:34px}
  .groups-step-label{font-size:12px}
  .groups-step>p:last-child{font-size:13px}
}

/* Editorial split layout matching the reference content banner. */
.groups-why{padding:0;overflow:hidden}
.groups-why-inner{min-height:510px;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:0;align-items:stretch}
.groups-why-copy{align-self:center;padding:70px 76px 70px 0}
.groups-why-photo{height:auto;min-width:0;margin-right:calc((min(var(--container),100vw - 100px) - 100vw)/2);border-radius:0;position:relative}
.groups-why-photo::before{content:"";position:absolute;z-index:1;inset:0 auto 0 0;width:clamp(180px,14vw,300px);background:linear-gradient(90deg,#f0eee5 0%,rgba(240,238,229,.96) 16%,rgba(240,238,229,.82) 34%,rgba(240,238,229,.58) 55%,rgba(240,238,229,.32) 74%,rgba(240,238,229,.12) 90%,rgba(240,238,229,0) 100%);pointer-events:none}

@media(max-width:1100px){
  .groups-why-inner{gap:0}
}

@media(max-width:850px){
  .groups-why-inner{min-height:0;grid-template-columns:1fr}
  .groups-why-copy{padding:58px 0}
  .groups-why-photo{order:0;height:390px;min-height:0;margin:0 -32px}
  .groups-why-photo::before{inset:0 0 auto;width:auto;height:145px;background:linear-gradient(180deg,#f0eee5 0%,rgba(240,238,229,.9) 22%,rgba(240,238,229,.55) 52%,rgba(240,238,229,.18) 78%,rgba(240,238,229,0) 100%)}
}

@media(max-width:700px){
  .groups-why{padding:0}
  .groups-why-copy{padding:48px 0}
  .groups-why-photo{height:320px;margin:0 -20px}
}