/* Editorial illustration. Existing Guide step buttons control its state. */
.brand-specimen{--specimen-ease:cubic-bezier(.2,.7,.15,1);position:relative;height:304px;overflow:hidden;border-top:1px solid #678626;color:var(--forest);isolation:isolate}
.specimen-annotation{position:absolute;left:22px;top:17px;font-size:12px;line-height:1.4;letter-spacing:0;z-index:3}
.specimen-paper{position:absolute;left:calc(50% - 100px);top:48px;width:200px;height:220px;border:1px solid currentColor;transition:left .55s var(--specimen-ease),width .55s var(--specimen-ease),opacity .25s;z-index:0}
.specimen-paper>span{position:absolute;top:16px;left:16px;font-size:14px;font-weight:500;line-height:1.12;letter-spacing:-.02em}
.specimen-paper>small{position:absolute;bottom:13px;left:16px;right:16px;border-top:1px solid currentColor;padding-top:9px;font-size:8px;letter-spacing:.08em;display:flex;justify-content:space-between}
.specimen-piece{position:absolute;top:126px;height:95px;transition:left .55s var(--specimen-ease),width .55s var(--specimen-ease),color .3s;color:var(--forest);z-index:2}
.specimen-piece>small{position:absolute;left:0;top:-30px;font-size:10px;letter-spacing:.08em;line-height:1.3;white-space:nowrap;opacity:0;transform:translateX(-10px);transition:opacity .3s .15s,transform .4s .1s}
.specimen-type{left:calc(50% - 83px);width:55px}
.specimen-type strong{font-family:'Sesimi Display',Rebond,Helvetica,sans-serif;display:block;font-size:50px;line-height:1;letter-spacing:-.07em;font-weight:400;transition:font-size .55s var(--specimen-ease)}
.specimen-colour{left:calc(50% - 14px);width:45px;display:flex;align-items:flex-start;gap:3px}
.specimen-colour i{display:block;background:currentColor;width:12px;height:46px;transition:width .55s var(--specimen-ease),height .55s var(--specimen-ease),background .3s}
.specimen-colour i:nth-of-type(2){opacity:.55}
.specimen-colour i:nth-of-type(3){opacity:.2}
.specimen-voice{left:calc(50% + 44px);width:43px}
.specimen-voice strong{display:block;font-size:10px;line-height:1.3;letter-spacing:-.03em;font-weight:500;transition:font-size .55s var(--specimen-ease)}
.specimen-published{position:absolute;inset:46px 22px 22px;background:var(--forest);clip-path:inset(0 100% 0 0);transition:clip-path .6s var(--specimen-ease);z-index:1}
.specimen-published span{position:absolute;bottom:17px;left:22px;right:22px;border-top:1px solid #d1ff3b66;padding-top:12px;color:var(--lime);font-size:12px;letter-spacing:0;display:flex;justify-content:space-between;gap:20px}
.specimen-published em{font-style:normal;text-transform:none;letter-spacing:0}
.guide-process:has([data-step="1"][aria-pressed="true"]) .specimen-paper,.guide-process:has([data-step="2"][aria-pressed="true"]) .specimen-paper{left:22px;width:calc(100% - 44px);opacity:0}
.guide-process:has([data-step="1"][aria-pressed="true"]) .specimen-piece>small,.guide-process:has([data-step="2"][aria-pressed="true"]) .specimen-piece>small{opacity:1;transform:none}
.guide-process:has([data-step="1"][aria-pressed="true"]) .specimen-type,.guide-process:has([data-step="2"][aria-pressed="true"]) .specimen-type{left:6%;width:26%}
.guide-process:has([data-step="1"][aria-pressed="true"]) .specimen-colour,.guide-process:has([data-step="2"][aria-pressed="true"]) .specimen-colour{left:38%;width:26%;gap:8px}
.guide-process:has([data-step="1"][aria-pressed="true"]) .specimen-voice,.guide-process:has([data-step="2"][aria-pressed="true"]) .specimen-voice{left:70%;width:26%}
.guide-process:has([data-step="1"][aria-pressed="true"]) .specimen-type strong,.guide-process:has([data-step="2"][aria-pressed="true"]) .specimen-type strong{font-size:92px}
.guide-process:has([data-step="1"][aria-pressed="true"]) .specimen-colour i,.guide-process:has([data-step="2"][aria-pressed="true"]) .specimen-colour i{width:33px;height:84px}
.guide-process:has([data-step="1"][aria-pressed="true"]) .specimen-voice strong,.guide-process:has([data-step="2"][aria-pressed="true"]) .specimen-voice strong{font-size:29px;line-height:1.04}
.guide-process:has([data-step="2"][aria-pressed="true"]) .specimen-published{clip-path:inset(0 0 0 0)}
.guide-process:has([data-step="2"][aria-pressed="true"]) .specimen-piece{color:var(--lime);transition-delay:.12s}
.motion-paused .brand-specimen *{transition:none!important}
@media(max-width:600px){
 .brand-specimen{height:280px}
 .specimen-annotation{left:18px;font-size:12px}
 .specimen-paper{top:44px;height:210px}
 .specimen-piece{top:117px}
 .specimen-piece>small{font-size:8px;letter-spacing:.05em;top:-25px}
 .specimen-published{inset:44px 12px 16px}
 .specimen-published span{left:15px;right:15px;font-size:12px;bottom:14px;gap:12px}
 .guide-process:has([data-step="1"][aria-pressed="true"]) .specimen-type,.guide-process:has([data-step="2"][aria-pressed="true"]) .specimen-type{left:8%}
 .guide-process:has([data-step="1"][aria-pressed="true"]) .specimen-colour,.guide-process:has([data-step="2"][aria-pressed="true"]) .specimen-colour{left:39%;gap:4px}
 .guide-process:has([data-step="1"][aria-pressed="true"]) .specimen-voice,.guide-process:has([data-step="2"][aria-pressed="true"]) .specimen-voice{left:70%;width:25%}
 .guide-process:has([data-step="1"][aria-pressed="true"]) .specimen-type strong,.guide-process:has([data-step="2"][aria-pressed="true"]) .specimen-type strong{font-size:clamp(48px,13vw,72px)}
 .guide-process:has([data-step="1"][aria-pressed="true"]) .specimen-colour i,.guide-process:has([data-step="2"][aria-pressed="true"]) .specimen-colour i{width:clamp(13px,4.2vw,22px);height:61px}
 .guide-process:has([data-step="1"][aria-pressed="true"]) .specimen-voice strong,.guide-process:has([data-step="2"][aria-pressed="true"]) .specimen-voice strong{font-size:clamp(17px,5.3vw,26px);line-height:1.12}
}
@media(prefers-reduced-motion:reduce){.brand-specimen *{transition:none!important}}