/* Shared process system: calm hierarchy, consistent controls, wide visuals. */
#creative-process.process-section,#services.process-section{
  --process-ink:#1d1d1f;--process-secondary:#60605b;--process-rule:#d7d7d1;
  background:#ffffff;color:var(--process-ink);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,88px);
  align-items:start;padding:clamp(64px,8vw,112px) 6vw;
}
#creative-process .process-lead,#services .process-lead{position:sticky;top:112px;display:block;min-width:0;align-self:start}
#creative-process h2,#services #services-title{font-size:clamp(28px,2.65vw,42px);font-weight:500;line-height:1.14;letter-spacing:-.025em;max-width:27ch;margin:0 0 32px;text-wrap:pretty}
#services .process-intro{display:block;position:static;margin:0;grid-column:auto}
#services .process-intro>p{font-size:17px;line-height:1.5;color:var(--process-secondary);margin:-12px 0 18px;max-width:34ch}
#services .process-intro>a{font-size:15px;color:var(--process-ink);margin-bottom:32px}
#creative-process .process-visual,#services .process-visual{position:relative;top:auto;aspect-ratio:1.65;max-height:none;width:100%;max-width:none;padding:0;margin:0;background:#202421;overflow:hidden;grid-column:auto;grid-row:auto}
#creative-process .preview-canvas{aspect-ratio:1.65;height:100%;margin:0;max-height:none}
#services .shop-scene svg{width:100%;height:100%}
#services .mfg-steps,#creative-process .process-flow{grid-column:2;grid-row:auto;width:100%;min-width:0;border:0}
#creative-process .process-flow-step,#services .mfg-step{background:transparent;color:var(--process-ink);border:0;border-top:1px solid var(--process-rule);margin:0;padding:0;box-shadow:none}
#creative-process .process-flow-step:last-child,#services .mfg-step:last-child{border-bottom:1px solid var(--process-rule)}
#creative-process .process-flow-step::before,#creative-process .process-flow-step::after{display:none}
#creative-process .process-flow-toggle,#services .mfg-step summary{display:grid;grid-template-columns:28px minmax(0,1fr) 18px;gap:16px;padding:25px 0;align-items:center;min-height:80px;color:var(--process-ink);background:none;text-align:left}
#creative-process .process-flow-title,#services .mfg-step h3{font-size:clamp(21px,1.9vw,28px);font-weight:500;line-height:1.2;letter-spacing:-.02em;margin:0}
#creative-process .process-flow-number,#services .step-number{font-size:13px;line-height:1.4;font-weight:400;color:#73736e;padding:0;align-self:center;font-variant-numeric:tabular-nums}
#creative-process [data-open=true] .process-flow-number,#services .mfg-step[open] .step-number{color:#ad4607}
#creative-process .process-flow-icon{grid-column:3;grid-row:1;align-self:center}
#creative-process .process-flow-toggle:hover .process-flow-title,#services summary:hover h3{color:#ad4607}
#creative-process .process-flow-content,#services .step-body{display:grid;grid-template-columns:1fr;gap:18px;padding:0 34px 28px 44px}
#creative-process .process-flow-content p,#services .step-body p{font-size:16px;line-height:1.55;color:var(--process-secondary);max-width:43ch;margin:0}
#creative-process .process-flow-deliverable,#services .step-result{border:0;padding:0}
#creative-process .process-flow-deliverable p,#services .step-result p{color:var(--process-ink);font-size:15px;line-height:1.5;font-weight:500}
#creative-process .process-flow-toggle:focus-visible,#services summary:focus-visible{outline:2px solid #ad4607;outline-offset:5px;border-radius:2px}
@media(max-width:900px){
 #creative-process.process-section,#services.process-section{grid-template-columns:1fr;gap:32px;padding:64px 6vw}
 #creative-process .process-lead,#services .process-lead{position:static;max-width:620px;width:100%}
 #creative-process h2,#services #services-title{font-size:32px;max-width:27ch;margin-bottom:28px}
 #services .mfg-steps,#creative-process .process-flow{grid-column:1;grid-row:auto}
 #creative-process .process-flow-toggle,#services .mfg-step summary{padding:23px 0;min-height:76px}
}
@media(max-width:480px){
 #creative-process.process-section,#services.process-section{padding:52px 24px}
 #creative-process h2,#services #services-title{font-size:28px}
 #creative-process .process-flow-title,#services .mfg-step h3{font-size:21px}
 #creative-process .process-flow-content,#services .step-body{padding-left:44px;padding-right:0}
 #creative-process .process-flow-content p,#services .step-body p{font-size:15px}
}

/* Shared brand palette for the manufacturing and film process visuals. */
#creative-process .process-visual,#creative-process .preview-canvas,#services .process-visual{background:#000;color:#ffffff}
#creative-process .preview-scene>svg{stroke:#c8c8c8}
#creative-process .plan-type,#services .shop-scene text{fill:#c8c8c8}
#creative-process .edit-timeline{background:#141414}
#creative-process .audio-track i{background:#f47b32}
#creative-process .edit-playhead{background:#f47b32}
#creative-process .audio-track i{background:#f47b32!important}
#creative-process .edit-timeline{border-top-color:#606060}
#creative-process .edit-track img.active-clip{outline-color:#f47b32}
#creative-process .edit-playhead{border-left-color:#f47b32}

/* Make the expanded step unmistakable on both process sections. */
#creative-process .process-flow-step:is([data-open=true],[data-closing=true]),#services .mfg-step[open]{background:#000;color:#fff}
#creative-process .process-flow-step:is([data-open=true],[data-closing=true]) .process-flow-toggle,#services .mfg-step[open] summary{color:#fff;padding-inline:24px}
#creative-process .process-flow-step:is([data-open=true],[data-closing=true]) .process-flow-number,#services .mfg-step[open] .step-number{color:#f47b32}
#creative-process .process-flow-step:is([data-open=true],[data-closing=true]) .process-flow-title,#services .mfg-step[open] h3{color:#fff}
#creative-process .process-flow-step:is([data-open=true],[data-closing=true]) .process-flow-content,#services .mfg-step[open] .step-body{padding-left:68px;padding-right:28px}
#creative-process .process-flow-step:is([data-open=true],[data-closing=true]) .process-flow-content p,#services .mfg-step[open] .step-body p{color:#c9c9c4}
#creative-process .process-flow-step:is([data-open=true],[data-closing=true]) .process-flow-deliverable p,#services .mfg-step[open] .step-result p{color:#fff}
#creative-process .process-flow-step:is([data-open=true],[data-closing=true]) .process-flow-toggle:focus-visible,#services .mfg-step[open] summary:focus-visible{outline-color:#f47b32;outline-offset:-3px}
@media(max-width:480px){
 #creative-process .process-flow-step:is([data-open=true],[data-closing=true]) .process-flow-toggle,#services .mfg-step[open] summary{padding-inline:16px}
 #creative-process .process-flow-step:is([data-open=true],[data-closing=true]) .process-flow-content,#services .mfg-step[open] .step-body{padding-left:60px;padding-right:20px}
}

/* Keep text geometry and selected colors stable until the panel has closed. */
#creative-process .process-flow-step,#services .mfg-step{transition:none;overflow-anchor:none}
#creative-process .process-flow-toggle,#services .mfg-step summary{padding-inline:24px}
#creative-process .process-flow-content,#services .step-body{padding-left:68px;padding-right:28px}
#creative-process .process-flow-panel,#creative-process .process-flow-content>div{transition:none;transform:none}
#creative-process .process-flow-step[data-closing=true] .process-flow-panel{opacity:1;visibility:visible}
#creative-process .process-flow-step[data-closing=true] .process-flow-content>div{opacity:1;transform:none}
@media(max-width:480px){#creative-process .process-flow-toggle,#services .mfg-step summary{padding-inline:16px}#creative-process .process-flow-content,#services .step-body{padding-left:60px;padding-right:20px}}

/* Fade the selected surface and its text together after a clean collapse. */
#creative-process .process-flow-step,#services .mfg-step{background-color:#ffffff;transition:background-color 480ms cubic-bezier(.4,0,.2,1),color 480ms cubic-bezier(.4,0,.2,1)}
#creative-process .process-flow-step:is([data-open=true],[data-closing=true]),#services .mfg-step[open]{background-color:#000}
#creative-process .process-flow-toggle,#creative-process .process-flow-title,#creative-process .process-flow-number,#creative-process .process-flow-icon,
#services .mfg-step summary,#services .mfg-step h3,#services .step-number,#services .step-plus{transition:color 480ms cubic-bezier(.4,0,.2,1)}
@media(prefers-reduced-motion:reduce){#creative-process .process-flow-step,#services .mfg-step,#creative-process .process-flow-toggle,#creative-process .process-flow-title,#creative-process .process-flow-number,#creative-process .process-flow-icon,#services .mfg-step summary,#services .mfg-step h3,#services .step-number,#services .step-plus{transition:none!important}}

/* On phones, each selected step owns the shared animation. */
.mobile-process-visual{display:none}
@media(max-width:760px){
 #services .mobile-process-visual:not(:empty),#creative-process .mobile-process-visual:not(:empty){display:block;padding:0 16px 24px}
 #services .mobile-process-visual .process-visual,#creative-process .mobile-process-visual .process-visual{width:100%;aspect-ratio:1.65;margin:0}
 #services .process-intro>a{margin-bottom:0}
 #services .mfg-step,#creative-process .process-flow-step{scroll-margin-top:88px}
}

@media(max-width:760px){
 #services .mfg-step,#creative-process .process-flow-panel{overflow:hidden}
 .process-visual-outgoing{pointer-events:none!important}
 .process-visual-outgoing *{animation-play-state:paused!important;transition:none!important}
}

.manufacturing-step-visual{display:none}
@media(max-width:760px){
 #services .process-lead>.shop-preview[hidden]{display:none!important}
 #services .mfg-step{box-sizing:border-box}
 #services .mfg-step[data-closing=true] .manufacturing-step-visual{opacity:0;transition:opacity 220ms ease-out}
}

/* Eurostile step numbers anchor the right edge on mobile. */
@media(max-width:760px){
 #creative-process .process-flow-toggle{grid-template-columns:minmax(0,1fr) 48px 16px;gap:12px}
 #creative-process .process-flow-title{grid-column:1;grid-row:1}
 #creative-process .process-flow-number{grid-column:2;grid-row:1;justify-self:end;font-family:'Offer Eurostile','Eurostile',sans-serif;font-size:38px;line-height:1;font-weight:400;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
 #creative-process .process-flow-icon{grid-column:3;grid-row:1}
 #creative-process .process-flow-content,
 #creative-process .process-flow-step:is([data-open=true],[data-closing=true]) .process-flow-content{padding-left:16px;padding-right:20px}
}

@media(max-width:760px){
 #creative-process .process-flow-toggle{grid-template-columns:minmax(0,1fr) 54px;gap:16px}
 #creative-process .process-flow-icon{display:none}
 #creative-process .process-flow-number{grid-column:2;justify-self:end;font-family:'Wild West Eurostile Heavy','Eurostile',sans-serif;font-weight:850;font-synthesis:none;font-size:40px;line-height:1;letter-spacing:-.035em}
}