/* A coordinated visual introduction to strategy, design and delivery. */
.strategy-page .strategy-services{gap:28px;padding-bottom:62px}
.strategy-page .strategy-services article{border:0;padding:0;min-width:0}
.strategy-service-visual{margin:0;aspect-ratio:3/2;overflow:hidden;border-radius:4px;background:var(--paper)}
.strategy-service-visual img{display:block;width:100%;height:100%;object-fit:cover}
.strategy-service-copy{padding-top:23px}
.strategy-service-heading{display:flex;align-items:baseline;gap:14px}
.strategy-service-heading .number{flex-shrink:0;font-size:.75rem;color:var(--deep-gold)}
.strategy-page .strategy-services h2{margin:0;font-size:clamp(1.4rem,2.1vw,1.7rem);line-height:1.25;letter-spacing:-.04em}
.strategy-page .strategy-services p{font-size:1rem;line-height:1.8;margin-top:15px;padding-right:10px}
@media(max-width:1050px) and (min-width:761px){
 .strategy-page .strategy-services{gap:20px}
 .strategy-service-heading{align-items:flex-start;gap:10px}
 .strategy-service-heading .number{padding-top:3px}
 .strategy-page .strategy-services h2{font-size:1.4rem}
}
@media(max-width:760px){
 .strategy-page .strategy-services{grid-template-columns:1fr;gap:34px;padding-bottom:38px}
 .strategy-service-copy{padding-top:20px}
 .strategy-service-heading{gap:14px}
 .strategy-page .strategy-services h2{font-size:1.6rem}
 .strategy-page .strategy-services p{margin-top:12px;padding-right:0}
}

/* Real people introduce the strategy work. */
.strategy-hero{display:grid;grid-template-columns:1fr 1.3fr;align-items:center;gap:48px;padding-block:44px 60px}
.strategy-hero-copy{min-width:0}
.strategy-hero .eyebrow{font-size:.75rem;line-height:1.7;letter-spacing:.095em;color:var(--deep-gold);margin-bottom:22px;max-width:390px}
.strategy-hero h1{font-size:clamp(2.7rem,4.3vw,4.2rem);line-height:1.1;letter-spacing:-.055em}
.strategy-hero-copy>p:last-of-type{max-width:440px;margin-top:25px;font-size:1.0625rem;line-height:1.8;color:var(--muted)}
.strategy-page .strategy-hero .hero-actions{gap:16px 22px;margin-top:28px}
.strategy-hero .button{max-width:100%;border-radius:3px;gap:19px}
.strategy-hero .button span{flex-shrink:0}
.strategy-hero-photo{margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:4px}
.strategy-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
@media(max-width:1050px) and (min-width:761px){
 .strategy-hero{gap:30px;grid-template-columns:1fr 1.12fr;padding-block:36px 48px}
 .strategy-hero h1{font-size:clamp(2.6rem,4.5vw,3.4rem)}
 .strategy-hero-copy>p:last-of-type{font-size:1rem}
 .strategy-hero-photo{aspect-ratio:1/1}
 .strategy-hero-photo img{object-position:49% 50%}
}
@media(max-width:760px){
 .strategy-hero{grid-template-columns:1fr;gap:28px;padding-block:24px 38px}
 .strategy-hero-photo{order:-1;aspect-ratio:3/2}
 .strategy-hero .eyebrow{margin-bottom:17px;max-width:330px;font-size:.75rem}
 .strategy-hero h1{font-size:clamp(2.65rem,9.8vw,4rem)}
 .strategy-hero-copy>p:last-of-type{font-size:1rem;margin-top:20px}
 .strategy-page .strategy-hero .hero-actions{margin-top:24px;gap:16px 20px}
 .strategy-hero .button{gap:15px}
}

/* A first-hand guest story within the SAOL case study. */
.case-testimonial{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;margin-top:48px;overflow:hidden;border-radius:4px;background:var(--ink);color:var(--paper)}
.case-testimonial-film{position:relative;display:block;align-self:stretch;min-height:350px;overflow:hidden}
.case-testimonial-film>img{width:100%;height:100%;object-fit:cover;object-position:50% 44%;position:absolute;inset:0;transition:transform .3s ease}
.case-testimonial-film::after{content:'';position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(28,25,25,.78));pointer-events:none}
.case-testimonial-watch{position:absolute;z-index:1;inset:auto 28px 26px;display:flex;align-items:center;gap:15px;font-size:.875rem;font-weight:600;color:var(--paper)}
.case-testimonial-watch .play-disc{width:52px;height:52px}
.case-testimonial-film:hover .play-disc{background:var(--paper);color:var(--ink)}
.case-testimonial-film:focus-visible{outline:2px solid var(--paper);outline-offset:-6px}
.case-testimonial-copy{padding:36px 38px}
.case-testimonial-copy .eyebrow{font-size:.75rem;letter-spacing:.1em;margin-bottom:19px}
.case-testimonial-copy blockquote{margin:0;font-size:clamp(1.45rem,2.2vw,2rem);line-height:1.45;letter-spacing:-.025em}
.case-testimonial-person{margin-top:23px;font-size:.875rem;line-height:1.8}
.case-testimonial-person strong{display:block;font-size:1rem;font-weight:600;margin-bottom:3px}
.case-testimonial-person a{text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
.case-testimonial-person a:focus-visible{outline-color:var(--paper)}
.case-testimonial-person a>span{display:inline}
.case-testimonial-context{font-size:.8125rem;line-height:1.7;margin-top:16px;opacity:.85;max-width:34ch}
@media(max-width:1050px){.case-testimonial{grid-template-columns:1fr 1fr}.case-testimonial-copy{padding:28px}.case-testimonial-watch{inset:auto 22px 22px}}
@media(max-width:760px){
 .case-testimonial{grid-template-columns:1fr;margin-top:32px}
 .case-testimonial-film{aspect-ratio:16/9;min-height:0}
 .case-testimonial-film>img{object-position:50% 50%}
 .case-testimonial-watch{inset:auto 18px 16px;font-size:.8125rem;gap:12px}
 .case-testimonial-watch .play-disc{width:44px;height:44px}
 .case-testimonial-copy{padding:27px 24px 29px}
 .case-testimonial-copy blockquote{font-size:1.5rem;line-height:1.45}
 .case-testimonial-copy .eyebrow{margin-bottom:16px}
 .case-testimonial-person{margin-top:20px}
}