/* Local process art alternatives; shared site fonts, content and CTAs stay native. */
.studio-process-visual { width:min(100%,420px); margin:auto; min-width:0; text-align:center; }
.studio-process-visual .studio-service-diagram { width:100%; }
.studio-inspect-proof { --studio-proof-bg:#f1f0ed; --studio-inspect-accent:color-mix(in srgb,var(--studio-proof-ink) 70%,var(--lavender)); text-align:left; transform:none; padding:32px; }
.studio-inspect-proof > small { font-size:var(--type-meta-size); }
.studio-inspect-field { position:relative; aspect-ratio:1.05; margin:18px 0 20px; }
.studio-inspect-art { position:relative; width:100%; height:100%; }
.studio-inspect-glyph { position:absolute; inset:0; display:grid; place-items:end center; padding-bottom:14px; font-family:var(--display-font); font-weight:var(--font-heading); font-size:220px; line-height:1.1; }
.studio-inspect-letter { position:relative; display:inline-block; font:inherit; font-style:normal; }
.studio-inspect-baseline { display:inline-block; width:0; height:0; vertical-align:baseline; }
.studio-inspect-line { position:absolute; left:0; right:0; height:1px; background:var(--studio-proof-line); }
.studio-inspect-line--cap { top:var(--inspect-cap-y,36%); }
.studio-inspect-line--base { top:var(--inspect-base-y,90%); }
.studio-inspect-art .studio-inspect-label { position:absolute; left:0; top:calc(var(--inspect-cap-y,36%) - 22px); color:var(--studio-inspect-accent); font-size:var(--type-caption-size); letter-spacing:0; text-transform:none; }
.studio-inspect-lens { display:none; position:absolute; z-index:1; left:0; top:0; width:42%; aspect-ratio:1; overflow:hidden; border:1px solid var(--studio-inspect-accent); border-radius:50%; background:var(--studio-proof-bg); box-shadow:0 6px 24px var(--studio-proof-shadow); pointer-events:none; }
.studio-inspect-field.is-ready .studio-inspect-lens { display:block; }
.studio-inspect-copy { position:absolute; left:0; top:0; transform-origin:0 0; }
.studio-inspect-copy .studio-inspect-label { visibility:hidden; }
.studio-process-visual .studio-proof-badge { right:12px; bottom:-18px; transform:none; max-width:90%; }
.process-motion-scene { position:relative; min-width:0; width:100%; }
/* Centered typography stage. */
.dfvn-studio .studio-process-hero--type-stage { grid-template-columns:minmax(0,1fr); gap:26px; text-align:center; background:var(--surface); color:var(--ink); }
.studio-process-hero--type-stage::after,.studio-process-hero--flow::after { display:none; }
.studio-process-hero--type-stage .studio-hero-copy { max-width:840px; margin:auto; }
.dfvn-studio.studio-process-page .studio-process-hero--type-stage h1 { font-size:var(--page-title-size); line-height:var(--page-title-leading); }
.dfvn-studio .studio-process-hero--type-stage h1 em { color:var(--muted); }
.studio-process-hero--type-stage .studio-lead { margin-inline:auto; }
.studio-process-hero--type-stage .studio-actions { justify-content:center; }
.process-type-stage { padding:26px 0 0; border-top:1px solid var(--line); }
.process-type-caption,.process-type-footer { display:flex; justify-content:space-between; gap:var(--space-4); font-size:var(--type-meta-size); color:var(--muted); }
.process-type-words { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0 .25em; padding:10px 0; font-family:var(--display-font); font-size:clamp(54px,8.2vw,132px); line-height:1.4; letter-spacing:-.055em; }
.process-type-word { display:flex; align-items:center; }
.process-type-word b { font-weight:var(--font-heading); }
.process-type-token { position:relative; display:inline-grid; place-items:center; }
.process-type-token i { font:inherit; font-style:normal; }
.process-type-base { position:absolute; inset:0; opacity:0; }
.process-type-rule { width:100%; height:1px; margin-bottom:var(--space-4); background:var(--line); transform-origin:left; }
/* Drawing desk uses the native hero palette, with copy left and art right. */
.studio-process-hero--desk .process-motion-scene { order:0; }
.process-workbench { --desk-ink:var(--studio-proof-ink); --desk-paper:#f4f1f8; max-width:500px; margin:auto; color:var(--desk-ink); background:var(--desk-paper); padding:28px; border-radius:22px; }
.studio-none .process-workbench { --desk-ink:var(--ink); --desk-paper:var(--surface); border:1px solid var(--line); }
.studio-none .process-motion-scene .process-workbench { margin-inline:auto 0; }
.process-workbench-top,.process-workbench-bottom { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); font-size:var(--type-caption-size); line-height:1.5; }
.process-workbench-top { padding-bottom:20px; border-bottom:1px solid color-mix(in srgb,var(--desk-ink) 15%,transparent); letter-spacing:.08em; }
.process-workbench-canvas { position:relative; aspect-ratio:1.05; margin:22px 0; overflow:hidden; container-type:inline-size; background-image:linear-gradient(color-mix(in srgb,var(--desk-ink) 5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--desk-ink) 5%,transparent) 1px,transparent 1px); background-size:26px 26px; }
.process-workbench-glyph { position:absolute; inset:0; display:grid; place-items:center; font-family:var(--display-font); font-size:clamp(155px,65cqw,280px); font-weight:var(--font-heading); line-height:1.1; -webkit-text-stroke:1px var(--desk-ink); color:transparent; }
.process-workbench-guide { position:absolute; background:color-mix(in srgb,var(--desk-ink) 29%,transparent); }
.process-workbench-guide--top { left:0; right:0; top:var(--desk-cap-y,24%); height:1px; transform-origin:left; }
.process-workbench-guide--base { left:0; right:0; top:var(--desk-base-y,87%); height:1px; transform-origin:right; }
.process-workbench-guide--vertical { top:0; bottom:0; left:50%; width:1px; transform-origin:top; }
.process-workbench-node { position:absolute; width:7px; height:7px; background:var(--desk-paper); border:1px solid var(--desk-ink); border-radius:50%; }
.process-workbench-node--a { top:calc(var(--desk-mark-y,24%) - 3px); left:calc(50% - 3px); }
.process-workbench-node--b { top:calc(var(--desk-base-y,87%) - 3px); left:19%; }
.process-workbench-node--c { top:calc(var(--desk-base-y,87%) - 3px); right:19%; }
.process-workbench-pen { position:absolute; left:calc(50% - 15px); top:23%; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#d3f27a; color:var(--desk-ink); box-shadow:0 3px 9px color-mix(in srgb,var(--desk-ink) 13%,transparent); transform:translate(0,0) rotate(-20deg); }
.process-workbench-pen .dfvn-icon { width:18px; height:18px; }
.process-workbench-bottom { padding-top:16px; border-top:1px solid color-mix(in srgb,var(--desk-ink) 15%,transparent); flex-wrap:wrap; }
/* Header across two columns, then a horizontal process strip. */
.dfvn-studio .studio-process-hero--flow { grid-template-columns:minmax(0,1fr); gap:var(--space-10); background:#202532; color:#f7f7f2; }
.studio-process-hero--flow .studio-hero-copy { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); column-gap:8%; align-items:center; }
.studio-process-hero--flow .studio-kicker { grid-column:1/-1; }
.dfvn-studio.studio-process-page .studio-process-hero--flow h1 { grid-column:1; grid-row:2/4; font-size:var(--page-title-size); line-height:var(--page-title-leading); }
.studio-process-hero--flow .studio-lead { grid-column:2; grid-row:2; align-self:end; }
.studio-process-hero--flow .studio-actions { grid-column:2; grid-row:3; align-self:start; margin-top:var(--space-6); }
.process-flow-caption { display:flex; justify-content:space-between; gap:var(--space-5); font-size:var(--type-caption-size); letter-spacing:.08em; padding:0 0 20px; }
.process-flow-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.process-flow-card { display:flex; flex-direction:column; justify-content:space-between; min-width:0; min-height:240px; padding:24px 20px; border:1px solid #f7f7f229; border-radius:18px; background:#f7f7f208; }
.process-flow-card small { font-size:var(--type-caption-size); letter-spacing:.04em; }
.process-flow-card b { font-family:var(--display-font); font-size:clamp(36px,5.5vw,76px); font-weight:var(--font-heading); letter-spacing:-.04em; line-height:1; }
.process-flow-card .process-flow-ready { font-size:clamp(34px,4vw,52px); }
.process-flow-card > span { font-size:var(--type-meta-size); color:#d1d2da; }
.process-flow-track { height:2px; margin-top:var(--space-6); background:#f7f7f226; }
.process-flow-track > div { height:100%; background:#d5c9fb; transform-origin:left; }
/* Motion is opt-in after JS visibility/reduced-motion checks. */
.process-motion-ready .process-type-base { animation:process-type-base 9s ease-in-out infinite; }
.process-motion-ready .process-type-final { animation:process-type-final 9s cubic-bezier(.22,.61,.36,1) infinite; }
.process-motion-ready .process-type-token--late i { animation-delay:.45s; }
.process-motion-ready .process-type-rule { animation:process-type-rule 9s ease-in-out infinite; }
.process-motion-ready .process-workbench-pen { animation:process-pen 10s cubic-bezier(.4,0,.2,1) infinite; }
.process-motion-ready .process-workbench-guide { animation:process-guides 10s ease-in-out infinite; }
.process-motion-ready .process-workbench-node { animation:process-nodes 10s ease-in-out infinite; }
.process-motion-ready .process-flow-card { animation:process-flow-card 10s ease-in-out infinite; }
.process-motion-ready .process-flow-card:nth-child(2) { animation-delay:2s; }
.process-motion-ready .process-flow-card:nth-child(3) { animation-delay:4s; }
.process-motion-ready .process-flow-card:nth-child(4) { animation-delay:6s; }
.process-motion-ready .process-flow-spacing { animation:process-spacing 10s ease-in-out infinite; }
.process-motion-ready .process-flow-track > div { animation:process-flow-track 10s ease-in-out infinite; }
[data-process-motion][data-motion-state="still"] * { animation:none; }
[data-process-motion][data-motion-state="still"] .process-type-base { opacity:0; }
[data-process-motion][data-motion-state="still"] .process-type-final { opacity:1; transform:none; }
@keyframes process-type-base { 0%,13%,96%,100% { opacity:1; } 30%,82% { opacity:0; } }
@keyframes process-type-final { 0%,10%,100% { opacity:0; transform:translateY(-.12em); } 30%,82% { opacity:1; transform:translateY(0); } 94% { opacity:0; transform:translateY(.06em); } }
@keyframes process-type-rule { 0%,8% { transform:scaleX(.08); } 40%,90%,100% { transform:scaleX(1); } }
@keyframes process-pen { 0%,8% { transform:translate(-25cqw,42cqw) rotate(-20deg); } 24% { transform:translate(0,0) rotate(-20deg); } 43% { transform:translate(25cqw,42cqw) rotate(-20deg); } 55% { transform:translate(-14cqw,27cqw) rotate(-20deg); } 68% { transform:translate(14cqw,27cqw) rotate(-20deg); } 80%,100% { transform:translate(0,0) rotate(-20deg); } }
@keyframes process-guides { 0%,6% { opacity:.2; scale:.2; } 24%,85%,100% { opacity:1; scale:1; } }
@keyframes process-nodes { 0%,10% { opacity:.2; } 30%,90%,100% { opacity:1; } }
@keyframes process-flow-card { 0%,20%,100% { transform:translateY(0); background:#f7f7f208; border-color:#f7f7f229; } 6%,14% { transform:translateY(-5px); background:#d5c9fb1a; border-color:#d5c9fbb3; } }
@keyframes process-spacing { 0%,40%,100% { letter-spacing:-.15em; } 55%,90% { letter-spacing:.02em; } }
@keyframes process-flow-track { 0%,4% { transform:scaleX(0); } 82%,94% { transform:scaleX(1); } 100% { transform:scaleX(0); } }
@media(max-width:760px) {
  .studio-process-visual { width:min(100%,280px); }
  .studio-process-visual .studio-service-diagram { margin:10px auto 24px; }
  .studio-inspect-proof { padding:24px; }
  .studio-inspect-proof > small { font-size:var(--type-caption-size); letter-spacing:.01em; }
  .studio-inspect-glyph { font-size:150px; padding-bottom:8px; }
  .dfvn-studio .studio-process-hero--type-stage { padding-inline:22px; gap:var(--space-6); }
  .dfvn-studio.studio-process-page .studio-process-hero--type-stage h1 { font-size:var(--page-title-size); line-height:var(--page-title-leading); }
  .process-type-words { flex-direction:column; font-size:68px; padding-block:12px; }
  .process-type-caption,.process-type-footer { font-size:var(--type-caption-size); gap:var(--space-3); }
  .process-workbench { padding:20px; }

  .dfvn-studio .studio-process-hero--flow { gap:30px; padding-inline:22px; }
  .studio-process-hero--flow .studio-hero-copy { display:block; }
  .process-flow-caption { font-size:var(--type-caption-size); letter-spacing:0; gap:var(--space-3); }
  .process-flow-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .process-flow-card { min-height:190px; padding:18px 12px; }
  .process-flow-card small { font-size:var(--type-caption-size); }
  .process-flow-card b { font-size:40px; }
  .process-flow-card .process-flow-ready { font-size:34px; }
  .process-flow-card > span { font-size:var(--type-caption-size); }
}
@media(max-width:360px) { .process-type-words { font-size:54px; } .process-flow-card { padding:16px 10px; } .process-flow-card b { font-size:36px; } .process-flow-card .process-flow-ready { font-size:30px; } }
@media(prefers-reduced-motion:reduce) { [data-process-motion] * { animation:none!important; transition:none!important; } .process-type-base { opacity:0!important; } .process-type-final { opacity:1!important; transform:none!important; } }
/* Variants on the same drawing desk: each loop has a clear action and a rest. */
.process-workbench { --desk-accent:#9385bb; }
.process-workbench-glyph b { position:relative; font:inherit; font-style:normal; }
.process-desk-baseline { display:inline-block; width:0; height:0; vertical-align:baseline; }
.process-desk-fill,.process-desk-body,.process-desk-mark { color:var(--desk-ink); -webkit-text-stroke:0; }
.process-desk-mark { clip-path:inset(0 0 calc(100% - var(--desk-cap-y,40%)) 0); }
.process-desk-mark--breve,.process-desk-mark--circumflex { opacity:0; }
.process-desk-scan { position:absolute; inset:0 auto 0 0; width:1px; background:var(--desk-accent); opacity:0; }
.process-desk-scan i { position:absolute; left:-3px; top:var(--desk-cap-y,40%); width:7px; height:7px; border-radius:50%; background:var(--desk-accent); box-shadow:0 0 0 5px color-mix(in srgb,var(--desk-accent) 13%,transparent); }
.process-desk-note { position:absolute; bottom:0; left:0; right:0; text-align:center; font-size:var(--type-caption-size); color:color-mix(in srgb,var(--desk-ink) 60%,transparent); }
.process-desk-pair { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--display-font); font-size:clamp(100px,48cqw,210px); line-height:1; }
.process-desk-pair b { font-weight:var(--font-heading); }
.process-desk-pair b+b { margin-left:-.06em; }
.process-desk-spacing-zone { position:absolute; top:15%; bottom:20%; left:44%; width:12%; border-inline:1px solid color-mix(in srgb,var(--desk-accent) 31%,transparent); background:color-mix(in srgb,var(--desk-accent) 5%,transparent); transform-origin:center; }
.process-desk-ruler { position:absolute; left:12%; right:12%; bottom:17%; display:flex; justify-content:space-between; border-bottom:1px solid color-mix(in srgb,var(--desk-ink) 29%,transparent); }
.process-desk-ruler i { height:7px; width:1px; background:color-mix(in srgb,var(--desk-ink) 29%,transparent); }
.process-motion-ready .process-workbench--original .process-desk-outline { animation:desk-original 10s ease-in-out infinite; }
.process-motion-ready .process-desk-fill { animation:desk-reveal 11s cubic-bezier(.4,0,.2,1) infinite; }
.process-motion-ready .process-desk-scan { animation:desk-scan 11s cubic-bezier(.4,0,.2,1) infinite; }
.process-motion-ready .process-desk-mark--breve { animation:desk-breve 12s cubic-bezier(.22,.61,.36,1) infinite; }
.process-motion-ready .process-desk-mark--circumflex { animation:desk-circumflex 12s cubic-bezier(.22,.61,.36,1) infinite; }
.process-motion-ready .process-desk-mark--acute { animation:desk-acute 12s cubic-bezier(.22,.61,.36,1) infinite; }
.process-motion-ready .process-desk-pair b:first-child { animation:desk-left 10s cubic-bezier(.4,0,.2,1) infinite; }
.process-motion-ready .process-desk-pair b:last-child { animation:desk-right 10s cubic-bezier(.4,0,.2,1) infinite; }
.process-motion-ready .process-desk-spacing-zone { animation:desk-gap 10s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes desk-original { 0%,12%,96%,100% { color:transparent; } 55%,82% { color:color-mix(in srgb,var(--desk-ink) 14%,transparent); } }
@keyframes desk-reveal { 0%,12%,100% { clip-path:inset(0 100% 0 0); opacity:1; } 56%,84% { clip-path:inset(0 0 0 0); opacity:1; } 96% { clip-path:inset(0 0 0 0); opacity:0; } }
@keyframes desk-scan { 0%,10%,100% { transform:translateX(0); opacity:0; } 14% { transform:translateX(0); opacity:1; } 56% { transform:translateX(100cqw); opacity:1; } 62%,96% { transform:translateX(100cqw); opacity:0; } }
@keyframes desk-breve { 0%,3%,35%,100% { opacity:0; transform:translateY(-24px); } 12%,28% { opacity:1; transform:translateY(0); } 34% { opacity:0; transform:translateY(0); } }
@keyframes desk-circumflex { 0%,34%,65%,100% { opacity:0; transform:translateY(-24px); } 43%,58% { opacity:1; transform:translateY(0); } 64% { opacity:0; transform:translateY(0); } }
@keyframes desk-acute { 0%,64%,100% { opacity:0; transform:translateY(-24px); } 74%,90% { opacity:1; transform:translateY(0); } 98% { opacity:0; transform:translateY(0); } }
@keyframes desk-left { 0%,15%,100% { transform:translateX(-.075em); } 45%,84% { transform:translateX(0); } }
@keyframes desk-right { 0%,15%,100% { transform:translateX(.075em); } 45%,84% { transform:translateX(0); } }
@keyframes desk-gap { 0%,15%,100% { transform:scaleX(2.3); } 45%,84% { transform:scaleX(1); } }
/* The localization page keeps its layered paper composition. */
.localization-token { position:relative; display:inline-grid; font:inherit; }
.localization-token i { grid-area:1/1; font:inherit; font-style:normal; }
.localization-base { opacity:0; }
.process-motion-ready .localization-base { animation:localization-base 12s ease-in-out infinite; }
.process-motion-ready .localization-final { animation:localization-final 12s cubic-bezier(.22,.61,.36,1) infinite; }
.process-motion-ready .localization-token:nth-of-type(2) i { animation-delay:.18s; }
.process-motion-ready .localization-token:nth-of-type(3) i { animation-delay:.36s; }
.process-motion-ready .localization-token:nth-of-type(4) i { animation-delay:.54s; }
.process-motion-ready .localization-token:nth-of-type(5) i { animation-delay:.72s; }
.process-motion-ready .localization-token:nth-of-type(6) i { animation-delay:.9s; }
.process-motion-ready .localization-token:nth-of-type(7) i { animation-delay:1.08s; }
.process-motion-ready.studio-localization-motion .studio-proof { animation:localization-paper 12s ease-in-out infinite; }
.process-motion-ready.studio-localization-motion .studio-proof-monogram { animation:localization-monogram 12s ease-in-out infinite; }
@keyframes localization-base { 0%,10%,94%,100% { opacity:1; } 27%,82% { opacity:0; } }
@keyframes localization-final { 0%,10%,100% { opacity:0; transform:translateY(-.12em); } 28%,82% { opacity:1; transform:translateY(0); } 94% { opacity:0; transform:translateY(0); } }
@keyframes localization-paper { 0%,12%,100% { transform:rotate(-5deg) translateY(0); } 35%,75% { transform:rotate(-3deg) translateY(-5px); } }
@keyframes localization-monogram { 0%,12%,100% { transform:rotate(12deg) translateY(0); } 40%,75% { transform:rotate(8deg) translateY(-7px); } }
/* These rules follow every animation shorthand so hidden sections truly pause. */
[data-process-motion][data-motion-state="still"] * { animation:none; }
@media(prefers-reduced-motion:reduce) { [data-process-motion] :is(*,*::before,*::after) { animation:none!important; transition:none!important; } .localization-base { opacity:0!important; } .localization-final { opacity:1!important; transform:none!important; } }
/* One 30-second timeline: draw, compose, space, then return to drawing. */
.process-sequence-stage { position:absolute; inset:0; }
.process-sequence-stage--trace,.process-sequence-stage--marks { opacity:0; }
.process-motion-ready .process-workbench--sequence .process-sequence-stage--trace { animation:sequence-trace 30s ease-in-out infinite; }
.process-motion-ready .process-workbench--sequence .process-sequence-stage--marks { animation:sequence-marks 30s ease-in-out infinite; }
.process-motion-ready .process-workbench--sequence .process-sequence-stage--spacing { animation:sequence-spacing 30s ease-in-out infinite; }
.process-motion-ready .process-workbench--sequence .process-desk-fill { animation:sequence-ink 30s cubic-bezier(.4,0,.2,1) infinite; }
.process-motion-ready .process-workbench--sequence .process-desk-scan { animation:sequence-scan 30s cubic-bezier(.4,0,.2,1) infinite; }
.process-motion-ready .process-workbench--sequence .process-desk-mark--breve { animation:sequence-breve 30s cubic-bezier(.22,.61,.36,1) infinite; }
.process-motion-ready .process-workbench--sequence .process-desk-mark--circumflex { animation:sequence-circumflex 30s cubic-bezier(.22,.61,.36,1) infinite; }
.process-motion-ready .process-workbench--sequence .process-desk-mark--acute { animation:sequence-acute 30s cubic-bezier(.22,.61,.36,1) infinite; }
.process-motion-ready .process-workbench--sequence .process-desk-pair b:first-child { animation:sequence-left 30s cubic-bezier(.4,0,.2,1) infinite; }
.process-motion-ready .process-workbench--sequence .process-desk-pair b:last-child { animation:sequence-right 30s cubic-bezier(.4,0,.2,1) infinite; }
.process-motion-ready .process-workbench--sequence .process-desk-spacing-zone { animation:sequence-gap 30s cubic-bezier(.4,0,.2,1) infinite; }
.process-motion-ready .process-workbench--sequence .process-workbench-guide { animation:none; }
.process-sequence-progress > span { position:relative; padding-top:8px; }
.process-sequence-progress > span::before { content:''; position:absolute; left:0; right:0; top:0; height:2px; border-radius:2px; background:var(--desk-accent); opacity:.18; }
.process-sequence-progress > span:last-child::before { opacity:1; }
.process-motion-ready .process-sequence-progress > span:nth-child(1)::before { animation:sequence-trace 30s ease-in-out infinite; }
.process-motion-ready .process-sequence-progress > span:nth-child(2)::before { animation:sequence-marks 30s ease-in-out infinite; }
.process-motion-ready .process-sequence-progress > span:nth-child(3)::before { animation:sequence-spacing 30s ease-in-out infinite; }
@keyframes sequence-trace { 0%,30%,100% { opacity:1; } 34%,96% { opacity:0; } }
@keyframes sequence-marks { 0%,30%,67%,100% { opacity:0; } 34%,63% { opacity:1; } }
@keyframes sequence-spacing { 0%,63%,100% { opacity:0; } 67%,96% { opacity:1; } }
@keyframes sequence-ink { 0%,5%,100% { clip-path:inset(0 100% 0 0); } 22%,96% { clip-path:inset(0 0 0 0); } }
@keyframes sequence-scan { 0%,5%,100% { transform:translateX(0); opacity:0; } 6% { transform:translateX(0); opacity:1; } 22% { transform:translateX(100cqw); opacity:1; } 24%,96% { transform:translateX(100cqw); opacity:0; } }
@keyframes sequence-breve { 0%,35%,47%,100% { opacity:0; transform:translateY(-24px); } 39%,43% { opacity:1; transform:translateY(0); } 46% { opacity:0; transform:translateY(0); } }
@keyframes sequence-circumflex { 0%,46%,58%,100% { opacity:0; transform:translateY(-24px); } 50%,54% { opacity:1; transform:translateY(0); } 57% { opacity:0; transform:translateY(0); } }
@keyframes sequence-acute { 0%,57%,68%,100% { opacity:0; transform:translateY(-24px); } 61%,65% { opacity:1; transform:translateY(0); } }
@keyframes sequence-left { 0%,69%,100% { transform:translateX(-.095em); } 82%,96% { transform:translateX(0); } }
@keyframes sequence-right { 0%,69%,100% { transform:translateX(.095em); } 82%,96% { transform:translateX(0); } }
@keyframes sequence-gap { 0%,69%,100% { transform:scaleX(2.76); } 82%,96% { transform:scaleX(1); } }
/* Three localization alternatives, all inside the same paper on the right. */
.studio-localization-motion { --desk-ink:var(--studio-proof-ink); }
.studio-localization-motion--compose .studio-proof,.studio-localization-motion--scan .studio-proof,.studio-localization-motion--sentence .studio-proof { transform:rotate(-5deg); }
.process-motion-ready:is(.studio-localization-motion--compose,.studio-localization-motion--scan,.studio-localization-motion--sentence) :is(.studio-proof,.studio-proof-monogram) { animation:none; }
.localization-compose-canvas { position:relative; aspect-ratio:1.13; width:100%; margin:24px 0; container-type:inline-size; }
.localization-compose-canvas .process-workbench-glyph { font-size:clamp(150px,65cqw,225px); }
.localization-compose-guide { position:absolute; top:var(--desk-cap-y,40%); left:0; right:0; height:1px; background:var(--studio-proof-line); }
.localization-scan-sheet { position:relative; margin:30px 0; overflow:hidden; container-type:inline-size; }
.studio-proof .localization-scan-sheet strong { margin:0; font-family:var(--display-font); }
.localization-scan-outline { -webkit-text-stroke:1px var(--studio-proof-ink); color:transparent; }
.localization-scan-fill { position:absolute; left:0; top:0; right:0; color:var(--studio-proof-ink); }
.localization-scan-line { position:absolute; left:0; top:0; bottom:0; width:1px; background:#9385bb; box-shadow:0 0 16px 3px #9385bb26; opacity:0; }
.process-motion-ready .localization-scan-fill { animation:localization-scan-fill 12s cubic-bezier(.4,0,.2,1) infinite; }
.process-motion-ready .localization-scan-line { animation:localization-scan-line 12s cubic-bezier(.4,0,.2,1) infinite; }
.localization-sentence { padding:24px 0; font-family:var(--display-font); font-size:clamp(38px,15cqi,62px); font-weight:var(--font-heading); line-height:1.2; letter-spacing:-.04em; }
.localization-sentence b { display:block; font:inherit; }
.localization-sentence b:last-child { color:#9385bb; font-size:.74em; margin-top:var(--space-3); }
.process-motion-ready .localization-sentence b { animation:localization-sentence 12s cubic-bezier(.22,.61,.36,1) infinite; }
.process-motion-ready .localization-sentence b:nth-child(2) { animation-delay:.35s; }
.process-motion-ready .localization-sentence b:nth-child(3) { animation-delay:.7s; }
@keyframes localization-scan-fill { 0%,5%,100% { clip-path:inset(0 100% 0 0); } 55%,88% { clip-path:inset(0 0 0 0); } 97% { clip-path:inset(0 100% 0 0); } }
@keyframes localization-scan-line { 0%,5%,100% { transform:translateX(0); opacity:0; } 8% { transform:translateX(0); opacity:1; } 55% { transform:translateX(100cqw); opacity:1; } 60%,97% { transform:translateX(100cqw); opacity:0; } }
@keyframes localization-sentence { 0%,4%,100% { opacity:0; transform:translateY(12px); letter-spacing:.04em; } 25%,85% { opacity:1; transform:translateY(0); letter-spacing:-.04em; } 96% { opacity:0; transform:translateY(-4px); letter-spacing:-.04em; } }
/* Final gating must follow all animation shorthands, including pseudo elements. */
@media(prefers-reduced-motion:reduce) { [data-process-motion] :is(*,*::before,*::after) { animation:none!important; transition:none!important; } }
/* Pause all descendants and their progress indicators, regardless of variant specificity. */
.process-motion-ready[data-process-motion][data-motion-state]:not([data-motion-state="running"]) *,
.process-motion-ready[data-process-motion][data-motion-state]:not([data-motion-state="running"]) *::before,
.process-motion-ready[data-process-motion][data-motion-state]:not([data-motion-state="running"]) *::after { animation-play-state:paused!important; }
@media(prefers-reduced-motion:reduce) {
  [data-process-motion] *,[data-process-motion] *::before,[data-process-motion] *::after { animation:none!important; transition:none!important; }
}
/* The final AV fit is slightly closer; the starting gap stays unchanged. */
.process-workbench--sequence .process-desk-pair b+b { margin-left:-.10em; }
.process-workbench--sequence .process-desk-spacing-zone { left:45%; width:10%; }
/* Interactive comparison uses identical full-width letter cells on both layers. */
.localization-compare { --compare-position:50%; margin:24px 0; }
.localization-compare-labels { display:flex; justify-content:space-between; gap:var(--space-3); font-size:var(--type-caption-size); font-weight:var(--font-regular); }
.localization-compare-labels b { font:inherit; }
.localization-compare-window { position:relative; aspect-ratio:1.15; margin-top:var(--space-3); width:100%; container-type:inline-size; touch-action:pan-y; }
.localization-compare-layer { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:6px; padding-inline:12px; background:var(--studio-proof-bg); color:var(--studio-proof-ink); }
.localization-compare-after { clip-path:inset(0 0 0 var(--compare-position)); }
.localization-compare-word { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); font-family:var(--display-font); font-size:clamp(28px,17cqw,62px); font-weight:var(--font-heading); line-height:1.5; text-align:center; }
.localization-compare-word b { font:inherit; }
.localization-compare-handle { position:absolute; inset:0 auto 0 var(--compare-position); width:1px; background:#9385bb; pointer-events:none; }
.localization-compare-handle b { position:absolute; left:50%; top:50%; display:grid; place-items:center; width:36px; height:36px; border:1px solid #9385bb; border-radius:50%; transform:translate(-50%,-50%); background:var(--studio-proof-bg); color:var(--studio-proof-ink); font-size:20px; font-weight:var(--font-regular); }
.localization-compare-slider { position:absolute; inset:0; display:block; width:100%; height:100%; min-width:0; padding:0; margin:0; opacity:0; cursor:ew-resize; touch-action:pan-y; }
.localization-compare-window:focus-within { outline:2px solid #9385bb; outline-offset:5px; border-radius:3px; }
.localization-compare .localization-compare-hint { margin-top:18px; font-size:var(--type-caption-size); line-height:1.6; color:var(--studio-proof-ink); opacity:.75; }
@media(max-width:360px) { .process-workbench-top { letter-spacing:0; } .process-sequence-progress { gap:10px; } }
/* Equal specimen size in all three stages, including AV; the pair also fits mobile. */
.process-workbench--sequence :is(.process-workbench-glyph,.process-desk-pair) { font-size:clamp(112px,65cqw,280px); line-height:1.1; }
/* Contour and corner points extracted from the active native Brockmann A. */
.process-glyph-path { position:absolute; overflow:visible; visibility:hidden; color:var(--desk-ink); pointer-events:none; }
.process-glyph-path.is-aligned { visibility:visible; }
.process-sequence-stage--trace:has(.process-glyph-path.is-aligned) .process-desk-outline { -webkit-text-stroke:0; }
.process-glyph-ghost { fill:currentColor; opacity:.055; }
.process-glyph-contour { fill:none; stroke:currentColor; stroke-width:1; vector-effect:non-scaling-stroke; }
.process-glyph-node { fill:var(--desk-paper); stroke:#b96f78; stroke-width:1; vector-effect:non-scaling-stroke; }
.process-glyph-node--start { stroke:#577eaa; fill:#c7d8eb; }
.process-glyph-direction { fill:#577eaa; }
.process-glyph-handle { stroke:#577eaa; stroke-width:.7; vector-effect:non-scaling-stroke; }
.process-glyph-control { fill:var(--desk-paper); stroke:#577eaa; stroke-width:1; vector-effect:non-scaling-stroke; }
.process-glyph-measures { color:#79748a; }
.process-glyph-measures path { fill:none; stroke:currentColor; stroke-width:.7; stroke-dasharray:2 3; vector-effect:non-scaling-stroke; }
.process-glyph-measures text { fill:currentColor; font:var(--glyph-label-size,38px) var(--body-font); }
.studio-none .process-glyph-measures { color:var(--muted); }
.process-motion-ready .process-glyph-contour { animation:process-glyph-draw 30s cubic-bezier(.4,0,.2,1) infinite; }
.process-motion-ready .process-sequence-stage--trace:has(.process-glyph-path.is-aligned) .process-desk-fill { animation:process-glyph-ink 30s cubic-bezier(.4,0,.2,1) infinite; }
.process-motion-ready :is(.process-glyph-anchors,.process-glyph-measures) { animation:process-glyph-points 30s ease-in-out infinite; }
@keyframes process-glyph-draw { 0%,2%,100% { stroke-dasharray:1000; stroke-dashoffset:1000; } 16%,96% { stroke-dasharray:1000; stroke-dashoffset:0; } }
@keyframes process-glyph-ink { 0%,20%,100% { clip-path:inset(0 100% 0 0); } 26%,96% { clip-path:inset(0 0 0 0); } }
@keyframes process-glyph-points { 0%,2%,27%,100% { opacity:0; } 7%,23% { opacity:1; } }
@media(max-width:760px) { .process-glyph-measures text { display:none; } }
/* All localization desks use one 30-second clock: sample, refine, check. */
.localization-desk-stage { position:absolute; inset:0; }
.localization-desk-stage--one,.localization-desk-stage--two { opacity:0; }
.process-motion-ready .localization-desk-stage--one { animation:sequence-trace 30s ease-in-out infinite; }
.process-motion-ready .localization-desk-stage--two { animation:sequence-marks 30s ease-in-out infinite; }
.process-motion-ready .localization-desk-stage--three { animation:sequence-spacing 30s ease-in-out infinite; }
.process-motion-ready .localization-desk .process-workbench-guide { animation:none; }
.localization-desk-glyph-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-content:center; gap:12px; padding:24px 12px; }
.localization-desk-cell { position:relative; display:grid; place-items:center; }
.localization-desk-cell b { grid-area:1/1; font-family:var(--display-font); font-size:clamp(35px,17cqw,76px); font-weight:var(--font-heading); line-height:1.35; color:var(--desk-ink); }
.localization-desk-cell-base { opacity:0; }
.localization-desk-grid-scan { position:absolute; top:0; bottom:0; left:0; width:1px; background:var(--desk-accent); opacity:0; }
.process-motion-ready .localization-desk-stage--one .localization-desk-cell-final { animation:localization-glyph-ink 30s ease-in-out infinite; }
.process-motion-ready .localization-desk-stage--one .localization-desk-grid-scan { animation:sequence-scan 30s ease-in-out infinite; }
.process-motion-ready .localization-desk-stage--two .localization-desk-cell-base { animation:localization-glyph-base 30s ease-in-out infinite; }
.process-motion-ready .localization-desk-stage--two .localization-desk-cell-final { animation:localization-glyph-final 30s cubic-bezier(.22,.61,.36,1) infinite; animation-fill-mode:both; }
.process-motion-ready .localization-desk-stage--two .localization-desk-cell:nth-child(3n+2) b { animation-delay:.35s; }
.process-motion-ready .localization-desk-stage--two .localization-desk-cell:nth-child(3n+3) b { animation-delay:.7s; }
.process-motion-ready .localization-desk-stage--three .localization-desk-cell { animation:localization-review-cell 30s ease-in-out infinite; }
.process-motion-ready .localization-desk-stage--three .localization-desk-cell:nth-child(3n+2) { animation-delay:1.6s; }
.process-motion-ready .localization-desk-stage--three .localization-desk-cell:nth-child(3n+3) { animation-delay:3.2s; }
.process-motion-ready .localization-desk-stage--three .localization-desk-grid-scan { animation:localization-review-scan 30s ease-in-out infinite; }
.process-motion-ready .localization-desk--marks .process-desk-fill { animation:sequence-ink 30s cubic-bezier(.4,0,.2,1) infinite; }
.process-motion-ready .localization-desk--marks .process-desk-scan { animation:sequence-scan 30s cubic-bezier(.4,0,.2,1) infinite; }
.process-motion-ready .localization-desk--marks .process-desk-mark--breve { animation:sequence-breve 30s cubic-bezier(.22,.61,.36,1) infinite; }
.process-motion-ready .localization-desk--marks .process-desk-mark--circumflex { animation:sequence-circumflex 30s cubic-bezier(.22,.61,.36,1) infinite; }
.process-motion-ready .localization-desk--marks .process-desk-mark--acute { animation:sequence-acute 30s cubic-bezier(.22,.61,.36,1) infinite; }
.process-motion-ready .localization-desk-aligned-mark b { animation:localization-mark-align 30s cubic-bezier(.4,0,.2,1) infinite; }
.localization-desk-alignment { position:absolute; left:calc(50% - 3px); width:6px; height:6px; top:calc(var(--desk-mark-y,25%) - 3px); border:1px solid var(--desk-accent); border-radius:50%; opacity:0; }
.process-motion-ready .localization-desk-alignment { animation:localization-alignment-check 30s ease-in-out infinite; }
.localization-desk-copy { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding:24px 14px; font-family:var(--display-font); color:var(--desk-ink); }
.localization-desk-copy b { font-size:clamp(28px,12cqw,54px); font-weight:var(--font-heading); line-height:1.25; letter-spacing:-.04em; }
.localization-desk-copy b:nth-child(2) { color:var(--desk-accent); }
.localization-desk-copy i { font-family:var(--body-font); font-size:clamp(12px,3.8cqw,17px); font-style:normal; line-height:1.6; margin-top:var(--space-6); }
.localization-desk-stage--one .localization-desk-copy i,.localization-desk-stage--two .localization-desk-copy i { opacity:0; }
.localization-desk-copy-rule { position:absolute; left:14px; right:14px; bottom:6%; height:1px; background:var(--desk-accent); transform-origin:left; }
.process-motion-ready .localization-desk-stage--one .localization-desk-copy b { animation:localization-copy-intro 30s cubic-bezier(.22,.61,.36,1) infinite; animation-fill-mode:both; }
.process-motion-ready .localization-desk-stage--one .localization-desk-copy b:nth-child(2) { animation-delay:.45s; }
.process-motion-ready .localization-desk-stage--two .localization-desk-copy b { animation:localization-copy-spacing 30s cubic-bezier(.4,0,.2,1) infinite; }
.process-motion-ready .localization-desk-stage--three .localization-desk-copy i { animation:localization-copy-finish 30s ease-in-out infinite; }
.process-motion-ready .localization-desk-copy-rule { animation:localization-copy-rule 30s ease-in-out infinite; }
@keyframes localization-glyph-ink { 0%,5%,100% { color:transparent; -webkit-text-stroke:1px var(--desk-ink); } 22%,96% { color:var(--desk-ink); -webkit-text-stroke:0; } }
@keyframes localization-glyph-base { 0%,36%,100% { opacity:1; } 47%,96% { opacity:0; } }
@keyframes localization-glyph-final { 0%,36%,100% { opacity:0; transform:translateY(-6px); } 47%,96% { opacity:1; transform:translateY(0); } }
@keyframes localization-review-cell { 0%,68%,88%,100% { background:transparent; } 73%,79% { background:color-mix(in srgb,var(--desk-accent) 12%,transparent); } }
@keyframes localization-review-scan { 0%,68%,100% { transform:translateX(0); opacity:0; } 70% { transform:translateX(0); opacity:.7; } 88% { transform:translateX(100cqw); opacity:.7; } 90%,96% { transform:translateX(100cqw); opacity:0; } }
@keyframes localization-mark-align { 0%,69%,100% { transform:translateX(.04em); } 82%,96% { transform:translateX(0); } }
@keyframes localization-alignment-check { 0%,69%,100% { opacity:0; scale:1.5; } 82%,90% { opacity:.75; scale:1; } 96% { opacity:0; scale:1; } }
@keyframes localization-copy-intro { 0%,2%,100% { opacity:0; transform:translateY(12px); } 12%,96% { opacity:1; transform:translateY(0); } }
@keyframes localization-copy-spacing { 0%,35%,100% { letter-spacing:.07em; } 52%,96% { letter-spacing:-.04em; } }
@keyframes localization-copy-finish { 0%,68%,100% { opacity:0; transform:translateY(5px); } 76%,96% { opacity:1; transform:translateY(0); } }
@keyframes localization-copy-rule { 0%,69%,100% { transform:scaleX(.08); } 85%,96% { transform:scaleX(1); } }
@media(max-width:760px) {
  .process-workbench { padding:24px; }
  .process-workbench-bottom { gap:10px 14px; }
  .process-sequence-progress > span { padding-top:10px; }
}