/* Approved Figma service screens. Scoped to the replacement services only. */
html:has(.studio-standalone){scroll-snap-type:none}
.studio-services{width:min(1440px,100vw);max-width:none;position:relative;left:50%;transform:translateX(-50%);margin:0;scroll-margin-top:0}
.service-screen{min-height:700px;height:100svh;display:grid;grid-template-rows:minmax(396px,1fr) 96px;gap:84px;padding:120px 40px 40px;box-sizing:border-box;background:var(--brand-background);scroll-margin-top:0}
.service-composition{display:grid;grid-template-columns:minmax(0,608fr) minmax(0,544fr);column-gap:clamp(48px,11.111vw,160px);align-items:center;padding:0 24px;min-width:0}
.service-copy{min-width:0;display:flex;flex-direction:column;gap:24px}
.studio-standalone .service-copy h2{font-family:DM,Arial,sans-serif;font-weight:500;font-style:normal;font-size:46px;line-height:49px;letter-spacing:-.04em;margin:0;font-variation-settings:'opsz' 14}
.service-copy p{font-size:16px;line-height:25px;letter-spacing:-.01em;max-width:480px;margin:0;color:var(--brand-text-tertiary);font-variation-settings:'opsz' 14}
.strategy{position:relative;width:100%;aspect-ratio:544/396;min-width:0;color:var(--brand-text)}
.strategy ol{list-style:none;margin:0;padding:0}
.strategy li{position:absolute;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;background:var(--brand-background)}
.node-index{font-size:10px;line-height:13px;letter-spacing:-.01em;font-weight:400;opacity:.65;color:var(--brand-text-secondary);font-variant-numeric:tabular-nums}
.node-label{display:flex;align-items:center;justify-content:center;flex-direction:column;flex-shrink:0;min-height:66px;width:calc(100% + 16px);padding:8px 12px;border:.7px solid var(--brand-border);border-radius:8px;background:var(--wycf-paper);box-shadow:0 2px 4px rgba(41,36,26,.11),inset 0 1px 1px rgba(255,255,255,.85);font-size:15px;font-weight:500;line-height:21px;letter-spacing:-.01em;font-variation-settings:'opsz' 14}
.diagram-asset{display:block;position:absolute;max-width:none;pointer-events:none;user-select:none}
.loop-connection{width:25.12%;height:25.92%}
.connection-1{left:59.926%;top:12.727%}.connection-2{left:59.926%;top:61.305%}.connection-3{left:14.96%;top:61.364%}.connection-4{left:14.97%;top:12.73%}
.editorial-orbit li:nth-child(1){left:35.294%;top:1.515%;width:29.412%}
.editorial-orbit li:nth-child(2){left:67.279%;top:39.394%;width:32.721%}
.editorial-orbit li:nth-child(3){left:33.824%;top:76.768%;width:32.353%}
.editorial-orbit li:nth-child(4){left:0;top:39.394%;width:31.618%}
.cycle-direction{left:82.65%;top:34.79%;width:3.482%;height:4.095%}
.loop-signal{left:77.5276%;top:21.0227%;width:1.10294%;height:1.51515%}
.editorial-path li{left:20.588%;width:58.824%;top:0}
.editorial-path li:nth-child(2){top:27.525%}.editorial-path li:nth-child(3){top:55.05%}.editorial-path li:nth-child(4){top:82.576%}
.editorial-path .node-label{width:248px;max-width:100%;min-height:48px;padding:2px 12px}
.progression-connector{left:49.2%;top:calc(19.9495% + var(--step)*27.5253%);width:1.6005%;height:5.2293%}
.service-case-entry{appearance:none;width:100%;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:32px;padding:20px 24px;border:1px solid var(--brand-border);border-radius:10px;background:transparent;text-align:left;color:var(--brand-text);font-family:DM,Arial,sans-serif;cursor:pointer;transition:background-color 160ms ease,border-color 160ms ease}
.service-case-identification{display:flex;flex-direction:column;gap:4px;min-width:0}
.service-case-name{font-family:var(--brand-font-editorial);font-weight:400;font-style:normal;font-size:22px;line-height:29px;letter-spacing:-.05em}
#launch-campaign .service-case-name{letter-spacing:-.02em}
.service-case-context{font-size:13px;line-height:18px;color:var(--brand-text-tertiary)}
.service-case-action{flex-shrink:0;font-size:13px;line-height:17px;font-weight:500;white-space:nowrap}
.service-case-entry:hover{background:var(--brand-surface-light);border-color:var(--brand-border-strong)}
.service-case-entry:focus-visible{outline:2px solid var(--brand-text-secondary);outline-offset:4px}
@media(min-width:851px) and (max-height:800px){.service-screen{padding-top:56px;gap:40px;height:auto;min-height:100svh}}
@media(min-width:851px) and (max-width:1250px){.service-composition{column-gap:48px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.studio-standalone .service-copy h2{font-size:clamp(32px,3.2vw,44px);line-height:1.08}.node-label{font-size:13px;line-height:18px}.desktop-copy-break{display:none}}
@media(max-width:850px){
 .service-screen{height:auto;min-height:0;padding:64px 24px 32px;gap:40px;grid-template-rows:auto auto}
 .service-composition{grid-template-columns:1fr;padding:0;gap:40px}
 .service-copy{gap:20px}.studio-standalone .service-copy h2{font-size:34px;line-height:1.1;letter-spacing:-.04em}.service-copy p{font-size:15px;line-height:24px;max-width:480px}
 .strategy{max-width:544px;justify-self:center;min-height:380px;aspect-ratio:544/396}
 .node-label{font-size:13px;line-height:18px;padding:8px;min-height:66px}
 .service-case-entry{min-height:110px;align-items:flex-start;flex-direction:column;gap:16px;padding:20px}
 .service-case-name{font-size:22px}.service-case-context{font-size:12px;line-height:18px}.service-case-action{align-self:flex-end}
 .desktop-copy-break{display:none}
 .editorial-orbit li:nth-child(1),.editorial-orbit li:nth-child(3){left:33%;width:34%}
 .editorial-orbit li:nth-child(2){left:auto;right:0;width:35%}.editorial-orbit li:nth-child(4){width:35%}
 .editorial-orbit .node-label{width:calc(100% + 8px)}
 .editorial-path .node-label{width:248px;max-width:calc(100vw - 88px);min-height:48px}.editorial-path li{left:10%;width:80%}
}
@media(max-width:370px){.service-screen{padding-inline:20px}.studio-standalone .service-copy h2{font-size:31px}.editorial-orbit .node-label{font-size:12px;line-height:17px}}
@media(prefers-reduced-motion:reduce){.service-case-entry{transition:none}}
/* Each chapter is a native scroll stop, without intercepting wheel gestures. */
html:has(.studio-standalone){scroll-snap-type:y mandatory;scroll-padding-top:0}
.studio-standalone .heading,.service-screen,.studio-standalone .studio-selected,.studio-standalone .inline-contact,.studio-standalone .call-footer{scroll-snap-align:start;scroll-snap-stop:always}
.service-screen{grid-template-rows:minmax(396px,1fr) 80px;padding-top:96px;gap:64px}
.service-case-entry{width:calc(100% - 48px);margin-inline:24px;padding:12px 20px;border-radius:8px;gap:24px}
.service-case-name{font-size:20px;line-height:26px}.service-case-context{font-size:12px;line-height:17px}.service-case-action{font-size:12px}
@media(min-width:851px) and (max-height:800px){.service-screen{padding-top:40px;gap:32px}}
@media(max-width:850px){
 .service-screen{grid-template-rows:1fr auto;padding-top:48px;gap:32px;min-height:100svh}
 .service-case-entry{width:100%;margin-inline:0;min-height:0;padding:16px;gap:12px}
 .service-composition{gap:32px}.service-case-name{font-size:20px}.service-case-context{font-size:12px}
}

/* Supporting service typography follows the quieter scale of the approved hero. */
.studio-standalone .service-copy h2{font-size:clamp(28px,2.5vw,36px);line-height:1.15;letter-spacing:-.035em;font-weight:500}
.service-copy{gap:18px}
.service-copy p{font-size:13px;line-height:21px;max-width:420px;letter-spacing:-.01em}
.node-label{font-size:13px;line-height:19px;font-weight:400}
.service-case-name{font-size:18px;line-height:24px}
.service-case-context{font-size:11px;line-height:17px}
.service-case-action{font-size:11px;font-weight:400}
@media(max-width:850px){
 .studio-standalone .service-copy h2{font-size:26px;line-height:1.16}
 .service-copy{gap:16px}
 .service-copy p{font-size:13px;line-height:21px}
 .node-label{font-size:12px;line-height:18px}
 .service-case-name{font-size:18px}
 .service-case-context{font-size:11px;line-height:17px}
}

/* An editorial footer, aligned to the existing screen composition. */
.service-case-entry{border:0;border-top:1px solid var(--brand-border);border-radius:0;background:none;box-shadow:none;padding-inline:0}
.service-case-entry:hover{background:none;border-color:var(--brand-border)}
.service-case-entry:hover .service-case-action{text-decoration:underline;text-underline-offset:4px}

/* Preserve the composition while the editorial loop draws clockwise. */
#media-property.motion-prepared .service-copy,
#media-property.motion-prepared .service-case-entry,
#media-property.motion-prepared .editorial-orbit li,
#media-property.motion-prepared .cycle-direction,
#media-property.motion-prepared .loop-signal{opacity:0}
#media-property.motion-prepared .loop-connection path{stroke-dasharray:1;stroke-dashoffset:1}
#media-property .loop-connection{overflow:visible}
@media(prefers-reduced-motion:reduce){
 html:has(.studio-standalone){scroll-behavior:auto;scroll-snap-type:none}
 #media-property.motion-prepared .service-copy,
 #media-property.motion-prepared .service-case-entry,
 #media-property.motion-prepared .editorial-orbit li,
 #media-property.motion-prepared .cycle-direction,
 #media-property.motion-prepared .loop-signal{opacity:1}
 #media-property.motion-prepared .loop-connection path{stroke-dashoffset:0}
}
#media-property .signal-running .loop-signal{visibility:hidden}
#media-property .orbit-energy{pointer-events:none}
@media(prefers-reduced-motion:reduce){#media-property .orbit-energy{display:none}}

/* A soft light passes through each word block as the signal reaches it. */
#media-property .editorial-orbit .node-label{position:relative;isolation:isolate}
#media-property .editorial-orbit .node-label::after{
 content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
 border:1px solid rgba(125,112,90,.48);
 background:linear-gradient(145deg,rgba(255,255,255,.62),rgba(255,255,255,0) 70%);
 box-shadow:0 0 0 3px rgba(171,154,126,.055),0 3px 13px rgba(110,94,70,.09),inset 0 1px 0 rgba(255,255,255,.85);
 opacity:0;z-index:-1;
}
#media-property .signal-running .node-label::after{animation:loop-node-light 6s linear infinite}
#media-property .signal-running li:nth-child(2) .node-label::after{animation-delay:1.5s}
#media-property .signal-running li:nth-child(3) .node-label::after{animation-delay:3s}
#media-property .signal-running li:nth-child(4) .node-label::after{animation-delay:4.5s}
@keyframes loop-node-light{
 0%{opacity:0;animation-timing-function:cubic-bezier(.4,0,.2,1)}
 7%{opacity:1;animation-timing-function:cubic-bezier(.4,0,.2,1)}
 20%,100%{opacity:0}
}
@media(prefers-reduced-motion:reduce){#media-property .signal-running .node-label::after{animation:none}}

/* The moving light supplies direction without a separate arrow or bead. */
#media-property .cycle-direction,#media-property .loop-signal{display:none}

/* Campaign unfolds as four offset steps in the same space as the editorial loop. */
.editorial-path{aspect-ratio:544/430}
.editorial-path li{width:58%;align-items:flex-start;text-align:left;background:transparent;z-index:1}
.editorial-path li:nth-child(1){left:0;top:0}
.editorial-path li:nth-child(2){left:14%;top:26%}
.editorial-path li:nth-child(3){left:28%;top:52%}
.editorial-path li:nth-child(4){left:42%;top:78%}
.editorial-path .node-index{padding-left:12px}
.editorial-path .node-label{width:100%;max-width:none;box-sizing:border-box;min-height:58px;padding:10px 14px;align-items:flex-start;justify-content:center;position:relative}
.campaign-connections{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.campaign-connections path{fill:none;stroke:var(--brand-border-strong,#b9b2a7);stroke-width:1;stroke-linecap:round}
.campaign-connections .campaign-light{stroke:#a18a61;stroke-width:1.7;opacity:0}
.editorial-path.is-active .campaign-light{animation:campaign-light 6s ease-in-out infinite;animation-delay:var(--delay)}
.editorial-path .node-label::after{content:"";position:absolute;inset:-1px;border:1px solid #a18a6180;border-radius:inherit;box-shadow:0 2px 14px #a18a611c,inset 0 1px 0 #fff;pointer-events:none;opacity:0}
.editorial-path.is-active .node-label::after{animation:campaign-node 6s ease-in-out infinite;animation-delay:var(--delay)}
@keyframes campaign-light{0%,8%{opacity:0;stroke-dasharray:1;stroke-dashoffset:1}14%{opacity:.85}29%{opacity:.85;stroke-dashoffset:0}40%,100%{opacity:0;stroke-dashoffset:0}}
@keyframes campaign-node{0%,25%,100%{opacity:0}8%,15%{opacity:1}}
@media(max-width:850px){.editorial-path{min-height:400px}.editorial-path .node-label{min-height:64px;font-size:12px;line-height:17px}}
@media(prefers-reduced-motion:reduce){.editorial-path.is-active .campaign-light,.editorial-path.is-active .node-label::after{animation:none}}

/* Both strategy models share the campaign's restrained signal choreography. */
#media-property .signal-running .orbit-energy{
 opacity:0;animation:campaign-light 6s ease-in-out infinite;
 animation-delay:var(--delay);
}
#media-property .signal-running .node-label::after{
 border-color:#a18a6180;background:none;
 box-shadow:0 2px 14px #a18a611c,inset 0 1px 0 #fff;
 animation:campaign-node 6s ease-in-out infinite;
}
#media-property .signal-running li:nth-child(1) .node-label::after{animation-delay:0s}
#media-property .signal-running li:nth-child(2) .node-label::after{animation-delay:1.2s}
#media-property .signal-running li:nth-child(3) .node-label::after{animation-delay:2.4s}
#media-property .signal-running li:nth-child(4) .node-label::after{animation-delay:3.6s}
@media(prefers-reduced-motion:reduce){
 #media-property .signal-running .orbit-energy,
 #media-property .signal-running .node-label::after{animation:none}
}

/* Match Campaign: hairline track with a distinct stroke painting over it. */
#media-property .loop-connection>path:not(.orbit-energy){
 stroke:var(--brand-border-strong,#b9b2a7);stroke-width:1;
 opacity:1;fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke;
}
#media-property .loop-connection>.orbit-energy{
 stroke:#a18a61;stroke-width:1.7;fill:none;stroke-linecap:round;
 vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;
}

/* Restart promptly after the final step, without speeding up the individual strokes. */
.editorial-path.is-active .campaign-light{animation-duration:4.8s;animation-name:campaign-light-compact}
.editorial-path.is-active .node-label::after,
#media-property .signal-running .node-label::after{animation-duration:4.8s;animation-name:campaign-node-compact}
#media-property .signal-running .orbit-energy{animation-duration:4.8s;animation-name:campaign-light-compact}
@keyframes campaign-light-compact{
 0%,10%{opacity:0;stroke-dasharray:1;stroke-dashoffset:1}
 17.5%{opacity:.85}
 36.25%{opacity:.85;stroke-dashoffset:0}
 50%,100%{opacity:0;stroke-dashoffset:0}
}
@keyframes campaign-node-compact{0%,31.25%,100%{opacity:0}10%,18.75%{opacity:1}}