/* "Who does what" with gums, owner-approved and locked 2026-10-29 (Daniel: "great- submit both animations to lead as assets that can be used...
   ask it to hand the animation with the gums to claude for publishing to the website"; Codex who-does-what v002, revision 13, APPROVED-LOCK.json).
   Site placement of the locked style.css: every rule scoped to .dio-who-does-what, values unchanged. Dropped: @font-face, the page shell
   (:root/body/main/header/footer), the private version navigation, and the unused stage-flat-arch background (the locked v13 layer sets
   .wd-scene::after to content:none). h1/h2 are shown as h3/h4. The arch field masks with the site's own assets/arch-tile.svg (same file, same
   hash as the lock's copy), referenced from this stylesheet's folder. Container queries already follow the component (.wd-figure). */
.dio-who-does-what{--wd-font:'Avenir Next',Avenir,Nunito Sans,system-ui,sans-serif;--wd-navy:#2f4452;--wd-orange:#ed873c;font-family:var(--wd-font);font-synthesis:none;color:var(--wd-navy);background:#fff}
.dio-who-does-what *{box-sizing:border-box}
.dio-who-does-what .wd-head{margin-bottom:14px}.dio-who-does-what .wd-title{font:600 26px/1.3 var(--wd-font);letter-spacing:-.025em;margin:0;color:var(--wd-navy)}
.dio-who-does-what .wd-controls{display:flex;gap:18px;margin:0 0 16px}.dio-who-does-what .wd-controls[hidden]{display:none}.dio-who-does-what .wd-controls button{font:500 14px/1.3 var(--wd-font);color:var(--wd-navy);background:transparent;min-height:48px;min-width:60px;padding:8px 4px;border:0;border-bottom:1px solid #b6c5cd;border-radius:0;cursor:pointer}.dio-who-does-what .wd-controls .wd-play{font-weight:600;border-bottom:2px solid var(--wd-orange)}.dio-who-does-what .wd-controls button:hover{border-color:var(--wd-orange)}.dio-who-does-what .wd-controls button[aria-pressed=true]{border-bottom:2px solid #4c7288}.dio-who-does-what .wd-controls button:disabled{opacity:.55;cursor:default}.dio-who-does-what button:focus-visible{outline:2px solid var(--wd-navy);outline-offset:3px}
.dio-who-does-what .wd-figure{margin:0;container-type:inline-size}.dio-who-does-what .wd-scene{--wd-cut:32px;position:relative;isolation:isolate;background:var(--wd-orange);color:#fff;padding:0;aspect-ratio:1;--native-width:calc((100cqw - 106px)*1.549100968);--native-height:calc((100cqw - 106px)*1.355463347);--native-left:calc(50cqw - 2px - (100cqw - 106px)*.691562932);--native-top:calc(82px - (100cqw - 106px)*.175656985);--pattern-size:calc((100cqw - 106px)*.968188105);clip-path:polygon(var(--wd-cut) 0,100% 0,100% calc(100% - var(--wd-cut)),calc(100% - var(--wd-cut)) 100%,0 100%,0 var(--wd-cut))}
.dio-who-does-what .wd-scene::before{content:"";position:absolute;inset:2px;z-index:-2;background:var(--wd-navy);--wd-inner-cut:calc(var(--wd-cut) - 1.171572875px);clip-path:polygon(var(--wd-inner-cut) 0,100% 0,100% calc(100% - var(--wd-inner-cut)),calc(100% - var(--wd-inner-cut)) 100%,0 100%,0 var(--wd-inner-cut))}
.dio-who-does-what .wd-scene::after{content:none}
/* Caption position follows measured native anatomy; its meaning still follows video time. */
.dio-who-does-what .wd-explainer{position:absolute;z-index:2;left:20px;right:20px;top:calc(82px + (100cqw - 106px)*.305670816);transform:translateY(calc(-100% - 12px));display:grid;align-items:center;min-height:0;max-width:620px;margin:0 auto;text-align:center;pointer-events:none}
.dio-who-does-what .wd-beat{grid-area:1/1;visibility:hidden;opacity:0;transition:opacity .22s ease}.dio-who-does-what .wd-beat h4{font:600 23px/1.25 var(--wd-font);letter-spacing:-.02em;margin:0 0 7px;color:#fff}.dio-who-does-what .wd-beat p{font:400 17px/1.4 var(--wd-font);margin:0;color:#dce6eb}.dio-who-does-what .wd-beat-surgery h4,.dio-who-does-what .wd-summary>div:first-child h4{color:#f3a0a2}.dio-who-does-what .wd-beat-restorative h4,.dio-who-does-what .wd-summary>div:last-child h4{color:#fff}
.dio-who-does-what .wd-summary{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}.dio-who-does-what .wd-summary h4{font-size:20px}.dio-who-does-what .wd-summary p{font-size:16px}.dio-who-does-what .wd-scene[data-stage=surgery] .wd-beat-surgery,.dio-who-does-what .wd-scene[data-stage=restorative] .wd-beat-restorative,.dio-who-does-what .wd-scene[data-stage=complete] .wd-beat-complete{visibility:visible;opacity:1}
.dio-who-does-what .wd-beat-surgery p,.dio-who-does-what .wd-summary>div:first-child p{color:#f3a0a2}
.dio-who-does-what .wd-media{position:absolute;inset:2px;width:auto;max-width:none;margin:0;aspect-ratio:auto;overflow:hidden}.dio-who-does-what.dio-who-does-what .wd-media .wd-poster,.dio-who-does-what .wd-video{display:block;position:absolute;inset:auto;width:var(--native-width);height:var(--native-height);max-width:none;max-height:none;left:var(--native-left);top:var(--native-top);object-fit:contain;border-radius:0;box-shadow:none;margin:0}.dio-who-does-what .wd-video{visibility:hidden}.dio-who-does-what .wd-scene[data-view=motion] .wd-video{visibility:visible}.dio-who-does-what .wd-scene[data-view=motion] .wd-media .wd-poster{visibility:hidden}
.dio-who-does-what .wd-figure figcaption{font:400 14px/1.55 var(--wd-font);color:#526975;margin:18px 0 0;padding:0;text-align:left;background:none}.dio-who-does-what .wd-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.dio-who-does-what .wd-media{--wd-surface-cut:calc(var(--wd-cut) - 1.171572875px);clip-path:polygon(var(--wd-surface-cut) 0,100% 0,100% calc(100% - var(--wd-surface-cut)),calc(100% - var(--wd-surface-cut)) 100%,0 100%,0 var(--wd-surface-cut))}
@container(max-width:600px){.dio-who-does-what .wd-scene{--wd-cut:24px;padding:0}.dio-who-does-what .wd-explainer{left:14px;right:14px}.dio-who-does-what .wd-beat h4{font-size:21px}.dio-who-does-what .wd-beat p{font-size:15px}.dio-who-does-what .wd-summary{gap:16px}.dio-who-does-what .wd-summary h4{font-size:17px}.dio-who-does-what .wd-summary p{font-size:14px}.dio-who-does-what .wd-figure figcaption{font-size:13px}}
@container(max-width:340px){.dio-who-does-what .wd-explainer{left:12px;right:12px}.dio-who-does-what .wd-beat h4{font-size:19px}.dio-who-does-what .wd-beat p{font-size:14px}.dio-who-does-what .wd-summary{gap:12px}.dio-who-does-what .wd-summary h4{font-size:16px}.dio-who-does-what .wd-summary p{font-size:13px}}
@media(prefers-reduced-motion:reduce){.dio-who-does-what .wd-beat{transition:none}.dio-who-does-what .wd-video{display:none!important}.dio-who-does-what.dio-who-does-what .wd-media .wd-poster{visibility:visible!important}}
html:is(.reduce-motion,.dio-alive-off) .dio-who-does-what .wd-beat{transition:none}html:is(.reduce-motion,.dio-alive-off) .dio-who-does-what .wd-video{display:none!important}html:is(.reduce-motion,.dio-alive-off) .dio-who-does-what.dio-who-does-what .wd-media .wd-poster{visibility:visible!important}
@media(forced-colors:active){.dio-who-does-what .wd-scene{background:Canvas;color:CanvasText;outline:2px solid CanvasText;clip-path:none}.dio-who-does-what .wd-scene .wd-beat h4,.dio-who-does-what .wd-scene .wd-beat p{color:CanvasText}.dio-who-does-what .wd-media{forced-color-adjust:none}}
@media print{.dio-who-does-what .wd-controls{display:none!important}.dio-who-does-what .wd-video{display:none!important}.dio-who-does-what.dio-who-does-what .wd-media .wd-poster{visibility:visible!important}.dio-who-does-what .wd-beat{visibility:hidden!important;opacity:0!important}.dio-who-does-what .wd-beat-complete{visibility:visible!important;opacity:1!important}.dio-who-does-what .wd-scene{print-color-adjust:exact;-webkit-print-color-adjust:exact}.dio-who-does-what .wd-figure{break-inside:avoid}}

/* Exact reusable navy arch-wave, brand-fields.css; isolated local background. */
.dio-who-does-what .wd-background{position:absolute;inset:2px;z-index:-1;overflow:hidden;pointer-events:none;background:#2f4452;--wd-surface-cut:calc(var(--wd-cut) - 1.171572875px);clip-path:polygon(var(--wd-surface-cut) 0,100% 0,100% calc(100% - var(--wd-surface-cut)),calc(100% - var(--wd-surface-cut)) 100%,0 100%,0 var(--wd-surface-cut));--wd-wave-strength:.28;--wd-wave-tile:179.4px;--wd-wave-travel:1765.4px}
.dio-who-does-what .wd-pattern{position:absolute;inset:0;overflow:hidden;opacity:var(--wd-wave-strength);--wd-reading-fade:linear-gradient(90deg,rgba(0,0,0,.055),rgba(0,0,0,.08) 28%,rgba(0,0,0,.12) 43%,rgba(0,0,0,.28) 57%,rgba(0,0,0,.60) 75%,#000);--wd-edge-fade:linear-gradient(#000 45%,rgba(0,0,0,.72) 60%,rgba(0,0,0,.28) 74%,rgba(0,0,0,.10) 90%,rgba(0,0,0,.025));-webkit-mask-image:url('../../arch-tile.svg'),var(--wd-reading-fade),var(--wd-edge-fade);mask-image:url('../../arch-tile.svg'),var(--wd-reading-fade),var(--wd-edge-fade);-webkit-mask-size:var(--wd-wave-tile) var(--wd-wave-tile),100% 100%,100% 100%;mask-size:var(--wd-wave-tile) var(--wd-wave-tile),100% 100%,100% 100%;-webkit-mask-repeat:repeat,no-repeat,no-repeat;mask-repeat:repeat,no-repeat,no-repeat;-webkit-mask-composite:source-in,source-in;mask-composite:intersect,intersect}
.dio-who-does-what .wd-wave{position:absolute;inset:0 auto 0 0;width:calc(100% + var(--wd-wave-travel));background:rgba(169,193,209,.14)}
.dio-who-does-what .wd-scene[data-view=motion] .wd-wave{background:repeating-linear-gradient(115deg,rgba(169,193,209,.09) 0,rgba(169,193,209,.09) 360px,rgba(169,193,209,.32) 530px,rgba(237,135,60,.66) 720px,rgba(237,135,60,.54) 890px,rgba(169,193,209,.14) 1100px,rgba(169,193,209,.09) 1600px);animation:wd-field-flow 8.5s linear -2s infinite;animation-play-state:paused}
@keyframes wd-field-flow{to{transform:translateX(calc(-1 * var(--wd-wave-travel)))}}
.dio-who-does-what .wd-foreground{display:none;position:absolute;width:var(--native-width);height:var(--native-height);max-width:none;left:var(--native-left);top:var(--native-top);pointer-events:none}
.dio-who-does-what .wd-scene[data-view=motion] .wd-foreground{display:block}
.dio-who-does-what .wd-scene .wd-video{visibility:hidden!important;width:1px;height:1px;left:0;top:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.dio-who-does-what .wd-scene .wd-wave{animation:none!important;transform:none!important;background:rgba(169,193,209,.14)!important}.dio-who-does-what .wd-foreground{display:none!important}}
html:is(.reduce-motion,.dio-alive-off) .dio-who-does-what .wd-scene .wd-wave{animation:none!important;transform:none!important;background:rgba(169,193,209,.14)!important}
html:is(.reduce-motion,.dio-alive-off) .dio-who-does-what .wd-foreground{display:none!important}
@media(forced-colors:active){.dio-who-does-what .wd-background{display:none}.dio-who-does-what .wd-scene::before{background:Canvas}}
@media print{.dio-who-does-what .wd-foreground{display:none!important}.dio-who-does-what .wd-scene .wd-wave{animation:none!important;transform:none!important;background:rgba(169,193,209,.14)!important}}

/* Caption v13: one continuous GPU-composited move, with a real outgoing fade. */
.dio-who-does-what .wd-beat{transition:opacity .28s ease,visibility 0s linear .28s}
.dio-who-does-what .wd-scene[data-stage=surgery] .wd-beat-surgery,.dio-who-does-what .wd-scene[data-stage=restorative] .wd-beat-restorative,.dio-who-does-what .wd-scene[data-stage=complete] .wd-beat-complete{transition-delay:0s}
@media(prefers-reduced-motion:reduce){.dio-who-does-what .wd-beat{transition:none}.dio-who-does-what .wd-explainer{will-change:auto}}
html:is(.reduce-motion,.dio-alive-off) .dio-who-does-what .wd-beat{transition:none}
/* site copy: the light answer-header field (brand-fields.css, .dio-blue-field--light :is(p,h4,...)) paints headings and paragraphs navy; on this
   dark scene the approved stage colours must win: titles white, notes #dce6eb, the surgeon's lines coral #f3a0a2 */
.dio-who-does-what :is(.wd-beat,.wd-summary>div) h4{color:#fff!important}
.dio-who-does-what :is(.wd-beat,.wd-summary>div) p{color:#dce6eb!important}
.dio-who-does-what :is(.wd-beat-surgery,.wd-summary>div:first-child) :is(h4,p){color:#f3a0a2!important}
/* 2026-11-11 audit, animation controls: one look and one place on every animation. The row is a right-aligned row above the figure, 12px above it; each control has the
   finish of the site's animation toggle (answer-anim.css .ans-anim-toggle): 44px tall, 2px steel border, white ground, 6px corners, ink focus ring,
   mist fill when "Still view" is on. Looks and placement only: no markup, wording, timing or logic changes. The doubled root class outranks the
   widget's older control rules above, which stay as they were. */
.dio-who-does-what.dio-who-does-what .wd-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;width:auto;min-height:0;margin:0 0 12px;padding:0;border:0}
.dio-who-does-what.dio-who-does-what .wd-controls[hidden]{display:none}
.dio-who-does-what.dio-who-does-what .wd-controls button{font:500 14px/1.2 'Avenir Next',Avenir,'Nunito Sans',system-ui,sans-serif;min-height:44px;min-width:82px;margin:0;padding:10px 16px;background:#fff;color:#203846;border:2px solid #4c7288;border-radius:6px;box-shadow:none;text-shadow:none;text-transform:none;letter-spacing:normal;text-decoration:none;clip-path:none;cursor:pointer}
.dio-who-does-what.dio-who-does-what .wd-controls button:hover{background:#f1f5f6;border-color:#4c7288;color:#203846;text-shadow:none;text-decoration:none}
.dio-who-does-what.dio-who-does-what .wd-controls button:focus-visible{outline:3px solid #203846;outline-offset:2px}
.dio-who-does-what.dio-who-does-what .wd-controls button[aria-pressed=true]{background:#e6edf0;border-color:#4c7288}
.dio-who-does-what.dio-who-does-what .wd-controls button:disabled{opacity:.55;color:#203846;cursor:default}
@media print{.dio-who-does-what.dio-who-does-what .wd-controls{display:none!important}}
/* end animation controls */