/* 02: an image-led spread. 04: decision / production / process, three scenes.
   Existing assets, copy, routes, palette and native DOM order are preserved. */
.work{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 28px;padding:40px var(--gutter) 120px}
.work .work-heading{grid-column:2/13;padding:20px 0 0;margin:0 0 -18px;z-index:2;pointer-events:none}
.work .work-heading h2{font-size:clamp(74px,10.4vw,168px);line-height:.9;letter-spacing:-.065em;max-width:none}
.work .work-heading h2 br{display:none}
.work .work-heading h2 em{display:block;margin-left:34%;color:var(--violet)}
.work .work-primary{grid-column:1/13;margin:0 calc(var(--gutter) * -1);position:relative}
.work .work-primary .work-media{aspect-ratio:2.05;background:var(--paper)}
.work .work-primary .work-media img{object-fit:cover;object-position:50% 52%}
.work .work-caption{display:block;padding:18px 0 0}
.work .work-caption .work-cta{display:none}
.work .work-caption h3{font-size:19px;letter-spacing:-.025em;font-weight:700}
.work .work-description{font-size:14px;line-height:1.5;margin-top:7px;max-width:36ch}
.work .work-primary .work-caption{position:relative;margin:-82px 0 0 auto;width:39%;min-height:130px;padding:26px var(--gutter) 24px 32px;background:var(--paper);z-index:2}
.work .work-primary .work-caption h3{font-size:clamp(25px,2.7vw,42px)}
.work .work-secondary{grid-column:2/9;margin:88px 0 0;position:relative}
.work .work-secondary .work-caption{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.work .work-secondary .work-caption h3{grid-column:1;font-size:23px}
.work .work-secondary .work-description{grid-column:2;margin:0}
.work .work-tertiary{grid-column:9/13;margin:220px calc(var(--gutter) * -.5) 0 -36px;z-index:2}
.work .work-tertiary .work-media{aspect-ratio:4/5;border:12px solid var(--paper);border-right:0}
.work .work-tertiary .work-media img{object-fit:cover;object-position:36% 50%}
.work .work-tertiary .work-caption{padding:8px 0 0 12px}
/* The scene colour is present without JS; animation never hides its content. */
.begin{--scene-dark:#202024;--scene-light:#f5f3ef;--scene-yellow:#ffd642;--scene-muted:#c8c4bc;padding:100px 0 0;background:var(--scene-dark);color:var(--scene-light);position:relative}
.begin>.scene-coordinate{color:var(--scene-yellow);top:110px}
.begin>.scene-coordinate .coordinate-rule{background:var(--scene-yellow)}
.begin .begin-heading,.begin .entry-list,.begin .begin-notes{margin-left:13%;margin-right:var(--gutter)}
.begin .begin-heading{display:block;margin-bottom:56px;position:relative}
.begin .begin-heading h2{font-size:clamp(56px,7.5vw,112px);line-height:.98;letter-spacing:-.055em;max-width:16ch;color:var(--scene-light)}
.begin .begin-heading p{font-size:18px;line-height:1.5;color:var(--scene-muted);max-width:32ch;margin-top:28px}
.begin .entry-list{display:grid;grid-template-columns:1.3fr 1fr;gap:0 64px;align-items:start}
.begin .entry{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 20px;padding:24px 0;border-top:1px solid #555459;min-width:0;color:var(--scene-light);--entry-node:var(--scene-yellow);--entry-node-edge:var(--scene-yellow)}
.begin .entry h3{font-size:clamp(25px,2.2vw,34px);line-height:1.02;letter-spacing:-.045em}
.begin .entry h3::before{display:none}
.begin .entry p{grid-column:1/-1;font-size:15px;line-height:1.5;color:var(--scene-muted);max-width:40ch}
.begin .entry-price{grid-column:2;grid-row:1;font-size:clamp(27px,2.6vw,40px);color:var(--scene-yellow);white-space:nowrap;letter-spacing:-.045em}
.begin .entry-price small{color:var(--scene-muted);font-size:12px;letter-spacing:0;margin-bottom:6px}
.begin .entry-price>span{margin-left:8px}
.begin .entry:first-child{grid-column:1;grid-row:1/4;display:flex;flex-direction:column;align-items:start;align-self:stretch;padding:30px 20px 30px 0;border-top:3px solid var(--scene-yellow)}
.begin .entry:first-child h3{font-size:clamp(38px,4vw,64px);max-width:13ch;line-height:1}
.begin .entry:first-child p{max-width:29ch;font-size:17px;margin-top:12px}
.begin .entry:first-child .entry-price{font-size:clamp(44px,5vw,76px);padding-top:32px;margin-top:auto}
.begin .entry:not(:first-child){grid-column:2}
.begin .entry:focus-visible{outline:3px solid var(--scene-yellow);outline-offset:7px;border-top-color:var(--scene-yellow)}
.begin .entry::after{background:var(--scene-yellow)}
.begin .begin-notes{display:flex;gap:44px;justify-content:space-between;align-items:end;margin-top:44px;margin-bottom:0;padding-bottom:64px}
.begin .begin-notes p{color:var(--scene-muted);font-size:12px;max-width:50ch}
.begin .begin-notes a{color:var(--scene-yellow);border-color:var(--scene-yellow);font-size:15px}
.begin .begin-notes a:focus-visible{outline-color:var(--scene-yellow)}
.begin .production-entry{margin:0;padding:56px var(--gutter) 56px 13%;background:#e8e4dc;color:var(--ink);border:0;display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:center;position:relative}
.begin .production-entry::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--gutter);background:var(--scene-yellow)}
.begin .production-entry>p{font-size:clamp(32px,3.7vw,58px);line-height:1.03;letter-spacing:-.045em}
.begin .production-entry>div{justify-self:end}
.begin .production-entry>div p{font-size:16px;line-height:1.5;margin-bottom:18px}
.begin .working-method{padding:76px var(--gutter) 88px 13%;background:var(--paper);color:var(--ink);display:grid;grid-template-columns:1fr 1.2fr;gap:0 72px}
.working-method .method-eyebrow{grid-column:1;grid-row:1;font-size:12px;letter-spacing:.06em;margin:0 0 24px}
.working-method .method-heading{display:block;grid-column:1;grid-row:2}
.working-method #method-title{font-size:clamp(36px,3.9vw,60px);line-height:1.03}
.working-method .method-support{margin-top:24px;max-width:28ch;font-size:16px;justify-self:start}
.working-method .method-journey{grid-column:2;grid-row:1/3;margin:0}
.working-method .method-route{display:none}
.working-method .method-steps{display:block}
.working-method .method-steps li{display:grid;grid-template-columns:64px 1fr;gap:8px 16px;padding:24px 0;margin:0;border-top:1px solid var(--line)}
.working-method .method-steps li:first-child{padding-top:0;border:0}
.working-method .method-steps li::before,.working-method .method-steps li::after{display:none}
.working-method .method-number{position:static;grid-column:1;grid-row:1/3;font-size:38px;letter-spacing:-.06em;line-height:1;color:var(--ink)}
.working-method .method-steps h4{grid-column:2;font-size:25px}
.working-method .method-steps p{grid-column:2;margin:0;max-width:30ch;font-size:15px}
@media(hover:hover) and (pointer:fine){.begin .entry:hover{border-top-color:var(--scene-yellow)}.begin .entry:hover .entry-price>span{transform:translate(4px,-4px)}}
@media(min-width:761px) and (max-width:1100px){
 .begin .entry-list{gap:0 36px}.begin .entry{grid-template-columns:1fr}.begin .entry-price{grid-column:1;grid-row:auto}.begin .entry p{grid-column:1}.begin .entry:first-child .entry-price{font-size:48px}
 .begin .working-method{gap:0 40px}.working-method .method-steps li{grid-template-columns:44px 1fr;gap:8px 12px}.working-method .method-number{font-size:30px}
}
@media(max-width:760px){
 .work{display:block;padding:16px var(--gutter) 72px}
 .work .work-heading{padding:0;margin:0 0 -6px}
 .work .work-heading h2{font-size:clamp(56px,15vw,92px);line-height:.96}
 .work .work-heading h2 br{display:block}
 .work .work-heading h2 em{margin-left:22%;display:block}
 .work .work-primary{margin:0 calc(var(--gutter) * -1)}
 .work .work-primary .work-media{aspect-ratio:1.2}
 .work .work-primary .work-media img{object-position:48% 50%}
 .work .work-primary .work-caption{width:85%;margin:-24px 0 0 auto;min-height:0;padding:20px 24px;background:var(--paper)}
 .work .work-primary .work-caption h3{font-size:27px}
 .work .work-description{font-size:13px}
 .work .work-secondary{margin:36px 28px 0 0}
 .work .work-secondary .work-caption{display:block;padding:16px 0 0}
 .work .work-secondary .work-caption h3{font-size:19px}
 .work .work-secondary .work-description{margin-top:6px}
 .work .work-tertiary{margin:36px 0 0 22%;position:relative}
 .work .work-tertiary .work-media{aspect-ratio:4/5;border:0}
 .work .work-tertiary .work-caption{padding:14px 0 0}
 .work .work-tertiary .work-caption h3{font-size:19px}
 .begin{padding:60px 0 0}
 .begin>.scene-coordinate{top:64px;color:var(--scene-yellow)}
 .begin .begin-heading,.begin .entry-list,.begin .begin-notes{margin-inline:var(--gutter)}
 .begin .begin-heading{margin-bottom:38px}
 .begin .begin-heading h2{font-size:clamp(42px,11.4vw,72px);max-width:13ch;line-height:1.02;padding-right:8px}
 .begin .begin-heading p{font-size:16px;margin-top:24px;max-width:29ch}
 .begin .entry-list{display:block}
 .begin .entry{grid-template-columns:minmax(0,1fr);gap:14px;padding:24px 0}
 .begin .entry h3{font-size:28px}
 .begin .entry p{grid-column:1;font-size:14px}
 .begin .entry-price{display:flex;align-items:baseline;gap:8px;grid-column:1;grid-row:auto;font-size:30px;white-space:normal}
 .begin .entry-price small{margin:0}
 .begin .entry-price>span{display:inline-block;margin-left:auto;font-size:30px}
 .begin .entry:first-child{display:block;padding:28px 0 32px}
 .begin .entry:first-child h3{font-size:clamp(34px,9vw,48px)}
 .begin .entry:first-child p{font-size:15px;margin-top:20px;max-width:34ch}
 .begin .entry:first-child .entry-price{display:flex;font-size:44px;margin-top:24px;padding:0}
 .begin .begin-notes{display:block;margin-top:24px;padding-bottom:42px}
 .begin .begin-notes p{font-size:12px}
 .begin .begin-notes a{margin-top:24px}
 .begin .production-entry{display:block;padding:38px var(--gutter) 40px calc(var(--gutter) + 12px)}
 .begin .production-entry::before{width:10px}
 .begin .production-entry>p{font-size:34px;max-width:16ch}
 .begin .production-entry>div{margin-top:24px}
 .begin .working-method{display:block;padding:48px var(--gutter) 56px}
 .working-method .method-eyebrow{margin-bottom:20px}
 .working-method #method-title{font-size:36px}
 .working-method .method-support{margin-top:22px}
 .working-method .method-journey{margin-top:38px}
 .working-method .method-steps li{grid-template-columns:44px 1fr;gap:8px 10px;padding:22px 0}
 .working-method .method-number{font-size:31px}
 .working-method .method-steps h4{font-size:22px}
}
@media(prefers-reduced-motion:reduce){.begin .entry-price>span{transition:none}.begin .entry:is(:hover,:focus-visible) .entry-price>span{transform:none}}
@media(forced-colors:active){.begin .entry:focus-visible,.begin .begin-notes a:focus-visible{outline-color:Highlight}}