/* Page-scroll timeline: all copy remains readable without JavaScript. */
.branding-grid{align-items:start}
/* A shared, fixed-size image frame crossfades with the active timeline item. */
.branding-grid .interview-example{isolation:isolate;background:var(--white);height:auto;aspect-ratio:1 / 1}
.branding-grid .interview-example .branding-image{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center;opacity:0;transform:scale(1.035);transition:opacity 480ms ease,transform 700ms ease;pointer-events:none}
.branding-grid .interview-example .branding-image.is-active{opacity:1;transform:scale(1);z-index:1}
.branding-output{position:relative;display:block;justify-content:normal;border-left:1px solid rgb(0 0 0 / 20%);margin-left:calc(var(--layout-gap) * -.5);padding-left:calc(var(--layout-gap) * .5);--timeline-progress:16.667%}
.branding-output::before{content:"";position:absolute;left:-1px;top:0;width:2px;height:var(--timeline-progress);max-height:100%;background:var(--brand);transition:height 280ms ease}
.branding-output article,.branding-output article:last-child{position:relative;display:flex;flex-direction:column;justify-content:center;border:0;padding-block:32px;transition:opacity 280ms ease}
.branding-output article::before{content:"";position:absolute;left:calc(var(--layout-gap) * -.5 - 6px);top:50%;width:11px;height:11px;transform:translateY(-50%);border:1px solid var(--black);border-radius:50%;background:var(--white);transition:background-color 280ms ease,border-color 280ms ease}
.branding-output[data-timeline-ready] article{opacity:.25}
.branding-output[data-timeline-ready] article.is-active{opacity:1}
.branding-output article.is-active::before{background:var(--brand);border-color:var(--brand)}
.channel-overview{grid-template-columns:minmax(0,1fr)}
.channel-copy{display:grid;grid-template-columns:var(--split-columns);column-gap:var(--layout-gap);align-items:start}
.channel-copy>h4{grid-row:1 / 3}
.channel-copy>p{max-width:none}
.channel-copy .channel-takeaway{margin-top:24px}
#youtube .channel-workflow{padding-top:0;border-top:0;margin-top:32px}
#youtube .channel-flow{margin-top:0}
.production-tags{display:flex;flex-wrap:wrap;align-content:center;gap:10px 18px;font-weight:500}
.production-tags span{display:inline-block}
.channel-footnote{font-size:14px;line-height:1.8;letter-spacing:-.02em;margin-top:28px}
@media(min-width:1025px){
  .branding-grid .interview-example{position:sticky;top:max(104px,calc(50vh - 290px));width:min(100%,58vh,580px);justify-self:end}
  .branding-output article{min-height:54vh}
  #youtube .channel-flow{--flow-columns:5}
}
@media(min-width:768px) and (max-width:1024px){
  .branding-grid .interview-example{position:sticky;top:max(112px,calc(50vh - 210px));width:min(100%,54vh,420px);justify-self:start}
  .branding-output article{min-height:48vh}
  #youtube .channel-flow{--flow-columns:5}
  .channel-flow>li{padding-inline:8px}
}
@media(max-width:767px){
  .branding-grid .interview-example{position:sticky;top:88px;width:min(100%,48vh,420px);justify-self:center;z-index:2;outline:16px solid var(--white)}
  .branding-output{margin-left:6px;padding-left:26px}
  .branding-output article{min-height:42vh}
  .branding-output article::before{left:-32px}
  .channel-copy>h4{grid-row:auto}
  .channel-copy{row-gap:0}
  .channel-copy .channel-takeaway{margin-top:24px}
  #youtube .channel-flow{--flow-columns:1}
  .production-tags{gap:8px 14px}
  .channel-footnote{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  .branding-output::before,.branding-output article,.branding-output article::before,.branding-grid .interview-example .branding-image{transition:none}
  .branding-grid .interview-example .branding-image{transform:none}
}

/* Warm interview background, including the sticky frame clearance. */
#branding{--interview-background:var(--white);background:var(--interview-background)}
#branding .branding-output article::before{background:var(--interview-background)}
#branding .branding-output article.is-active::before{background:var(--brand)}
@media(max-width:767px){#branding .branding-grid .interview-example{outline-color:var(--interview-background)}}