/* Service pages: the four services are four doors. This page's door stands open, the other three stay closed beside it,
   and the page ends at the next door, ajar. Between the doors, the client's copy and case studies do the talking. */
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
.service-page{--sp-cream:#faf7ef;--sp-ink:#1d2a1b;--sp-forest:#1f3d26;--sp-deep:#14271a;--sp-gold:#d4ad55;--sp-quiet:#6a6e5c;--sp-line:#1d2a1b2e;--sp-gutter:clamp(20px,4.4vw,72px);--sp-indent:calc((100vw - 2 * var(--sp-gutter)) / 6);--sp-hh:85px;--sp-closed:clamp(64px,6.2vw,100px);--sp-open-w:calc(100vw - 3 * var(--sp-closed));--sp-ease:cubic-bezier(.22,1,.36,1);--sp-swing:cubic-bezier(.65,0,.15,1);background:var(--sp-cream);color:var(--sp-ink)}
.service-page main{overflow:clip}.sp{font-family:var(--tpp-serif)}.sp *{box-sizing:border-box}.sp a{color:inherit}.sp h1,.sp h2,.sp h3,.sp h4,.sp p,.sp ol{margin:0;font-weight:400}
.sp :focus-visible{outline:2px solid currentColor;outline-offset:5px}
.sp .tpp-button{border-radius:0;font-size:19px;padding:17px 24px;min-height:56px;background:var(--sp-forest);border-color:var(--sp-forest);color:#fff}
.sp-link{display:inline-flex;align-items:center;min-height:44px;font-size:20px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px;transition:text-underline-offset .3s var(--sp-ease)}.sp-link:hover{text-underline-offset:11px}

/* The doors */
.sp-doors{display:flex;height:calc(100svh - var(--sp-hh));min-height:600px;background:var(--sp-deep)}
.sp .sp-door{color:var(--sp-cream)}.sp-door{position:relative;overflow:hidden;flex:0 0 var(--sp-closed);text-decoration:none;transition:flex-basis .8s var(--sp-ease)}
.sp-door.is-open{flex:1 1 0;min-width:0}
.sp-door+.sp-door::before{content:'';position:absolute;z-index:2;inset:0 auto 0 0;width:1px;background:#faf7ef38}
.sp-door img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sp-door.is-open img{left:50%;width:max(100%,var(--sp-open-w));translate:-50% 0}
.sp-door.is-open::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0d1a1047 0%,#0d1a1000 26%,#0d1a1000 50%,#0d1a10c4 100%);pointer-events:none}
.sp-back{position:absolute;z-index:1;top:24px;left:var(--sp-gutter);display:flex;align-items:center;min-height:44px;font-size:19px;text-decoration:none}.sp-back:hover{text-decoration:underline;text-underline-offset:6px}
.sp-door h1{position:absolute;z-index:1;left:var(--sp-gutter);bottom:clamp(28px,4vw,60px);width:calc(var(--sp-open-w) - 2 * var(--sp-gutter));font-size:clamp(64px,9.4vw,156px);line-height:.9;letter-spacing:-.04em;color:#fff;text-wrap:balance}.sp-door h1.is-long{font-size:clamp(50px,6.6vw,112px)}
.sp-door:not(.is-open) img{filter:grayscale(1) contrast(1.08) brightness(.85);scale:1.04;transition:filter .7s var(--sp-ease),scale 1s var(--sp-ease)}
.sp-door:not(.is-open)::after{content:'';position:absolute;inset:0;background:var(--sp-forest);mix-blend-mode:multiply;opacity:.94;transition:opacity .7s var(--sp-ease)}
.sp-door span{position:absolute;z-index:1;left:50%;bottom:30px;writing-mode:vertical-rl;rotate:180deg;translate:-50% 0;font-size:clamp(19px,1.45vw,23px);line-height:1;white-space:nowrap}
.sp-door:not(.is-open):focus-visible{flex-basis:calc(var(--sp-closed) * 1.9);outline-offset:-8px}
@media (hover:hover){.sp-door:not(.is-open):hover{flex-basis:calc(var(--sp-closed) * 1.9)}.sp-door:not(.is-open):hover img{filter:none;scale:1}.sp-door:not(.is-open):hover::after{opacity:.3}}
/* Arriving from elsewhere, all four doors stand level, then this one swings open. */
.sp-opening .sp-door:not(.is-open){animation:sp-door 1.35s .2s var(--sp-swing) backwards}
.sp-opening .sp-door h1{animation:sp-rise 1.1s .85s var(--sp-ease) backwards}.sp-opening .sp-back{animation:sp-fade .8s 1.2s ease backwards}
@keyframes sp-door{from{flex-basis:25%}}@keyframes sp-rise{from{opacity:0;translate:0 44px}}@keyframes sp-fade{from{opacity:0}}
/* Moving between services carries the doors across to the next page. */
::view-transition-group(door-strategy),::view-transition-group(door-organisational-development),::view-transition-group(door-leadership-team-coaching),::view-transition-group(door-programme-change-support){animation-duration:.95s;animation-timing-function:var(--sp-swing,cubic-bezier(.65,0,.15,1))}
::view-transition-old(door-strategy),::view-transition-new(door-strategy),::view-transition-old(door-organisational-development),::view-transition-new(door-organisational-development),::view-transition-old(door-leadership-team-coaching),::view-transition-new(door-leadership-team-coaching),::view-transition-old(door-programme-change-support),::view-transition-new(door-programme-change-support){width:100%;height:100%;object-fit:cover}

/* The service in its own words */
.sp-intro{padding:clamp(88px,11vw,170px) var(--sp-gutter) clamp(80px,9vw,140px)}
.sp-intro p{font-size:clamp(34px,4.3vw,70px);line-height:1.06;letter-spacing:-.026em;text-indent:var(--sp-indent);text-wrap:pretty}

/* How we work: every passage stays readable; the photograph moves to the one you point at */
.sp-how{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(40px,6vw,110px);align-items:start;padding:0 var(--sp-gutter) clamp(80px,8vw,130px)}
.sp-how-text{display:contents}
.sp-how h2,.sp-proof h2{font-style:italic;font-size:clamp(40px,4.2vw,64px);line-height:1;letter-spacing:-.02em}
.sp-how h2{grid-column:2;grid-row:1;margin-bottom:clamp(40px,5vw,72px)}
.sp-passages{grid-column:2;grid-row:2;list-style:none;padding:0;display:grid;align-content:start;gap:clamp(48px,6vw,96px)}
.sp-passage p{font-size:clamp(26px,2.45vw,40px);line-height:1.2;letter-spacing:-.015em;text-wrap:pretty}
.sp-passage .sp-link{margin-top:12px}.sp-passage img{display:none}
.sp-frame{grid-column:1;grid-row:2;position:relative;aspect-ratio:4/3;overflow:hidden;background:#e3e5d6;translate:0 var(--y,0px);transition:translate .9s var(--sp-ease)}
.sp-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;scale:1.06;transition:opacity .6s ease,scale 1.3s var(--sp-ease)}.sp-frame img.is-current{opacity:1;scale:1}
.sp-how.is-live .sp-passage{cursor:pointer}.sp-how.is-live .sp-passage p{color:var(--sp-quiet);transition:color .45s ease}.sp-how.is-live .sp-passage.is-current p{color:var(--sp-ink)}

/* What you come away with */
.sp-runin>*{display:inline;font:inherit;letter-spacing:inherit}
.sp-outcome{display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--sp-forest);color:var(--sp-cream);padding:clamp(96px,12vw,190px) var(--sp-gutter)}
.sp-outcome .sp-runin{font-size:clamp(36px,4.6vw,76px);line-height:1.08;letter-spacing:-.025em;max-width:17em;text-wrap:balance}
.sp-outcome h2{font-style:italic;color:var(--sp-gold)}
.sp-outcome .tpp-button{margin:clamp(40px,4.4vw,64px) 0 0;background:var(--sp-gold);border-color:var(--sp-gold);color:var(--sp-deep)}.sp-outcome .tpp-button:hover{background:#e3c06c;border-color:#e3c06c;color:var(--sp-deep)}

/* Related work, told as challenge, contribution and result in the case study's own words */
.sp-proof{padding:clamp(96px,11vw,170px) var(--sp-gutter) clamp(72px,8vw,120px)}
.sp-proof-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:clamp(40px,5vw,72px)}
.sp-case{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(40px,6vw,110px);padding-block:clamp(36px,4vw,56px);border-top:1px solid var(--sp-line)}
.sp-case-head h3{font-size:clamp(32px,3.2vw,50px);line-height:1.06;letter-spacing:-.02em;text-wrap:balance}.sp-case-head p{margin-top:18px;font-size:19px;color:var(--sp-quiet)}
.sp-case-story{display:grid;align-content:start;gap:22px}.sp-case-story .sp-runin{font-size:clamp(20px,1.6vw,24px);line-height:1.45;color:#3e4537}.sp-case-story .sp-runin:nth-child(3){color:var(--sp-ink)}
.sp-case-story h4{font-style:italic;color:var(--sp-ink)}.sp-case-story h4::after{content:'.'}.sp-case-story .sp-link{justify-self:start}

/* The next door, ajar */
.sp .sp-next{color:var(--sp-cream)}.sp-next{position:relative;isolation:isolate;display:block;height:clamp(440px,72svh,780px);overflow:hidden;background:var(--sp-deep);text-decoration:none}
.sp-next-room{position:absolute;inset:0;clip-path:inset(0 41% 0 41%);transition:clip-path 1.1s var(--sp-swing)}
.sp-next-room img{width:100%;height:100%;object-fit:cover;scale:1.08;transition:scale 1.4s var(--sp-ease)}
.sp-next-room::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0d1a1000 45%,#0d1a10b8 100%)}
.sp-next-label{position:absolute;z-index:1;top:32px;left:var(--sp-gutter);font-size:19px}
.sp-next strong{position:absolute;z-index:1;left:var(--sp-gutter);bottom:clamp(28px,4vw,60px);max-width:calc(100% - 2 * var(--sp-gutter));font-weight:400;font-size:clamp(56px,8vw,140px);line-height:.9;letter-spacing:-.04em;text-wrap:balance}
.sp-next:focus-visible{outline-offset:-8px}.sp-next:focus-visible .sp-next-room{clip-path:inset(0)}
@media (hover:hover){.sp-next:hover .sp-next-room{clip-path:inset(0)}.sp-next:hover .sp-next-room img{scale:1}}

@media(max-width:1099px){.service-page{--sp-hh:77px}}
@media(max-width:999px){
 .sp-how{display:block}.sp-how h2{margin-bottom:36px}.sp-frame{display:none}.sp-how.is-live .sp-passage{cursor:auto}.sp-how.is-live .sp-passage p{color:var(--sp-ink)}
 .sp-passage img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;margin-top:22px}
 .sp-case{grid-template-columns:1fr;row-gap:26px}
}
@media(max-width:699px){
 .service-page{--sp-closed:58px;--sp-indent:12vw}
 .sp-doors{flex-direction:column;min-height:560px}
 .sp-door+.sp-door::before{inset:0 0 auto;width:auto;height:1px}
 .sp-door.is-open img{left:0;top:50%;width:100%;height:max(100%,calc(100svh - var(--sp-hh) - 3 * var(--sp-closed)));translate:0 -50%}
 .sp-door h1,.sp-door h1.is-long{width:calc(100% - 2 * var(--sp-gutter));font-size:clamp(46px,13vw,64px);bottom:24px}.sp-door h1.is-long{font-size:clamp(40px,11vw,54px)}
 .sp-door span{writing-mode:horizontal-tb;rotate:none;left:var(--sp-gutter);bottom:auto;top:50%;translate:0 -50%;font-size:19px}
 .sp-back{top:12px}
 .sp-intro p{font-size:clamp(30px,8.4vw,36px);line-height:1.1}
 .sp-passage p{font-size:25px;line-height:1.24}
 .sp-outcome .sp-runin{font-size:clamp(31px,8.6vw,38px);line-height:1.12}
 .sp-proof-head{flex-direction:column;gap:8px}.sp-case-head h3{font-size:32px}
 .sp-next{height:68svh;min-height:420px}.sp-next-room{clip-path:inset(0 30% 0 30%)}.sp-next strong{font-size:clamp(46px,12.5vw,64px)}
}
@media(prefers-reduced-motion:reduce){.sp *,.sp *::before,.sp *::after{animation:none!important;transition:none!important}}