/* Explain the craft with purpose-made diagrams; completed work lives in the portfolio. */
.page-animation .a-film-deck{min-height:0;padding:32px 0 20px}
.page-animation .a-main-film{rotate:-1deg}
.page-animation .a-hero .s-lead{font-size:18px;line-height:2;max-width:34em}
.a-hero-scope{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;list-style:none;margin:30px 0 0;padding:0}
.a-hero-scope li{display:flex;align-items:center;justify-content:center;gap:9px;font-size:15px;font-weight:700;white-space:nowrap}
.a-hero-scope li>span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--green);color:white;font:700 10px var(--font-site);flex:none}
.page-animation .a-intro{padding-bottom:65px}
.page-animation .a-expression-grid{display:block;margin-top:36px}
.page-animation .a-expression-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(35px,6vw,100px);align-items:center;padding:46px 0;border-top:0;margin:0}
.a-explainer{overflow:hidden;position:relative;border:1.5px solid var(--ink);border-radius:16px;background:#f4f4f4;box-shadow:5px 6px 0 var(--ink);isolation:isolate}
.a-graphic-label{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid #16161630;background:white;font:700 11px var(--font-site);letter-spacing:.045em}
.a-graphic-label>span:last-child{font-family:inherit;font-size:10px;letter-spacing:0;white-space:nowrap;font-weight:400;color:#555}
.a-explainer svg{display:block;width:100%;height:auto}
.a-type-stage{position:relative;height:250px;display:grid;place-items:center;overflow:hidden}
.a-type-field{overflow:hidden;position:absolute;inset:16px 12px 76px;z-index:2}
.a-type-word{--type-phase:0s;position:absolute;inset:0;display:flex;justify-content:center;align-items:center;font-size:clamp(54px,5.4vw,86px);font-weight:950;letter-spacing:-.06em;line-height:1.15;rotate:-6deg;transform-origin:50% 65%;white-space:nowrap}
.a-type-word-alt{--type-phase:-4s;opacity:0;font-size:clamp(44px,4.5vw,72px)}
.a-type-word span{--glyph-delay:0s;--glyph-angle:-14deg;display:block;transform-origin:50% 90%;will-change:transform,opacity}
.a-type-word span:nth-child(2){--glyph-delay:.07s;--glyph-angle:12deg}
.a-type-word span:nth-child(3){--glyph-delay:.14s;--glyph-angle:-9deg}
.a-type-word span:nth-child(4){--glyph-delay:.21s;--glyph-angle:15deg}
.a-type-word span:nth-child(5){--glyph-delay:.28s;--glyph-angle:-12deg}
.a-type-word span:first-child{color:var(--green)}
.a-type-orbit{position:absolute;width:115px;height:115px;border:22px solid var(--mint);border-radius:50%;left:6%;top:20px}
.a-type-square{position:absolute;width:94px;height:94px;background:var(--yellow);right:8%;top:42px;rotate:18deg}
.a-type-line{position:absolute;left:15%;right:15%;bottom:75px;height:3px;background:var(--ink);transform-origin:left}
.a-motion-chips{position:absolute;bottom:22px;left:0;right:0;display:flex;justify-content:center;gap:18px}
.a-motion-chips span{font-size:14px;font-weight:700;background:white;border:1px solid var(--ink);border-radius:30px;padding:3px 16px}
.page-animation .a-motion-note{font-size:16px;line-height:1.5;text-align:center;font-weight:600;margin:0;padding:0 16px 20px}
.a-expression-copy{min-width:0}
.page-animation .a-expression-kind{font-size:14px;color:var(--green);font-weight:750;letter-spacing:.025em}
.page-animation .a-expression-copy h3{font-size:clamp(30px,3vw,44px);line-height:1.5;letter-spacing:-.04em;margin:14px 0 20px}
.page-animation .a-expression-copy>p:not(.a-expression-kind){font-size:17px;line-height:2;max-width:33em}
.a-use-list{margin-top:24px}
.a-use-list>span{display:block;font-size:12px;font-weight:700;margin-bottom:10px}
.a-use-list ul{display:flex;gap:8px;flex-wrap:wrap;list-style:none;padding:0;margin:0}
.a-use-list li{font-size:13px;line-height:1.7;padding:6px 12px;border:1px solid #16161660;border-radius:5px;background:white}
.page-animation .a-expression-footnote{font-size:16px;line-height:2;margin:12px 0 0;padding:20px 24px;background:#f4f4f4;border-left:0;padding-left:0}
.page-animation .s-process-section{padding-top:45px;border-bottom:0}
.page-animation .s-flow h3{font-size:22px;white-space:nowrap}
.page-animation .s-flow p{font-size:16px}
.motion-on .a-explainer .a-type-word{animation:a-type-phrase 8s ease-in-out infinite;animation-delay:var(--type-phase);animation-fill-mode:both;animation-play-state:paused}
.motion-on .a-explainer .a-type-word span{animation:a-type-glyph 8s cubic-bezier(.22,.8,.25,1) infinite;animation-delay:calc(var(--type-phase) + var(--glyph-delay));animation-fill-mode:both;animation-play-state:paused}
.motion-on .a-explainer .a-type-square{animation:a-square 8s cubic-bezier(.65,0,.35,1) infinite;animation-play-state:paused}
.motion-on .a-explainer .a-type-orbit{animation:a-orbit 8s cubic-bezier(.65,0,.35,1) infinite;animation-play-state:paused}
.motion-on .a-explainer .a-type-line{animation:a-type-sweep 4s cubic-bezier(.65,0,.35,1) infinite;animation-play-state:paused}
.motion-on .a-explainer .a-motion-chips span{animation:a-type-chip 4s ease-in-out infinite;animation-play-state:paused}
.motion-on .a-explainer .a-motion-chips span:nth-child(2){animation-delay:.3s}
.motion-on .a-explainer .a-motion-chips span:nth-child(3){animation-delay:.6s}
.motion-on .a-explainer.is-active *{animation-play-state:running}
@keyframes a-type-phrase{
  0%,42%{opacity:1}48%,100%{opacity:0}
  0%{transform:translateY(8px) rotate(2deg)}18%{transform:translateY(-5px) rotate(-2deg)}
  28%{transform:translateY(-3px) rotate(5deg)}38%{transform:translateY(0) rotate(0)}
  48%,100%{transform:translateY(-10px) rotate(-3deg)}
}
@keyframes a-type-glyph{
  0%{opacity:0;transform:translateY(85%) rotate(var(--glyph-angle)) scale(.55,1.55)}
  4%{opacity:1;transform:translateY(-18%) rotate(calc(var(--glyph-angle) * -.3)) scale(1.12,.85)}
  8%,19%{opacity:1;transform:translateY(0) rotate(0) scale(1)}
  24%{opacity:1;transform:translateY(9%) rotate(0) scale(1.12,.78)}
  28%{opacity:1;transform:translateY(-25%) rotate(calc(var(--glyph-angle) * -.5)) scale(.9,1.16)}
  33%,38%{opacity:1;transform:translateY(0) rotate(0) scale(1)}
  44%{opacity:0;transform:translateY(-75%) rotate(var(--glyph-angle)) scale(.75,1.3)}
  48%,100%{opacity:0;transform:translateY(85%) rotate(var(--glyph-angle)) scale(.55,1.55)}
}
@keyframes a-square{
  0%,100%{transform:translate(0,0) rotate(0) scale(.85)}
  13%,33%{transform:translate(-10px,-5px) rotate(80deg) scale(1.08)}
  48%{transform:translate(12px,18px) rotate(160deg) scale(.72)}
  63%,83%{transform:translate(-10px,0) rotate(260deg) scale(1.02)}
}
@keyframes a-orbit{
  0%,100%{transform:translate(0,0) scale(.72)}
  13%,33%{transform:translate(14px,8px) scale(1.08)}
  48%{transform:translate(-7px,22px) scale(.82)}
  63%,83%{transform:translate(16px,-5px) scale(1.18)}
}
@keyframes a-type-sweep{
  0%,100%{transform:scaleX(.08);opacity:.35}18%,68%{transform:scaleX(1);opacity:1}
  84%{transform:scaleX(.16);opacity:.5}
}
@keyframes a-type-chip{
  0%,65%,100%{transform:translateY(0);background:white;color:var(--ink)}
  18%,40%{transform:translateY(-4px);background:var(--green);color:white}
}
.no-motion .a-explainer *{animation:none!important}
@media(max-width:1100px){
 .a-hero-scope{gap:5px;margin-top:24px}.a-hero-scope li{font-size:12px;gap:6px}.a-hero-scope li>span{width:22px;height:22px;font-size:9px}
 .page-animation .a-hero .s-lead{font-size:16px}.page-animation .a-hero .s-lead br{display:none}
 .page-animation .a-expression-card{gap:35px;padding:36px 0;border-top:0}.page-animation .a-expression-copy h3{font-size:31px}.page-animation .a-expression-copy>p:not(.a-expression-kind){font-size:16px}
 .a-type-stage{height:200px}.a-graphic-label{padding:12px 14px;font-size:9px}.a-graphic-label>span:last-child{font-size:9px}.a-type-word{font-size:66px}.a-type-word-alt{font-size:54px}.a-type-orbit{width:84px;height:84px;border-width:16px}.a-type-square{width:68px;height:68px}
 .page-animation .s-flow h3{font-size:20px}
}
@media(max-width:700px){
 .page-animation .a-expression-card{grid-template-columns:1fr;gap:30px;padding:34px 0 42px;border-top:0}.a-explainer{max-width:500px;width:100%;justify-self:center}.a-type-stage{height:245px}.a-type-word{font-size:78px}.a-type-word-alt{font-size:64px}.a-type-orbit{width:110px;height:110px;border-width:20px}.a-type-square{width:88px;height:88px}
 .page-animation .a-expression-copy h3{font-size:31px;line-height:1.5;margin:12px 0 16px}.page-animation .a-expression-copy>p:not(.a-expression-kind){max-width:none}.a-expression-kind{font-size:13px}.a-use-list{margin-top:18px}.a-use-list li{font-size:12px}.a-graphic-label{font-size:10px}.page-animation .a-expression-footnote{font-size:14px;padding:18px 20px;border-left:0;padding-left:0}
}
@media(max-width:600px){
 .page-animation .a-film-deck{padding:0 3px 15px;margin-top:35px}.page-animation .a-hero .s-lead{font-size:16px;line-height:2}.a-hero-scope{margin-top:25px}.a-hero-scope li{font-size:12px}
 .page-animation .s-hero-bottom{font-size:9px;letter-spacing:0}.page-animation .s-hero-bottom>span:last-child{max-width:62%}.page-animation .a-intro{padding-bottom:30px}
 .page-animation .a-expression-card{margin-top:0;border-top:0}.page-animation .a-expression-kind{font-size:12px}.page-animation .a-expression-copy h3{font-size:29px}.a-explainer{border-radius:12px;box-shadow:3px 4px 0 var(--ink)}.a-type-stage{height:190px}.a-type-field{inset:12px 10px 60px}.a-type-word{font-size:65px}.a-type-word-alt{font-size:53px}.a-type-square{width:65px;height:65px;right:8%;top:34px}.a-type-orbit{width:85px;height:85px;left:5%;top:18px;border-width:16px}.a-type-line{bottom:60px}.a-motion-chips{bottom:13px;gap:12px}.a-motion-chips span{font-size:12px;padding:2px 13px}.page-animation .a-motion-note{font-size:13px;padding-bottom:15px}.a-graphic-label{font-size:9px;padding:12px}.a-graphic-label>span:last-child{font-size:8px}
 .page-animation .s-process-section{padding-top:25px}.page-animation .s-flow h3{font-size:21px}.page-animation .s-flow p{font-size:15px}
}
@media(max-width:359px){.a-hero-scope li{font-size:10px;gap:4px}.a-hero-scope li>span{width:20px;height:20px;font-size:8px}.a-graphic-label{font-size:8px}.page-animation .a-expression-copy h3{font-size:27px}.a-type-word{font-size:54px}.a-type-word-alt{font-size:44px}.a-use-list li{font-size:11px;padding:5px 8px}.page-animation .s-flow h3{font-size:19px}}
@media(prefers-reduced-motion:reduce){.a-explainer *{animation:none!important}}

/* Existing VARISTA artwork, placed intact in animated service scenes. */
.a-original-art{background:#fafbfa}
.a-original-art .a-graphic-label{font-size:12px;letter-spacing:.03em;padding:15px 20px}
.a-story-art,.a-shoot-art{position:relative;height:clamp(300px,29vw,410px);isolation:isolate}
.a-art-halo{position:absolute;width:74%;height:78%;inset:7% 13% auto;border-radius:50%;background:#dff1e9;z-index:-1}
.a-story-illustration{position:absolute;width:82%;height:calc(100% - 66px);left:9%;top:4px;object-fit:contain;transform-origin:50% 80%}
.a-story-steps{position:absolute;left:12%;right:12%;bottom:19px;display:flex;justify-content:space-between;gap:12px}
.a-story-steps::before{content:"";position:absolute;top:50%;left:0;right:0;border-top:1px solid var(--green);z-index:-1}
.a-story-steps span{min-width:76px;padding:6px 14px;border:1px solid var(--green);border-radius:30px;background:white;text-align:center;font-size:14px;font-weight:700}
.a-shoot-art .a-art-halo{background:#f4e5ee;width:70%;height:80%;inset:4% 15% auto}
.a-tablet-scene{display:grid;place-items:center;container-type:size;position:absolute;left:3%;top:5%;width:94%!important;height:80%!important;transform-origin:50% 70%}
.a-shoot-caption{display:flex;align-items:center;justify-content:center;gap:18px;position:absolute;bottom:20px;left:10px;right:10px;font-size:14px;font-weight:700}
.a-rec-light{width:7px;height:7px;flex:none;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px #1d7d6319}
.motion-on .a-explainer .a-story-illustration:not(.a-story-render){animation:a-art-breathe 7s ease-in-out infinite;animation-play-state:paused}
.motion-on .a-explainer .a-story-steps span{animation:a-story-step 7s ease-in-out infinite;animation-play-state:paused}
.motion-on .a-explainer .a-story-steps span:nth-child(2){animation-delay:1.7s}
.motion-on .a-explainer .a-story-steps span:nth-child(3){animation-delay:3.4s}
.motion-on .a-explainer .a-tablet-scene{animation:a-tablet-tilt 8s ease-in-out infinite;animation-play-state:paused}
.motion-on .a-explainer .a-rec-light{animation:a-rec-pulse 2s ease-in-out infinite;animation-play-state:paused}
.motion-on .a-explainer.is-active *{animation-play-state:running}
@keyframes a-art-breathe{0%,100%{translate:0 3px}50%{translate:0 -5px}}
@keyframes a-story-step{0%,30%,100%{background:white;color:var(--green)}8%,23%{background:var(--green);color:white}}
@keyframes a-tablet-tilt{0%,100%{rotate:-1deg;translate:0 3px}50%{rotate:1deg;translate:0 -3px}}
@keyframes a-rec-pulse{0%,100%{opacity:.6}50%{opacity:1}}
@media(max-width:1100px) and (min-width:701px){.a-story-art,.a-shoot-art{height:290px}.a-story-steps{left:7%;right:7%;gap:8px}.a-story-steps span{min-width:65px;font-size:12px;padding:6px 10px}.a-shoot-caption{font-size:12px;gap:12px}.a-original-art .a-graphic-label{font-size:10px}}
@media(max-width:700px){.a-story-art,.a-shoot-art{height:330px}.a-original-art .a-graphic-label{font-size:10px;padding:13px 16px}.a-story-illustration{height:calc(100% - 58px)}.a-story-steps{left:9%;right:9%;gap:10px;bottom:15px}.a-story-steps span{min-width:66px;font-size:12px;padding:6px 12px}.a-shoot-caption{font-size:12px;gap:12px;bottom:18px}}
@media(max-width:420px){.a-story-art,.a-shoot-art{height:280px}}
@media(max-width:359px){.a-story-art,.a-shoot-art{height:245px}.a-story-steps{left:7%;right:7%;gap:7px}.a-story-steps span{min-width:60px;padding:5px 9px;font-size:11px}.a-shoot-caption{gap:10px;font-size:11px}}

/* The video and original Illustrator frame share one uniformly scaled canvas. */
.a-tablet-canvas{position:relative;width:min(100cqw,160.965795cqh);aspect-ratio:1600/994}
.a-tablet-mask{position:absolute;pointer-events:none}
.a-tablet-video-clip{position:absolute;inset:0;clip-path:url(#a-tablet-video-clip);background:transparent}
.a-tablet-video{position:absolute;left:28.25%;top:4.828974%;width:56.25%;height:51.307847%;max-width:none;object-fit:cover;transform:matrix(.97328,.22962,-.22962,.97328,0,0);transform-origin:0 0}
.a-tablet-frame{position:relative;display:block;width:100%;height:100%;pointer-events:none}

#motion-graphics{scroll-margin-top:100px}

.motion-on .a-explainer.is-active .a-type-word span,.motion-on .a-explainer.is-active .a-motion-chips span{animation-play-state:running}

/* Enlarge only the rendered character; the frame and surrounding layout stay fixed. */
#animation-story .a-story-render{transform:translateY(-2px) scale(1.18);transform-origin:50% 50%}
.a-story-sparkles{position:absolute;inset:4px 0 58px;pointer-events:none;z-index:1}
.a-story-spark,.a-story-glint{position:absolute;display:block;opacity:.82;transform-origin:center}
#animation-story .a-story-spark{width:18px;height:18px;fill:#e8b52c;filter:drop-shadow(0 0 5px #f1c94d45)}
#animation-story .a-story-spark--1{left:17%;top:23%;width:19px;height:19px;--spark-delay:-.6s}
#animation-story .a-story-spark--2{right:18%;top:14%;width:14px;height:14px;fill:var(--green);--spark-delay:-2.1s}
#animation-story .a-story-spark--3{right:13%;top:57%;width:21px;height:21px;--spark-delay:-1.3s}
#animation-story .a-story-spark--4{left:22%;top:70%;width:12px;height:12px;fill:var(--green);--spark-delay:-2.8s}
.a-story-glint{width:4px;height:4px;border-radius:50%;background:#e8b52c;box-shadow:0 0 8px #e8b52c50}
.a-story-glint--1{left:13%;top:53%;--spark-delay:-1.8s}
.a-story-glint--2{right:27%;top:7%;--spark-delay:-.2s}
.motion-on .a-explainer .a-story-spark,.motion-on .a-explainer .a-story-glint{animation:a-story-shimmer 3.8s ease-in-out var(--spark-delay,0s) infinite;animation-play-state:paused}
.motion-on .a-explainer.is-active :is(.a-story-spark,.a-story-glint){animation-play-state:running}
@keyframes a-story-shimmer{0%,100%{opacity:.3;transform:scale(.68) rotate(-9deg)}45%{opacity:1;transform:scale(1.08) rotate(6deg)}70%{opacity:.7;transform:scale(.92) rotate(0deg)}}