/* Case studies (6 Oct 2026, site reskin v2): the index /case-studies and the ten stories /case-studies/<slug>. Page rules on
   top of site-v2.css and site-v2-pages.css, loaded only by pages/case-studies-v2-body and pages/case-study-v2-body.
   Every selector starts with the page wrapper .sv2-pg-casestudies, so nothing else on the site can change. */

/* small label with a short orange line (the homepage kicker) */
.sv2-pg-casestudies .sv2-kicker{display:flex;align-items:flex-start;gap:12px;margin:0 0 16px;font:600 12px/1.5 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.sv2-pg-casestudies .sv2-kicker::before{content:"";flex:0 0 auto;width:28px;height:2px;margin-top:8px;background:var(--accent)}
.sv2-pg-casestudies .sv2-navy .sv2-kicker{color:var(--on-dark)}

/* keyboard focus: buttons keep their own corners; on the dark photo areas the ring is the lighter orange */
.sv2-pg-casestudies .sv2-btn:focus-visible{border-radius:12px}
.sv2-pg-casestudies :is(.sv2-hero,.sv2-cta,.sv2-navy) a:focus-visible{outline-color:#ff914e;box-shadow:0 0 0 2px var(--deep)}

/* ===== hero (both page types): the words on the left over the blended photo ===== */
.sv2-pg-casestudies .sv2-hero-copy{max-width:940px}
.sv2-pg-casestudies .sv2-pgcs-hero h1{max-width:13em}
.sv2-pg-casestudies .sv2-hero .sv2-kicker{width:fit-content;max-width:100%;margin:20px 0 0;color:#e3e8ee;text-shadow:0 1px 2px rgba(0,0,0,.45),0 2px 18px rgba(0,0,0,.35)}
.sv2-pg-casestudies .sv2-hero .sv2-kicker+h1{margin-top:14px}
/* a story headline is a whole sentence: a calmer size than the short page titles, on a measure that keeps it clear of the photo's subject */
.sv2-pg-casestudies.sv2-pgcs-story .sv2-pgcs-hero h1{max-width:15em;font-size:clamp(34px,3.35vw,52px);line-height:1.1;letter-spacing:-.035em}
.sv2-pg-casestudies.sv2-pgcs-story .sv2-hero-lead{margin-top:20px;font-weight:500;color:#fff;text-wrap:balance}
/* The shade behind the words. These photos are bright (paper, daylight, pale cards) and a story headline runs wide, so the
   hero keeps the deeper navy of the document pages on the words' side and lets the photo through on the other. The stops
   follow the text column (it ends about 300px right of centre on every laptop width), not a share of the window.
   A dark photo (class is-light) keeps the lighter shade of site-v2-pages.css. */
.sv2-pg-casestudies .sv2-pgcs-hero:not(.is-light) .sv2-hero-media::after{background:linear-gradient(90deg,rgba(4,16,33,.9) 0,rgba(4,16,33,.82) calc(50% - 100px),rgba(4,16,33,.5) calc(50% + 300px),rgba(4,16,33,.16) 100%),linear-gradient(0deg,rgba(4,16,33,.45),transparent 42%)}
/* tablets and small laptops: the words run the full width, so the shade is even from side to side */
@media(min-width:601px) and (max-width:1100px){
.sv2-pg-casestudies .sv2-pgcs-hero:not(.is-light) .sv2-hero-media::after{background:linear-gradient(180deg,rgba(4,16,33,.86) 0%,rgba(4,16,33,.8) 60%,rgba(4,16,33,.62) 100%)}
.sv2-pg-casestudies .sv2-pgcs-hero.is-light .sv2-hero-media::after{background:linear-gradient(180deg,rgba(4,16,33,.72) 0%,rgba(4,16,33,.62) 60%,rgba(4,16,33,.44) 100%)}
}

/* ===== index: the records note under the hero ===== */
.sv2-pg-casestudies .sv2-pgcs-note{padding-block:46px 48px;border-top:1px solid rgba(255,255,255,.08)}
.sv2-pg-casestudies .sv2-pgcs-note p{max-width:58em;padding-inline-start:26px;border-inline-start:3px solid var(--accent);font-size:clamp(17px,1.35vw,20px);line-height:1.65;color:var(--on-dark);text-wrap:pretty}

/* ===== index: one story = its photo with the figures under it, the account beside it; sides swap story by story ===== */
.sv2-pg-casestudies .sv2-pgcs-case{padding-block:96px}
.sv2-pg-casestudies .sv2-pgcs-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);grid-template-rows:auto auto 1fr;column-gap:clamp(40px,5.4vw,88px);align-items:start}
.sv2-pg-casestudies .sv2-pgcs-photo{grid-column:1;grid-row:1;margin:0;border-radius:16px;overflow:hidden;aspect-ratio:3/2;background:var(--navy)}
.sv2-pg-casestudies .sv2-pgcs-photo img{width:100%;height:100%;object-fit:cover}
.sv2-pg-casestudies .sv2-pgcs-copy{grid-column:2;grid-row:1/4;min-width:0}
.sv2-pg-casestudies .sv2-pgcs-stats{grid-column:1;grid-row:2}
.sv2-pg-casestudies .sv2-pgcs-more{grid-column:1;grid-row:3;justify-self:start}
.sv2-pg-casestudies .is-flip .sv2-pgcs-row{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}
.sv2-pg-casestudies .is-flip :is(.sv2-pgcs-photo,.sv2-pgcs-stats,.sv2-pgcs-more){grid-column:2}
.sv2-pg-casestudies .is-flip .sv2-pgcs-copy{grid-column:1}

/* the account */
.sv2-pg-casestudies .sv2-pgcs-copy h2{font-size:clamp(32px,2.9vw,46px);line-height:1.08}
.sv2-pg-casestudies .sv2-pgcs-copy h2.is-long{font-size:clamp(26px,2.15vw,34px);line-height:1.16;letter-spacing:-.03em}
.sv2-pg-casestudies .sv2-pgcs-title{margin-top:16px;max-width:27em;font:500 clamp(19px,1.5vw,23px)/1.4 Poppins,"Poppins Fallback",sans-serif;letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.sv2-pg-casestudies .sv2-pgcs-summary{margin-top:16px;font-size:17px;line-height:1.7;color:var(--muted);text-wrap:pretty}
.sv2-pg-casestudies .sv2-pgcs-points{margin-top:28px;border-top:1px solid var(--line-strong)}
.sv2-pg-casestudies .sv2-pgcs-points li{position:relative;padding-block:16px;padding-inline-start:32px;border-bottom:1px solid var(--line-strong)}
.sv2-pg-casestudies .sv2-pgcs-points li::before{content:"";position:absolute;inset-inline-start:0;top:27px;width:14px;height:2px;background:var(--accent)}
.sv2-pg-casestudies .sv2-pgcs-points strong{display:block;font:600 17px/1.4 Inter,sans-serif;color:var(--ink)}
.sv2-pg-casestudies .sv2-pgcs-points p{margin-top:3px;font-size:15.5px;line-height:1.6;color:var(--muted);text-wrap:pretty}

/* the figures: a short orange rule over each, the number in orange (the homepage case cards) */
.sv2-pg-casestudies .sv2-pgcs-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px;margin-top:30px}
.sv2-pg-casestudies .sv2-pgcs-stats li{position:relative;display:flex;flex-direction:column;padding-top:20px;border-top:1px solid var(--line-strong)}
.sv2-pg-casestudies .sv2-pgcs-stats li::before{content:"";position:absolute;top:-2px;inset-inline-start:0;width:28px;height:3px;background:var(--accent)}
.sv2-pg-casestudies .sv2-pgcs-stats strong{font:600 clamp(24px,2.2vw,34px)/1.05 Poppins,"Poppins Fallback",sans-serif;letter-spacing:-.035em;white-space:nowrap;color:var(--orange)}
.sv2-pg-casestudies .sv2-pgcs-stats span{margin-top:8px;font-size:14px;line-height:1.45;color:var(--soft)}
.sv2-pg-casestudies .sv2-pgcs-more{margin-top:26px}

/* a story on a navy band: the same parts in the on-dark colours, the figures in the bright orange */
.sv2-pg-casestudies .sv2-navy .sv2-pgcs-photo{background:var(--deep)}
.sv2-pg-casestudies .sv2-navy .sv2-pgcs-title{color:#fff}
.sv2-pg-casestudies .sv2-navy .sv2-pgcs-summary,.sv2-pg-casestudies .sv2-navy .sv2-pgcs-points p,.sv2-pg-casestudies .sv2-navy .sv2-pgcs-stats span{color:var(--on-dark)}
.sv2-pg-casestudies .sv2-navy .sv2-pgcs-points{border-top-color:rgba(255,255,255,.2)}
.sv2-pg-casestudies .sv2-navy .sv2-pgcs-points li{border-bottom-color:rgba(255,255,255,.14)}
.sv2-pg-casestudies .sv2-navy .sv2-pgcs-points strong{color:#fff}
.sv2-pg-casestudies .sv2-navy .sv2-pgcs-stats li{border-top-color:rgba(255,255,255,.2)}
.sv2-pg-casestudies .sv2-navy .sv2-pgcs-stats strong{color:var(--accent)}

/* ===== story: challenge and solution (heading beside the text), results on navy, facts ===== */
.sv2-pg-casestudies .sv2-pgcs-text{max-width:42em;font-size:clamp(18px,1.4vw,21px);line-height:1.7;color:var(--muted);text-wrap:pretty}
.sv2-pg-casestudies .sv2-pgcs-results-list{border-top:1px solid rgba(255,255,255,.2)}
.sv2-pg-casestudies .sv2-pgcs-results-list li{position:relative;padding-block:28px 30px;border-bottom:1px solid rgba(255,255,255,.14);font:500 clamp(21px,1.95vw,29px)/1.32 Poppins,"Poppins Fallback",sans-serif;letter-spacing:-.02em;color:#fff;text-wrap:pretty}
.sv2-pg-casestudies .sv2-pgcs-results-list li::before{content:"";position:absolute;top:-2px;inset-inline-start:0;width:48px;height:3px;background:var(--accent)}
.sv2-pg-casestudies .sv2-pgcs-results-list li:last-child{border-bottom:0;padding-bottom:4px}

.sv2-pg-casestudies .sv2-pgcs-said-box{max-width:920px;padding:30px 34px;border-radius:14px;background:var(--paper);border-inline-start:3px solid var(--accent)}
.sv2-pg-casestudies .sv2-pgcs-said-text{font-size:19px;line-height:1.7;color:var(--ink)}
.sv2-pg-casestudies .sv2-pgcs-said-by{margin-top:12px;font:600 15px/1.5 Inter,sans-serif;color:var(--muted)}

.sv2-pg-casestudies .sv2-pgcs-facts-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.45fr);gap:48px 72px;align-items:start}
.sv2-pg-casestudies .sv2-pgcs-fact .sv2-list{margin-top:0}
/* languages: a compact hairline grid that holds two names or seventeen equally well; its rows match the services list beside it, so the hairlines line up across the band */
.sv2-pg-casestudies .sv2-pgcs-langs{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));column-gap:28px;margin-top:1px}
.sv2-pg-casestudies .sv2-pgcs-langs li{padding-block:16px;border-bottom:1px solid var(--line-strong);box-shadow:0 -1px 0 var(--line-strong);font:500 17px/1.55 Inter,sans-serif;color:var(--ink)}
.sv2-pg-casestudies .sv2-pgcs-quote{margin-top:40px}

/* closing band: the outline button sits on a dark fill (as in the hero of site-v2-pages.css) so its label stays readable over the lit windows */
.sv2-pg-casestudies .sv2-cta .sv2-btn-outline-light:not(:hover){background:rgba(4,16,33,.62)}
/* story closing band: the third link is a quiet text link under the two buttons */
.sv2-pg-casestudies .sv2-cta .sv2-link{align-self:flex-start;margin-top:8px;color:#fff;border-bottom-color:rgba(255,145,78,.65)}
.sv2-pg-casestudies .sv2-cta .sv2-link .sv2-arrow{color:#ff914e}
.sv2-pg-casestudies .sv2-cta .sv2-link:hover{color:#ffb489;border-color:#ffb489}

/* smaller laptops */
@media(max-width:1280px){
.sv2-pg-casestudies .sv2-pgcs-case{padding-block:84px}
}
/* the closing band's actions sit in a row here: the text link lines up with the buttons */
@media(max-width:1100px){
.sv2-pg-casestudies .sv2-cta .sv2-link{align-self:center;margin-top:0;margin-inline-start:8px}
}
/* tablets: one column, the photo first, then the account, the figures and the link */
@media(max-width:1000px){
.sv2-pg-casestudies .sv2-pgcs-row,.sv2-pg-casestudies .is-flip .sv2-pgcs-row{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
.sv2-pg-casestudies :is(.sv2-pgcs-photo,.sv2-pgcs-copy,.sv2-pgcs-stats,.sv2-pgcs-more),.sv2-pg-casestudies .is-flip :is(.sv2-pgcs-photo,.sv2-pgcs-copy,.sv2-pgcs-stats,.sv2-pgcs-more){grid-column:1;grid-row:auto}
.sv2-pg-casestudies .sv2-pgcs-photo{aspect-ratio:16/9}
.sv2-pg-casestudies .sv2-pgcs-copy{margin-top:36px}
.sv2-pg-casestudies .sv2-pgcs-stats{margin-top:34px}
.sv2-pg-casestudies .sv2-pgcs-stats strong{font-size:clamp(28px,4.4vw,36px)}
}
@media(max-width:850px){
.sv2-pg-casestudies .sv2-pgcs-facts-grid{grid-template-columns:minmax(0,1fr)}
.sv2-pg-casestudies .sv2-pgcs-case{padding-block:72px}
}
/* phones */
@media(max-width:600px){
.sv2-pg-casestudies .sv2-pgcs-hero h1{max-width:none}
.sv2-pg-casestudies.sv2-pgcs-story .sv2-pgcs-hero h1{font-size:clamp(27px,7.5vw,33px);line-height:1.14}
.sv2-pg-casestudies .sv2-hero .sv2-kicker{margin-top:14px;font-size:11.5px;letter-spacing:.12em}
.sv2-pg-casestudies .sv2-hero .sv2-kicker+h1{margin-top:10px}
.sv2-pg-casestudies.sv2-pgcs-story .sv2-hero-lead{margin-top:14px}
/* the words sit in the top half of a tall phone hero: deep there, the photo clearer below */
.sv2-pg-casestudies .sv2-pgcs-hero:not(.is-light) .sv2-hero-media::after{opacity:1;background:linear-gradient(180deg,rgba(4,16,33,.88) 0%,rgba(4,16,33,.82) 50%,rgba(4,16,33,.5) 100%)}
.sv2-pg-casestudies .sv2-pgcs-note{padding-block:34px 36px}
.sv2-pg-casestudies .sv2-pgcs-note p{padding-inline-start:18px;font-size:16px}
.sv2-pg-casestudies .sv2-pgcs-case{padding-block:56px}
.sv2-pg-casestudies .sv2-pgcs-photo{aspect-ratio:3/2;border-radius:14px}
.sv2-pg-casestudies .sv2-pgcs-copy{margin-top:28px}
.sv2-pg-casestudies .sv2-pgcs-copy h2{font-size:clamp(30px,8.4vw,36px)}
.sv2-pg-casestudies .sv2-pgcs-copy h2.is-long{font-size:clamp(23px,6.3vw,27px)}
.sv2-pg-casestudies .sv2-pgcs-title{margin-top:12px;font-size:19px}
.sv2-pg-casestudies .sv2-pgcs-summary{font-size:16px}
.sv2-pg-casestudies .sv2-pgcs-points{margin-top:22px}
.sv2-pg-casestudies .sv2-pgcs-points strong{font-size:16px}
.sv2-pg-casestudies .sv2-pgcs-points p{font-size:15px}
/* the figures as three clean lines: number, then what it counts */
.sv2-pg-casestudies .sv2-pgcs-stats{grid-template-columns:minmax(0,1fr);margin-top:28px;border-bottom:1px solid var(--line-strong)}
.sv2-pg-casestudies .sv2-navy .sv2-pgcs-stats{border-bottom-color:rgba(255,255,255,.2)}
.sv2-pg-casestudies .sv2-pgcs-stats li{display:grid;grid-template-columns:minmax(0,45%) minmax(0,1fr);column-gap:16px;align-items:baseline;padding-block:17px 16px}
.sv2-pg-casestudies .sv2-pgcs-stats li::before{width:22px}
.sv2-pg-casestudies .sv2-pgcs-stats strong{font-size:27px}
.sv2-pg-casestudies .sv2-pgcs-stats span{margin-top:0;font-size:15px}
.sv2-pg-casestudies .sv2-pgcs-more{margin-top:18px}
.sv2-pg-casestudies .sv2-pgcs-text{font-size:17px}
.sv2-pg-casestudies .sv2-pgcs-results-list li{padding-block:22px 24px;font-size:20px}
.sv2-pg-casestudies .sv2-pgcs-results-list li::before{width:40px}
.sv2-pg-casestudies .sv2-pgcs-facts-grid{gap:44px}
.sv2-pg-casestudies .sv2-pgcs-langs{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
.sv2-pg-casestudies .sv2-pgcs-langs li{padding-block:13px;font-size:16px}
.sv2-pg-casestudies .sv2-pgcs-quote{display:flex;width:100%;margin-top:32px}
.sv2-pg-casestudies .sv2-pgcs-said-box{padding:22px 20px}
.sv2-pg-casestudies .sv2-cta .sv2-link{align-self:flex-start;margin-top:4px;margin-inline-start:0}
}
/* narrow phones: the longest figure still fits its column */
@media(max-width:374px){
.sv2-pg-casestudies .sv2-pgcs-stats strong{font-size:24px}
}