/* ============================================================================
   CGS - Careers - Animation v1

   Section wrapper, intro and colour schemes follow the quiz v3 module so the two
   sit together on a page without a seam. Cards read the theme's :root typography
   tokens (--ff-base, --fs-base, --fw-base, --ff-h3 ...) with hard fallbacks, so
   they track the theme automatically and still render sanely without it.
   Theme breakpoints: 1199 / 991 / 767 (tablet) / 575 (mobile).
   ============================================================================ */
.cgsi-careers{
 /* colour - dark scheme (theme tokens, prototype values as fallback) */
 --card:var(--clr-base-dk,#1E2430);--line:rgba(var(--clr-base-lt-rgb,255,255,255),.10);
 --line-hover:rgba(var(--clr-primary-rgb,118,60,219),.55);
 --text:var(--clr-text-dk,#EEF1F8);--muted:#93a0b8;--soft:#c7cee0;
 --accent:var(--clr-primary,#763CDB);--accent2:#9a6bf0;
 --shadow:0 10px 30px rgba(3,11,27,.28);

 /* typography: theme tokens only, each with the theme's own default as fallback.
    card heading -> h3 set | blurb -> paragraph set | roles -> list (ul) set
    roles heading -> h6 set | link -> button set | disclaimer -> footer legal size */
 --c-ff-base:var(--ff-base,"Poppins",Arial);
 --c-ff-head:var(--ff-h3,var(--ff-base,"Poppins",Arial));--c-fw-head:var(--fw-h3,400);--c-fs-head:var(--fs-h3,32px);--c-lh-head:var(--lh-h3,1.25em);--c-ls-head:var(--ls-h3,.5px);
 --c-ff-p:var(--ff-paragraph,var(--ff-base,"Poppins",Arial));--c-fw-p:var(--fw-paragraph,300);--c-fs-p:var(--fs-paragraph,18px);--c-ls-p:var(--ls-paragraph,0px);
 --c-ff-ul:var(--ff-ul,var(--ff-base,"Poppins",Arial));--c-fw-ul:var(--fw-ul,300);--c-fs-ul:var(--fs-base,18px);--c-ls-ul:var(--ls-ul,0px);
 --c-ff-sub:var(--ff-h6,var(--ff-base,"Poppins",Arial));--c-fw-sub:var(--fw-h6,400);--c-fs-sub:var(--fs-h6,16px);--c-lh-sub:var(--lh-h6,1.25em);--c-ls-sub:var(--ls-h6,0px);
 --c-ff-btn:var(--ff-btn,var(--ff-base,"Poppins",Arial));--c-fw-btn:var(--fw-btn,700);--c-fs-btn:var(--fs-btn,16px);--c-ls-btn:var(--ls-btn,0px);
 --c-ff-legal:var(--ff-footer-legal,var(--ff-base,"Poppins",Arial));--c-fs-legal:var(--fs-footer-legal,12px);
 --c-fw-body:var(--fw-base,300);--c-fs-body:var(--fs-base,18px);--c-lh-body:var(--lh-base,1.4444em);--c-ls-body:var(--ls-base,0px);
 --c-img-h:150px;
}
.cgsi-careers *{box-sizing:border-box;margin:0;padding:0;color:var(--text);font-family:var(--c-ff-base);letter-spacing:var(--c-ls-body);text-transform:none;font-style:normal;line-height:inherit;text-align:left}
.cgsi-careers{color:var(--text);font-family:var(--c-ff-base);font-size:var(--c-fs-body);font-weight:var(--c-fw-body);line-height:var(--c-lh-body);letter-spacing:var(--c-ls-body);-webkit-font-smoothing:antialiased;position:relative;overflow-wrap:break-word}
.cgsi-careers a{color:inherit;text-decoration:none}
.cgsi-careers img{max-width:100%;display:block}


/* --- theme responsive type: the same -tablet / -mobile tokens the theme switches to --- */
@media(max-width:767px){.cgsi-careers{
 --c-fs-head:var(--fs-h3-tablet,var(--fs-h3,32px));--c-lh-head:var(--lh-h3-tablet,var(--lh-h3,1.25em));--c-ls-head:var(--ls-h3-tablet,var(--ls-h3,.5px));
 --c-fs-p:var(--fs-paragraph-tablet,var(--fs-paragraph,18px));--c-fs-ul:var(--fs-base-tablet,var(--fs-base,18px));--c-fs-body:var(--fs-base-tablet,var(--fs-base,18px));
 --c-fs-sub:var(--fs-h6-tablet,var(--fs-h6,16px));--c-fs-btn:var(--fs-btn-tablet,var(--fs-btn,16px));--c-fs-legal:var(--fs-footer-legal-tablet,var(--fs-footer-legal,12px))}}
@media(max-width:575px){.cgsi-careers{
 --c-fs-head:var(--fs-h3-mobile,var(--fs-h3,32px));--c-lh-head:var(--lh-h3-mobile,var(--lh-h3,1.25em));--c-ls-head:var(--ls-h3-mobile,var(--ls-h3,.5px));
 --c-fs-p:var(--fs-paragraph-mobile,var(--fs-paragraph,18px));--c-fs-ul:var(--fs-base-mobile,var(--fs-base,18px));--c-fs-body:var(--fs-base-mobile,var(--fs-base,18px));
 --c-fs-sub:var(--fs-h6-mobile,var(--fs-h6,16px));--c-fs-btn:var(--fs-btn-mobile,var(--fs-btn,16px));--c-fs-legal:var(--fs-footer-legal-mobile,var(--fs-footer-legal,12px))}}

/* --- grid --- */
.cgsi-careers__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.cgsi-careers--cols-3 .cgsi-careers__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.cgsi-careers--cols-2 .cgsi-careers__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:1024px){.cgsi-careers .cgsi-careers__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:575px){.cgsi-careers .cgsi-careers__grid{grid-template-columns:minmax(0,1fr);gap:14px}}

/* --- card --- */
.cgsi-careers .career{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,border-color .25s,box-shadow .25s;box-shadow:var(--shadow)}
.cgsi-careers .career:hover{transform:translateY(-5px);border-color:var(--line-hover)}
@media(hover:none){.cgsi-careers .career:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.cgsi-careers .career,.cgsi-careers .career:hover{transition:none;transform:none}}
.cgsi-careers .cimg{height:var(--c-img-h);position:relative;overflow:hidden;background:#0e1420}
.cgsi-careers .cimg img{width:100%;height:100%;object-fit:cover;object-position:center}
.cgsi-careers .cimg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(14,20,32,.35));pointer-events:none}
.cgsi-careers .cbody{padding:26px 24px 24px;display:flex;flex-direction:column;gap:16px;flex:1}
.cgsi-careers .ctitle{font-family:var(--c-ff-head);font-weight:var(--c-fw-head);font-size:var(--c-fs-head);line-height:var(--c-lh-head);letter-spacing:var(--c-ls-head);color:var(--text)}
.cgsi-careers .blurb{font-family:var(--c-ff-p);font-weight:var(--c-fw-p);font-size:var(--c-fs-p);letter-spacing:var(--c-ls-p);color:var(--soft);line-height:var(--c-lh-body)}
/* roles sit in their own block above a rule */
.cgsi-careers .meta{display:flex;flex-direction:column;gap:18px;padding-top:18px;border-top:1px solid var(--line);margin-top:4px}
/* "Roles include" is a real sub-heading (h4 under the card's h3), sized with the theme's h6 set */
.cgsi-careers .rlabel{font-family:var(--c-ff-sub);font-size:var(--c-fs-sub);font-weight:var(--c-fw-sub);line-height:var(--c-lh-sub);letter-spacing:var(--c-ls-sub);text-transform:none;color:var(--text);margin:0}
.cgsi-careers .roles{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:12px}
.cgsi-careers .roles li{font-family:var(--c-ff-ul);font-weight:var(--c-fw-ul);font-size:var(--c-fs-ul);letter-spacing:var(--c-ls-ul);color:var(--soft);display:flex;gap:9px;align-items:flex-start;line-height:1.35}
/* theme list marker: a 12x3 line in the theme's bullet colour (pwr-defer.css .pwr-rich-text ul li:before).
   Drawn in flow, not absolutely positioned, so it sits inside the card padding. The theme's
   .pwr--dark ul li:before {background-color:var(--clr-txt-bullet-dk)!important} still wins on
   colour, which is what we want. */
.cgsi-careers .roles li::before{content:"";display:inline-block;flex:0 0 12px;width:12px;height:3px;margin:.6em 0 0;padding:0;position:static;border:0;border-radius:0;background-color:var(--clr-txt-bullet-lt,var(--clr-primary,#763ddb))}
.pwr--dark .cgsi-careers .roles li::before{background-color:var(--clr-txt-bullet-dk,var(--clr-primary,#763ddb))}
/* CTA: theme button (same tokens the theme's own buttons read), pinned to the card foot */
.cgsi-careers .cfoot{margin-top:auto;padding-top:20px;border-top:1px solid var(--line);display:flex}
.cgsi-careers .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;width:100%;
 font-family:var(--c-ff-btn);font-size:var(--c-fs-btn);font-weight:var(--c-fw-btn);letter-spacing:var(--c-ls-btn);text-transform:uppercase;line-height:1.5;
 padding:14px 26px;border-radius:6px;border:2px solid var(--accent);background:var(--accent);color:#fff;text-decoration:none;cursor:pointer;
 transition:background .2s,border-color .2s,color .2s,transform .2s}
.cgsi-careers .btn span{color:inherit;transition:transform .2s}
.cgsi-careers .btn:hover{background:var(--clr-primary-dk,#5e31af);border-color:var(--clr-primary-dk,#5e31af);color:#fff;transform:translateY(-2px)}
.cgsi-careers .btn:hover span{transform:translateX(3px)}
.cgsi-careers .btn:focus-visible{outline:2px solid var(--accent2);outline-offset:3px}

/* --- slider: full viewport width, one card centred, the cards either side fading out.
       Horizontal Content Fade is a mask (not a painted gradient), so it blends into ANY section
       background the way the theme's own sliders do. The fade band is centred on the middle of
       the outer cards; --fade-pct (Width of Fade, % of screen width) sets how wide the band is. --- */
.cgsi-careers__slider{position:relative;width:100vw;margin-left:calc(50% - 50vw);
 /* three cards fit inside the frame with ~40px spare at each edge; never narrower than 560px
    (below that the neighbours peek in from the edges instead) */
 --slide-w:clamp(560px,calc((100vw - 56px)/3 - 40px),900px);--gap:28px;--arrow:48px;--fade-pct:8;
 --band:calc(var(--fade-pct) * 1vw);
 --mid-r:calc(50% + var(--slide-w) + var(--gap));   /* centre of the right-hand neighbour */
 --mid-l:calc(50% - var(--slide-w) - var(--gap))}   /* centre of the left-hand neighbour */
.cgsi-careers__track{display:flex;align-items:stretch;gap:var(--gap);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
 padding:12px calc(50% - var(--slide-w)/2) 16px;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;outline:none}
.cgsi-careers__slider.has-mask .cgsi-careers__track{
 -webkit-mask-image:linear-gradient(to right,transparent calc(var(--mid-l) - var(--band)/2),#000 calc(var(--mid-l) + var(--band)/2),#000 calc(var(--mid-r) - var(--band)/2),transparent calc(var(--mid-r) + var(--band)/2));
 mask-image:linear-gradient(to right,transparent calc(var(--mid-l) - var(--band)/2),#000 calc(var(--mid-l) + var(--band)/2),#000 calc(var(--mid-r) - var(--band)/2),transparent calc(var(--mid-r) + var(--band)/2))}
.cgsi-careers__track::-webkit-scrollbar{display:none}
.cgsi-careers__track:focus-visible .cgsi-careers__slide.is-active .career{border-color:var(--line-hover)}
.cgsi-careers__slide{flex:0 0 var(--slide-w);scroll-snap-align:center;scroll-snap-stop:always;display:flex;transition:opacity .35s ease,transform .35s ease}
.cgsi-careers__slide .career{width:100%}
/* landscape card: 4:1 image strip on top, single-column body with room to breathe,
   roles in two columns, button bottom-right */
.cgsi-careers--slider .career .cimg{height:auto;aspect-ratio:4/1;flex:0 0 auto}
.cgsi-careers--slider .career .cbody{padding:32px 34px 30px;gap:20px}
.cgsi-careers--slider .career .meta{padding-top:22px;margin-top:6px}
.cgsi-careers--slider .career .roles{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:9px}
.cgsi-careers--slider .career .cfoot{justify-content:flex-end;padding-top:24px;margin-top:6px}
.cgsi-careers--slider .career .btn{width:auto;min-width:220px}
.cgsi-careers__slider.is-dim .cgsi-careers__slide{opacity:.6;transform:scale(.96)}
.cgsi-careers__slider.is-dim .cgsi-careers__slide.is-active{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.cgsi-careers__slide{transition:none}.cgsi-careers__track{scroll-behavior:auto}}
/* controls: arrows flank the bullets below the track, so nothing overlaps a card */
.cgsi-careers__nav{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:14px}
.cgsi-careers__arrow{width:var(--arrow);height:var(--arrow);border-radius:50%;flex:0 0 auto;
 display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer;
 background:var(--card);border:1px solid var(--line);color:var(--text);box-shadow:var(--shadow);transition:border-color .2s,color .2s,opacity .2s}
.cgsi-careers__arrow svg{display:block}
.cgsi-careers__arrow:hover{border-color:var(--line-hover);color:var(--accent2)}
.cgsi-careers__arrow:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.cgsi-careers__arrow[disabled]{opacity:.35;cursor:default}
.cgsi-careers__dots{display:flex;justify-content:center;align-items:center;gap:8px;min-width:60px}
.cgsi-careers__dot{width:8px;height:8px;border-radius:50%;padding:0;border:0;cursor:pointer;background:var(--line);opacity:1;transition:background .2s,width .2s}
.cgsi-careers__dot:hover{background:var(--muted)}
.cgsi-careers__dot.is-active{background:var(--accent2);width:22px;border-radius:4px}
.cgsi-careers__dot:focus-visible{outline:2px solid var(--accent2);outline-offset:3px}
.cgsi-careers--slider .disc{margin-top:26px}
@media(max-width:991px){
 .cgsi-careers__slider{--slide-w:clamp(280px,58vw,420px)}
 .cgsi-careers--slider .career .cimg{aspect-ratio:2/1}
 .cgsi-careers--slider .career .cbody{padding:26px 24px 24px;gap:16px}
 .cgsi-careers--slider .career .meta{display:flex;flex-direction:column;gap:18px}
 .cgsi-careers--slider .career .roles{grid-template-columns:1fr}
 .cgsi-careers--slider .career .cfoot{justify-content:stretch}
 .cgsi-careers--slider .career .btn{width:100%}
}
@media(max-width:575px){
 /* phones: no slider. The cards stack in one column inside the content width;
    clone sets, fade, dimming and controls are all switched off. */
 .cgsi-careers__slider{width:auto;margin-left:0}
 .cgsi-careers__track,.cgsi-careers__slider.has-mask .cgsi-careers__track{display:flex;flex-direction:column;gap:14px;overflow:visible;padding:0;scroll-snap-type:none;
  -webkit-mask-image:none;mask-image:none}
 .cgsi-careers__slide{flex:0 0 auto;width:100%;min-height:0}
 .cgsi-careers__slide[data-set="0"],.cgsi-careers__slide[data-set="2"]{display:none}
 .cgsi-careers__slider.is-dim .cgsi-careers__slide{opacity:1;transform:none}
 .cgsi-careers__nav{display:none}
 .cgsi-careers--slider .career .cimg{aspect-ratio:2/1}
 .cgsi-careers--slider .career .cbody{padding:24px 20px 22px}
 .cgsi-careers--slider .career .roles{grid-template-columns:1fr}
}
}
.cgsi-scheme-primary .cgsi-careers__dot{background:rgba(255,255,255,.35)}
.cgsi-scheme-primary .cgsi-careers__dot.is-active{background:#fff}
.cgsi-scheme-primary .cgsi-careers__arrow:hover{color:#efe6ff}
.pwr--light .cgsi-careers__dot{background:rgba(23,27,37,.18)}
.pwr--light .cgsi-careers__dot.is-active{background:var(--accent)}
.pwr--light .cgsi-careers__arrow:hover{color:var(--accent)}

/* --- disclaimer --- */
.cgsi-careers .disc,.cgsi-careers .disc *{font-family:var(--c-ff-legal);font-size:var(--c-fs-legal);font-weight:var(--c-fw-body);color:var(--muted);line-height:1.6;text-align:center}
.cgsi-careers .disc{max-width:840px;margin:30px auto 0}
.cgsi-careers .disc p+p{margin-top:.6em}

/* --- brand purple scheme: purple section, cards stay navy so they read against it --- */
.pwr-sec-form.cgsi-scheme-primary{background-color:var(--clr-primary,#763ddb)}
.cgsi-scheme-primary .pwr-sec__title-intro{color:#efe6ff}
.cgsi-scheme-primary .pwr-sec__title{color:#fff}
.cgsi-scheme-primary .pwr-sec__desc,.cgsi-scheme-primary .pwr-sec__desc *{color:rgba(255,255,255,.9)}
.cgsi-scheme-primary .cgsi-careers{--card:#1E2430;--line:rgba(255,255,255,.14);--line-hover:rgba(255,255,255,.55);--shadow:0 12px 34px rgba(3,11,27,.32)}
.cgsi-scheme-primary .cgsi-careers .disc,.cgsi-scheme-primary .cgsi-careers .disc *{color:rgba(255,255,255,.8)}

.cgsi-scheme-primary .cgsi-careers .btn{background:#fff;border-color:#fff;color:var(--clr-primary,#763ddb)}
.cgsi-scheme-primary .cgsi-careers .btn:hover{background:#efe6ff;border-color:#efe6ff;color:var(--clr-primary,#763ddb)}

/* --- light scheme: set by the module's Color Scheme option (PWR .pwr--light) --- */
.pwr--light .cgsi-careers{
 --card:#fff;--line:rgba(var(--clr-base-dk-rgb,23,27,37),.12);--line-hover:rgba(var(--clr-primary-rgb,118,61,219),.45);
 --text:var(--clr-text-lt,#171b25);--muted:#5b6478;--soft:#3b4356;--shadow:0 10px 30px rgba(23,27,37,.08);
}
.pwr--light .cgsi-careers .cimg{background:#e9ecf2}
.pwr--light .cgsi-careers .cimg::after{background:linear-gradient(180deg,transparent 60%,rgba(23,27,37,.18))}

/* --- sec-form component rules the intro relies on (theme loads pwr-sec-form.css only when a
       real Section Form is on the page; inlined here so this module stands alone) --- */
.cgsi-careers-sec .pwr-sec-form__content--narrow{max-width:800px}
.cgsi-careers-sec .pwr--align-c .pwr-sec__title{margin:0 auto}
.cgsi-careers-sec .pwr-sec-form__intro-sec{position:relative;margin-bottom:calc(60px*var(--sp-reduction-factor,1))}
.cgsi-careers-sec .pwr-sec-form__title+.pwr-sec-form__desc{margin-top:calc(30px*var(--sp-reduction-factor,1))}
.cgsi-careers-sec .pwr-sec-form__intro-sec--vertical{margin-bottom:calc(60px*var(--sp-reduction-factor,1))}
@media(max-width:767px){.cgsi-careers-sec .pwr-sec-form__intro-sec,.cgsi-careers-sec .pwr-sec-form__intro-sec--vertical{margin-bottom:calc(40px*var(--sp-reduction-factor,1))}}

/* --- section wrapper: background layers sit behind, content in front --- */
.cgsi-careers-sec{position:relative;overflow:hidden}
.cgsi-careers-sec>.page-center{position:relative;z-index:1}
.cgsi-careers-sec .pwr-bg{z-index:0}
.cgsi-careers-sec .pwr-bg-overlay{z-index:0}