/* Movement stays in the artwork; reading and controls keep their place. */
html{scrollbar-gutter:stable}
.wordmark{isolation:isolate}
.wordmark::after{content:'DiziDora';position:absolute;inset:0;pointer-events:none;color:transparent;background:linear-gradient(100deg,#ed7000 0%,#ed3e46 18%,#dc267c 34%,#6a49d0 52%,#008ec7 74%,#009f9d 100%);background-clip:text;-webkit-background-clip:text;clip-path:inset(0 100% 0 0);font:inherit;line-height:inherit;letter-spacing:0}
.motion-enabled .wordmark.sweep-visible::after{animation:brand-sweep 6.4s linear infinite;will-change:clip-path}
@keyframes brand-sweep{0%,8%{clip-path:polygon(-18% 0,0 0,0 100%,-18% 100%)}46%,100%{clip-path:polygon(100% 0,118% 0,118% 100%,100% 100%)}}
.motion-toggle{display:grid;place-items:center;width:44px;height:44px;flex:none;background:transparent;border:1px solid var(--line);border-radius:50%;color:var(--ink)}
.motion-toggle:hover{background:var(--mint)}.motion-toggle svg{width:18px;height:18px}.motion-toggle:disabled{opacity:.5;cursor:default}
.motion-enabled .motion-reveal{opacity:.12;translate:0 28px;transition:opacity .75s ease,translate .9s cubic-bezier(.2,.8,.2,1);transition-delay:var(--arrival-delay,0ms)}
.motion-enabled .motion-reveal.arrived{opacity:1;translate:0 0}
.motion-enabled .lead-art{clip-path:inset(0 var(--frame-inset,0%) round 4px)}
.motion-enabled .art-word,.motion-enabled .stage-word{translate:var(--art-drift,0px) 0}
.motion-enabled .scroll-heading{translate:0 var(--heading-rise,0px);scale:var(--heading-scale,1);transform-origin:right center}
.motion-enabled .process li{position:relative}.motion-enabled .process li::before{content:'';position:absolute;top:-1px;right:0;width:100%;height:2px;background:var(--coral);transform:scaleX(0);transform-origin:right;transition:transform 1.2s ease;transition-delay:var(--arrival-delay,0ms)}
.motion-enabled .process li.arrived::before{transform:scaleX(1)}
.scroll-sketch{position:absolute;pointer-events:none;opacity:.17;color:currentColor;translate:0 var(--sketch-rise,0px);rotate:var(--sketch-turn,0deg)}
.scroll-sketch svg{width:128px;height:128px;stroke-width:.8}.studio-band,.action-band{position:relative;isolation:isolate;overflow:clip}.studio-band .scroll-sketch{left:4%;top:45px;color:#d9f289}.action-band .scroll-sketch{right:3%;bottom:20px;color:#386c56}.studio-band>.wrap,.action-band>.wrap{position:relative;z-index:1}
.motion-paused .wordmark::after{animation:none!important;clip-path:inset(0 100% 0 0)}
.motion-paused :is(.motion-reveal,.scroll-heading,.scroll-sketch,.art-word,.stage-word){opacity:1;translate:none!important;scale:none!important;rotate:none!important;transition:none!important}
.motion-paused .lead-art{clip-path:none}.motion-paused .lead-art .lead-desktop{transform:none!important}
.motion-paused *{animation:none!important;scroll-behavior:auto!important}
.phone-layout .motion-toggle{margin-inline-start:auto;margin-inline-end:12px;width:44px;height:44px}.phone-layout .scroll-sketch svg{width:72px;height:72px}.phone-layout .scroll-sketch{opacity:.12}.phone-layout .motion-reveal{translate:0 16px}.phone-layout .scroll-heading{scale:1!important}
@media(prefers-reduced-motion:reduce){.wordmark::after{display:none}.motion-reveal{opacity:1!important;translate:none!important;transition:none!important}.scroll-heading,.scroll-sketch,.art-word,.stage-word{translate:none!important;scale:none!important;rotate:none!important}.lead-art{clip-path:none!important}}

/* A shared opening rhythm, with visibility delayed until the exit has finished. */
.crm-feature-gallery{transition:opacity .6s ease,transform .75s var(--motion-ease),visibility 0s .75s}
.lead-art[data-features-open=true] .crm-feature-gallery{transition-delay:0s}
.lead-art .lead-desktop{transition:opacity .5s ease,transform .8s var(--motion-ease),visibility 0s .5s}
.lead-art:not([data-features-open=true]) .lead-desktop{transition-delay:0s}
.crm-feature-gallery figure{opacity:0;transform:translateY(18px);transition:opacity .45s ease,transform .65s var(--motion-ease)}
.lead-art[data-features-open=true] .crm-feature-gallery figure{opacity:1;transform:none;transition-delay:calc(var(--screen-order,0)*35ms)}
.crm-feature-gallery figure:nth-child(2){--screen-order:1}.crm-feature-gallery figure:nth-child(3){--screen-order:2}.crm-feature-gallery figure:nth-child(4){--screen-order:3}.crm-feature-gallery figure:nth-child(5){--screen-order:4}.crm-feature-gallery figure:nth-child(6){--screen-order:5}
.more-work .project-caption h3,.more-work .project-caption p,.stage-word,.stage-subline{transition:font-size .65s var(--motion-ease),opacity .45s ease}
.service-list summary svg{transition:transform .4s var(--motion-ease)}
#services details[data-service-motion=direct] summary svg,.motion-paused #services summary svg{transition:none}
@media(prefers-reduced-motion:reduce){#services summary svg{transition:none}}
.phone-layout #services .service-list .mobile-discovery-stage{opacity:1!important;translate:none!important}
/* The dialog lifecycle has one animation owner: app.js. */
#project-dialog{opacity:1;transform:none;transition:none}
#project-dialog::backdrop{background:rgb(0 0 0 / .48);opacity:1;transition:none}
.dialog-image-wrap{position:relative}
.dialog-image-notice{position:absolute;inset-inline:12px;bottom:12px;padding:10px 12px;background:var(--paper);color:var(--ink);border:1px solid var(--line);font-size:14px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.dialog-image-notice[hidden],.dialog-image-notice button[hidden]{display:none}
.dialog-image-notice button{min-height:44px;flex-shrink:0;background:var(--ink);color:var(--paper);padding:8px 12px;border:0}
.phone-layout .crm-feature-gallery figure{opacity:1;transform:none;transition:none}
.motion-paused #project-dialog,.motion-paused #project-dialog::backdrop{transition:none!important}

/* Keep the reveal transition from replacing the rail's width transition. */
.motion-enabled .more-work .project-item{transition:flex-grow .68s cubic-bezier(.25,.65,.3,1),opacity .75s ease,translate .9s var(--motion-ease)}
@media(min-width:901px){
  .more-work .project-caption{flex-direction:column;justify-content:flex-start;min-height:174px}
  .more-work .project-caption h3,.more-work .project-caption h3[dir=ltr],.more-work[data-open] .project-item[data-expanded=false] .project-caption h3{font-size:23px}
  .more-work .project-caption p,.more-work[data-open] .project-item[data-expanded=false] .project-caption p{font-size:15px}
}
.more-work .project-visual .phone-shot{transition:transform .68s var(--motion-ease),opacity .45s ease,left .68s var(--motion-ease)}
.more-work .project-visual .desktop-shot{transition:clip-path .68s var(--motion-ease),transform .68s var(--motion-ease),opacity .45s ease}
.motion-paused .more-work .project-item,.phone-layout .more-work .project-item{transition:none!important}
@media(prefers-reduced-motion:reduce){.motion-enabled .more-work .project-item{transition:none!important}}

.additional-work-toggle,.phone-layout .additional-work-toggle{display:block;padding-block:12px 22px}
.additional-work-toggle button{min-height:52px;max-width:440px;margin-inline:auto;background:transparent}
.additional-work-toggle button svg{transition:transform .4s var(--motion-ease)}
.phone-layout .additional-work-toggle button{max-width:none}
  .phone-layout .project-visual[data-preview] .phone-shot,.phone-layout .project-visual[data-preview] .desktop-shot{display:block!important;transition:opacity .35s ease,visibility 0s .35s!important}
  .phone-layout .project-visual[data-preview=mobile] .desktop-shot,.phone-layout .project-visual[data-preview=desktop] .phone-shot{opacity:0!important;visibility:hidden;pointer-events:none}
  .phone-layout .project-visual[data-preview=mobile] .phone-shot,.phone-layout .project-visual[data-preview=desktop] .desktop-shot{opacity:1!important;visibility:visible;transition-delay:0s!important}
  .phone-layout .project-visual[data-preview] .mobile-peek{display:block!important;transition:opacity .35s ease,visibility 0s .35s}
  .phone-layout .project-visual[data-preview=desktop] .mobile-peek{opacity:0;visibility:hidden;pointer-events:none}
  .phone-layout .project-visual[data-preview=mobile] .mobile-peek{opacity:1;visibility:visible;transition-delay:0s}
.phone-layout .dialog-image-wrap{height:min(60svh,520px);min-height:230px;display:grid;place-items:center}
.phone-layout .dialog-image-wrap img{width:100%;height:100%;max-height:100%;object-fit:contain}
.phone-layout .crm-feature-gallery figcaption{min-height:94px}
.phone-layout .project-pagination button,.phone-layout .view-switch button{touch-action:manipulation}
.motion-paused .project-visual .phone-shot,.motion-paused .project-visual .desktop-shot,.motion-paused .mobile-peek,.motion-paused.phone-layout .project-visual[data-preview] .phone-shot,.motion-paused.phone-layout .project-visual[data-preview] .desktop-shot{transition:none!important}
@media(prefers-reduced-motion:reduce){.phone-layout .project-visual[data-preview] .phone-shot,.phone-layout .project-visual[data-preview] .desktop-shot,.phone-layout .project-visual[data-preview] .mobile-peek{transition:none!important}}

.portfolio-entry .project-caption h3{font-size:26px;overflow-wrap:anywhere}
.portfolio-entry .project-visual{background:#e2e9e6}.portfolio-entry:nth-child(3n) .project-visual{background:#dce7ed}.portfolio-entry:nth-child(3n + 1) .project-visual{background:#eddde5}
.portfolio-entry[data-status=planned] .project-visual{background:#e7e7e2}
.portfolio-entry .stage-word{font:800 34px/1.1 var(--font);white-space:normal;overflow-wrap:anywhere;top:20px}
.portfolio-entry .project-caption p{max-width:270px}
.portfolio-entry[data-status=planned] .index{color:#5c604d;font-weight:700}
.phone-layout .portfolio-entry .project-caption p{max-width:none}
.phone-layout .portfolio-entry .media-toolbar:has(.preview-views[hidden]){padding-top:0}
.crm-wrap-cover{overflow:hidden;contain:paint}

/* Touch previews share one stable frame, independent of desktop reveal rules. */
.phone-layout .desktop-work .project-visual .mobile-peek{clip-path:none!important;background:transparent}
.phone-layout .desktop-work .project-visual[data-preview] .desktop-shot,
.phone-layout .desktop-work .project-visual[data-preview] .phone-shot{object-fit:contain!important;clip-path:none!important;transform:none!important;opacity:0!important;visibility:hidden;pointer-events:none}
.phone-layout .desktop-work .project-visual[data-preview=desktop] .desktop-shot,
.phone-layout .desktop-work .project-visual[data-preview=mobile] .phone-shot{opacity:1!important;visibility:visible;transition-delay:0s!important}
.phone-layout .preview-views button{touch-action:manipulation}
.phone-layout .project-visual{touch-action:pan-y pinch-zoom}
.phone-layout .dialog-image-wrap{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.phone-layout .dialog-image-wrap img{min-width:0;min-height:0}

/* Retain the form's footprint while the confirmation crossfades over it. */
.booking-flow{display:grid;margin-top:24px}
.booking-flow>#booking-form,.booking-flow>#booking-result{grid-area:1/1;min-width:0;margin-top:0;align-self:start;transition:none}
.booking-flow[data-result=false]>#booking-result,.booking-flow[data-result=true]>#booking-form{opacity:0;visibility:hidden;pointer-events:none}
.booking-flow[data-result=false]>#booking-form,.booking-flow[data-result=true]>#booking-result{opacity:1;visibility:visible;transition-delay:0s}
.motion-paused .booking-flow>*{transition:none!important}
@media(prefers-reduced-motion:reduce){.booking-flow>*{transition:none!important}}

/* Remove the inactive touch image from painting, including coarse-pointer compositing. */
.phone-layout #work .project-visual[data-preview=mobile] .desktop-shot,
.phone-layout #work .project-visual[data-preview=desktop] .phone-shot{display:none!important;opacity:0!important;visibility:hidden!important;transition:none!important}
.phone-layout #work .project-visual[data-preview=mobile] .phone-shot,
.phone-layout #work .project-visual[data-preview=desktop] .desktop-shot{display:block!important;opacity:1!important;visibility:visible!important;transition:opacity .22s ease!important}
@starting-style{
  .phone-layout #work .project-visual[data-preview=mobile] .phone-shot,
  .phone-layout #work .project-visual[data-preview=desktop] .desktop-shot{opacity:0!important}
}
.motion-paused.phone-layout #work .project-visual img{transition:none!important}
@media(prefers-reduced-motion:reduce){.phone-layout #work .project-visual img{transition:none!important}}