/* xGrowth case studies (Alex design, 2 Nov 2026) — staging. */
/* Case study drafts, 30 Oct 2026 */
/* Case-study blocks. Same tokens as the theme: Inter, #262946 headings, #1F213A text,
   #23044C dark, #D90041 buttons, #fd5754 lines, #e8edf3 page, white 12px cards. */
.xg-cs-hero{position:relative;isolation:isolate;overflow:hidden;background-color:#23044C;background-image:url("../images/cs/hero-glow.svg");background-size:cover;background-position:center;background-repeat:no-repeat;color:#fff;padding:150px 20px 0}
/* The ABM hero artwork (abm-desktop-xwd.svg) split down the middle: its chevrons sit
   either side of the copy and point in at the headline instead of crossing behind it.
   They're sized to the headline block, so they never reach the stats row below it. */
.xg-cs-hero__head{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:24px}
.xg-cs-hero__head::before,.xg-cs-hero__head::after{content:"";position:absolute;z-index:-1;top:-24px;height:calc(100% + 48px);aspect-ratio:804/610;background:no-repeat center/contain;pointer-events:none}
.xg-cs-hero__head::before{right:calc(50% + 420px);background-image:url("../images/cs/hero-chevrons-left.svg")}
.xg-cs-hero__head::after{left:calc(50% + 420px);background-image:url("../images/cs/hero-chevrons-right.svg")}
/* Trust bar: the homepage's two rows, without the label */
.xg-cs-trust .xg-logo-marquees__track--right{animation:88s linear infinite xg-logo-marquees-right}
@media (prefers-reduced-motion:reduce){.xg-cs-trust .xg-logo-marquees__track{animation:none !important}}
.xg-cs-hero__inner{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}
.xg-cs-hero__logo{height:44px !important;width:auto !important;max-width:240px;display:block;margin-bottom:4px}
.xg-cs-hero__meta{display:flex;flex-wrap:wrap;justify-content:center;gap:0;margin:0;padding:0;list-style:none;font-size:15px;font-weight:500;color:rgba(255,255,255,.72)}
.xg-cs-hero__meta li{padding:0 14px;border-left:1px solid rgba(255,255,255,.25);line-height:1}
.xg-cs-hero__meta li:first-child{border-left:0}
.xg-cs-hero h1{color:#fff;margin:0;font-family:Inter,sans-serif;font-weight:700;line-height:1.12;font-size:clamp(34px,2.2rem + 2.2vw,62px);max-width:1000px}
.xg-cs-hero h1 .xg-cs-accent{color:#fd5754}
.xg-cs-hero__lead{max-width:760px;margin:0;font-size:clamp(17px,1rem + .35vw,20px);line-height:1.6;color:rgba(255,255,255,.88)}
.xg-cs-stats{display:grid;grid-template-columns:repeat(4,1fr);width:100%;max-width:1100px;margin:56px auto 0;border-top:1px solid rgba(255,255,255,.18)}
.xg-cs-stats--3{grid-template-columns:repeat(3,1fr)}
.xg-cs-stat{padding:32px 24px 40px;text-align:left;border-left:1px solid rgba(255,255,255,.18)}
.xg-cs-stat:first-child{border-left:0;padding-left:0}
.xg-cs-stat__num{display:block;font-family:Inter,sans-serif;font-weight:700;font-size:clamp(34px,1.6rem + 1.4vw,50px);line-height:1;color:#fff}
.xg-cs-stat__label{display:block;margin-top:12px;font-size:16px;line-height:1.45;color:rgba(255,255,255,.75)}
.xg-cs-hero + .xg-cs-marquee{background:#23044C}

.xg-cs-main{background-color:#e8edf3;background-image:url("../images/cs/e2720d394c73.svg");background-size:700px auto;background-position:0 100px;background-repeat:no-repeat;padding:40px 0 20px}

/* Facts panel inside a text-section */
.xg-cs-facts{display:grid;grid-template-columns:1fr 1fr;background:#fff;border-radius:12px;margin-top:28px;overflow:hidden}
.xg-cs-facts div{padding:20px 24px;border-top:1px solid #e3e7ee}
.xg-cs-facts div:nth-child(-n+2){border-top:0}
.xg-cs-facts div:nth-child(even){border-left:1px solid #e3e7ee}
.xg-cs-facts dt{font-size:14px;font-weight:500;color:#6b6e86;margin:0 0 6px}
.xg-cs-facts dd{margin:0;font-size:17px;font-weight:600;color:#1F213A;line-height:1.4}

/* Lists marked with a coral chevron, echoing the hero (an x bullet read as "cancelled") */
.xg-cs-xlist{list-style:none;margin:20px 0 0;padding:0}
.xg-cs-xlist li{position:relative;padding:0 0 0 30px;margin:0 0 14px;line-height:1.6}
.xg-cs-xlist li::before,.xg-cs-tactics li::before{content:"";position:absolute;left:2px;width:13px;height:13px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M4 1.5l5 5-5 5' fill='none' stroke='%23fd5754' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}
.xg-cs-xlist li::before{top:.45em}

/* Approach steps: help-section card style */
.xg-cs-steps{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}
.xg-cs-step{background:#fff;border-radius:12px;padding:28px 26px}
.xg-cs-step__n{display:block;font-family:Inter,sans-serif;font-weight:700;font-size:15px;color:#fd5754;margin-bottom:14px}
.xg-cs-step h3{margin:0 0 10px;font-family:Inter,sans-serif;font-size:20px;font-weight:700;color:#262946;line-height:1.3}
.xg-cs-step p{margin:0;font-size:16px;line-height:1.6;color:#1F213A}

/* Dark band */
.xg-cs-band{background-color:#23044C;background-image:url("../images/cs/85b2ceae5e61.png");background-size:contain;background-position:0 -35px;background-repeat:repeat-x;color:#fff;padding:96px 20px}
.xg-cs-band__inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
.xg-cs-band h2{color:#fff;margin:0 0 20px;font-family:Inter,sans-serif;font-size:clamp(28px,1.5rem + 1vw,40px);font-weight:700;line-height:1.2}
.xg-cs-band p{margin:0;font-size:18px;line-height:1.65;color:rgba(255,255,255,.85)}
.xg-cs-tactics{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:40px}
.xg-cs-tactics li{position:relative;padding:18px 0 18px 30px;border-bottom:1px solid rgba(255,255,255,.16);font-size:17px;font-weight:500}
.xg-cs-tactics li::before{top:24px}

/* Results cards without the logo slot (one client per page) */
.xg-cs-results .xg-results-section__card{display:block}

/* Big quote */
.xg-cs-quote{max-width:1220px;margin:0 auto 100px;padding:0 20px}
.xg-cs-quote__card{background:#fff;border-radius:12px;padding:56px 64px;box-shadow:0 0 20px 5px #e3a09e33;display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center}
.xg-cs-quote__card img.xg-cs-quote__avatar{width:150px;height:150px;border-radius:50%;object-fit:cover}
.xg-cs-quote blockquote{margin:0 0 24px;padding:0;border:0;font-family:Inter,sans-serif;font-size:clamp(20px,1.1rem + .5vw,26px);font-weight:700;line-height:1.5;color:#1F213A}
.xg-cs-quote__name{display:block;font-size:18px;font-weight:700;color:#262946}
.xg-cs-quote__role{display:block;font-size:17px;font-weight:500;color:#fd5754;margin-top:4px}

/* Stories (index): every client gets the same full-width white card, the story on one side and
   the client's own words (or the key numbers) on the other, in the site's testimonial card with
   its own glow, so the quote reads as a card on the card */
.xg-cs-stories{max-width:1180px;margin:60px auto 100px;padding:0 20px;display:grid;gap:40px}
.xg-cs-story{background:#fff;border-radius:12px;box-shadow:0 0 20px 5px rgba(227,160,158,.3);padding:56px;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center}
.xg-cs-story__brand{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-bottom:28px}
.xg-cs-story__logo{height:36px !important;width:auto !important;max-width:220px;object-fit:contain;display:block}
.xg-cs-story h2{color:#262946;margin:0 0 18px;font-family:Inter,sans-serif;font-size:clamp(26px,1.3rem + 1vw,36px);font-weight:700;line-height:1.22}
.xg-cs-story h2 .xg-cs-accent{color:#fd5754}
.xg-cs-story__main > p{margin:0 0 28px;font-size:17px;line-height:1.65;color:#1F213A}
.xg-cs-story__main > p:last-child{margin-bottom:0}
/* Every second card puts the client's words on the left, so consecutive cards read differently */
@media (min-width:1025px){
  .xg-cs-story:nth-child(even):not(.xg-cs-story--cta){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .xg-cs-story:nth-child(even):not(.xg-cs-story--cta) > :last-child{order:-1}
}
.xg-cs-story__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.xg-cs-story__quote{margin:0;background:#F5F7F9;border-radius:12px;box-shadow:0 0 10px 5px rgba(227,160,158,.3);padding:40px 36px}
.xg-cs-story__quote blockquote{margin:0 0 24px;padding:0;border:0;font-family:Inter,sans-serif;font-size:19px;font-weight:700;line-height:1.55;color:#1F213A}
.xg-cs-story__quote figcaption{display:flex;align-items:center;gap:14px}
.xg-cs-story__quote img,.xg-cs-story__initials{width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0}
.xg-cs-story__initials{display:inline-flex;align-items:center;justify-content:center;background:#23044C;color:#fff;font-size:18px;font-weight:700;letter-spacing:.04em}
.xg-cs-story__facts{list-style:none;margin:0;padding:8px 36px !important;background:#F5F7F9;border-radius:12px;box-shadow:0 0 10px 5px rgba(227,160,158,.3)}
.xg-cs-story__facts li{padding:22px 0;border-top:1px solid #e3e7ee;list-style:none !important}
.xg-cs-story__facts li::marker{content:none}
.xg-cs-story__facts li:first-child{border-top:0}
.xg-cs-story__facts strong{display:block;font-size:30px;font-weight:700;line-height:1.1;color:#262946}
.xg-cs-story__facts span{display:block;margin-top:6px;font-size:15px;line-height:1.5;color:#1F213A}
.xg-cs-story--cta{background-color:#23044C;background-image:url("../images/cs/85b2ceae5e61.png");background-size:cover;background-position:center;box-shadow:none;grid-template-columns:minmax(0,1fr) auto}
.xg-cs-story--cta h2{color:#fff}
.xg-cs-story--cta .xg-cs-story__main > p{margin:0;color:rgba(255,255,255,.85)}

/* Story cards */
.xg-cs-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.xg-cs-card{min-width:0}
.xg-cs-card{background:#fff;border-radius:12px;padding:30px 30px 26px;display:flex;flex-direction:column;box-shadow:0 0 20px 5px #e3a09e33}
.xg-cs-card__logo{height:34px;margin-bottom:26px;display:flex;align-items:center}
.xg-cs-card__logo img{height:34px !important;width:auto !important;max-width:170px;object-fit:contain;object-position:left center}
.xg-cs-card__num{margin:0 0 8px;font-family:Inter,sans-serif;font-size:32px;font-weight:700;line-height:1.15;color:#1F213A}
.xg-cs-card__desc{margin:0 0 18px;font-size:16px;line-height:1.6;color:#1F213A}
.xg-cs-card__meta{margin:auto 0 0;padding-top:18px;border-top:1px solid #e3e7ee;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px;color:#6b6e86}
.xg-cs-card__link{display:inline-flex;align-items:center;gap:8px;height:24px;padding:0 10px;border-radius:50px;background:#23044C;color:#fff !important;font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;white-space:nowrap}

.xg-cs-hero__meta,.xg-cs-xlist,.xg-cs-tactics{padding-left:0 !important;margin-left:0 !important}
.xg-cs-hero__meta li,.xg-cs-xlist li,.xg-cs-tactics li{list-style:none !important}
.xg-cs-hero__meta li::marker,.xg-cs-xlist li::marker,.xg-cs-tactics li::marker{content:none}

/* Acquired stamp and notice (Dienst) */
.xg-cs-hero__brand{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:20px 36px;margin-bottom:4px}
.xg-cs-hero__logo--invert{filter:brightness(0) invert(1)}
/* For marks that must keep their brand colours (Telstra): the colour logo on a white panel */
.xg-cs-hero__chip{display:inline-flex;align-items:center;background:#fff;border-radius:12px;padding:4px 24px;margin-bottom:4px}
.xg-cs-hero__brand .xg-cs-hero__logo{height:72px !important;max-width:280px}
.xg-cs-stamp{display:inline-flex;flex-direction:column;align-items:center;gap:4px;padding:10px 20px 9px;border:3px solid #fd5754;outline:1.5px solid #fd5754;outline-offset:4px;border-radius:6px;color:#fd5754;transform:rotate(-7deg);text-transform:uppercase;font-family:Inter,sans-serif;line-height:1}
.xg-cs-stamp__big{font-size:38px;font-weight:800;letter-spacing:.14em}
.xg-cs-stamp__small{font-size:13px;font-weight:600;letter-spacing:.12em}
.xg-cs-notice{background:#fd5754;color:#23044C;padding:26px 20px}
.xg-cs-notice__inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:20px 28px}
.xg-cs-notice__tag{flex-shrink:0;display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:50px;background:#23044C;color:#fff;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.xg-cs-notice p{margin:0;font-size:18px;line-height:1.5}
.xg-cs-notice a{flex-shrink:0;margin-left:auto;color:#23044C !important;font-weight:600;font-size:16px;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.xg-cs-card__top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.xg-cs-card__stamp{flex-shrink:0;display:inline-block;padding:5px 9px 4px;border:2px solid #fd5754;border-radius:4px;color:#fd5754;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1.15;text-align:center;transform:rotate(-5deg);margin-top:2px}
.xg-cs-facts dd.xg-cs-facts__flag{color:#d90040}
.xg-cs-figure{margin:28px 0 0;background:#23044C;border-radius:12px;padding:32px 40px}
.xg-cs-figure img{display:block;width:100%;max-width:640px;height:auto;margin:0 auto}

/* Video testimonial with quote. Live build: Presto Player (click-to-play poster, captions, lazy load). */
.xg-cs-words{max-width:1220px;margin:0 auto 100px;padding:0 20px}
.xg-cs-words > h2{text-align:center;margin:0 0 36px;font-family:Inter,sans-serif;font-size:clamp(28px,1.5rem + 1vw,40px);font-weight:700;color:#262946}
.xg-cs-words__card{background:#fff;border-radius:12px;box-shadow:0 0 20px 5px #e3a09e33;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);overflow:hidden}
.xg-cs-video{position:relative;display:block;aspect-ratio:16/9;background:#23044C;max-width:100%}
.xg-cs-video img{display:block;width:100%;height:100%;object-fit:cover}
.xg-cs-video__play{position:absolute;left:28px;bottom:28px;width:72px;height:72px;border-radius:50%;background:#fd5754;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 10px rgba(253,87,84,.28);transition:transform .2s ease}
.xg-cs-video:hover .xg-cs-video__play,.xg-cs-video:focus-visible .xg-cs-video__play{transform:scale(1.07)}
.xg-cs-video__play svg{width:26px;height:26px;margin-left:5px}
/* Video panel fills the card's height when the quote runs taller, poster centred, no white gap */
.xg-cs-words__card .xg-cs-video{aspect-ratio:auto;align-self:stretch;display:flex;align-items:center}
.xg-cs-words__card .xg-cs-video img{height:auto}
.xg-cs-video__time{position:absolute;left:116px;bottom:51px;height:26px;display:inline-flex;align-items:center;padding:0 12px;border-radius:50px;background:#23044C;color:#fff;font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.xg-cs-words__text{padding:44px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.xg-cs-words blockquote{margin:0 0 28px;padding:0;border:0;font-family:Inter,sans-serif;font-size:clamp(18px,1rem + .3vw,21px);font-weight:700;line-height:1.6;color:#1F213A}
.xg-cs-words__author{display:flex;align-items:center;gap:16px}
.xg-cs-words__author img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex-shrink:0}
@media (prefers-reduced-motion:reduce){.xg-cs-video__play{transition:none}}

/* More results (single pages): its own section with a centred heading, not a left heading like the story sections */
.xg-cs-more{max-width:1220px;margin:0 auto 100px;padding:0 20px}
.xg-cs-more > h2{text-align:center;margin:0 0 40px;font-family:Inter,sans-serif;font-size:clamp(28px,1.5rem + 1vw,40px);font-weight:700;color:#262946}

/* Text-section bodies hold more than one paragraph here */
.xg-text-section__body p{margin:0 0 16px}
.xg-text-section__body p:last-child{margin-bottom:0}
.xg-cs-main .xg-text-section,.xg-cs-main .xg-results-section{margin-bottom:40px}

@media (max-width:1024px){
  .xg-cs-band__inner{grid-template-columns:1fr;gap:40px}
  .xg-cs-story{grid-template-columns:minmax(0,1fr);gap:32px}
}
@media (max-width:900px){
  .xg-cs-hero__head::before,.xg-cs-hero__head::after{display:none}
}
@media (max-width:768px){
  .xg-cs-hero{padding-top:120px}
  .xg-cs-hero__logo{height:34px !important}
  .xg-cs-stamp__big{font-size:28px}
  .xg-cs-hero__brand .xg-cs-hero__logo{height:56px !important}
  .xg-cs-notice__inner{flex-direction:column;align-items:flex-start}
  .xg-cs-notice p{font-size:16px}
  .xg-cs-notice a{margin-left:0}
  .xg-cs-hero__meta{gap:8px 0;font-size:14px}
  .xg-cs-hero__meta li{padding:0 8px;border-left:0}
  .xg-cs-story__logo{height:30px !important}
  .xg-cs-story__quote{padding:28px 22px}
  .xg-cs-story__facts{padding:4px 22px !important}
  .xg-cs-stats,.xg-cs-stats--3{grid-template-columns:1fr 1fr}
  .xg-cs-stat{padding:24px 16px 28px}
  .xg-cs-stat:nth-child(odd){border-left:0;padding-left:0}
  .xg-cs-stat:nth-child(n+3){border-top:1px solid rgba(255,255,255,.18)}
  .xg-cs-facts,.xg-cs-steps,.xg-cs-grid,.xg-cs-tactics{grid-template-columns:minmax(0,1fr)}
  .xg-cs-card{padding:24px 22px 22px}
  .xg-cs-card__meta{flex-wrap:wrap}
  .xg-cs-card__num{font-size:26px}
  .xg-cs-facts div:nth-child(even){border-left:0}
  .xg-cs-facts div:nth-child(2){border-top:1px solid #e3e7ee}
  .xg-cs-band{padding:64px 20px}
  .xg-cs-story{padding:36px 24px}
  .xg-cs-quote__card{grid-template-columns:1fr;padding:36px 24px;gap:24px}
  .xg-cs-words__card{grid-template-columns:minmax(0,1fr)}
  .xg-cs-words__text{padding:28px 22px}
  .xg-cs-video__play{width:56px;height:56px;left:18px;bottom:18px}
  .xg-cs-video__time{left:88px;bottom:33px}
  .xg-cs-quote__card img.xg-cs-quote__avatar{width:96px;height:96px}
}
#xg-mockup-ribbon { position: fixed; left: calc(16px + env(safe-area-inset-left,0px)); bottom: calc(16px + env(safe-area-inset-bottom,0px)); z-index: 2147483000; display: flex; align-items: center; gap: 12px; max-width: calc(-32px + 100vw); padding: 10px 12px 10px 16px; border-radius: 50px; background: rgb(253, 87, 84); color: rgb(35, 4, 76); font: 600 13px / 1.3 Inter, system-ui, sans-serif; box-shadow: rgba(35, 4, 76, 0.35) 0px 6px 24px; }
#xg-mockup-ribbon a { flex-shrink: 0; padding: 6px 12px; border-radius: 50px; background: rgb(35, 4, 76); color: rgb(255, 255, 255); text-decoration: none; font-weight: 600; }
#xg-mockup-ribbon a:focus-visible { outline: rgb(255, 255, 255) solid 2px; outline-offset: 2px; }

/* staging: AU trust bar block inside the hero band, label hidden like the mockup */
.xg-cs-trust .xg-logo-marquees__label{display:none!important}
.xg-cs-trust .xg-logo-marquees{background:transparent!important}
.xg-cs-trust .xg-logo-marquees::before{display:none!important}