/* Parts of the existing line-icon vocabulary respond independently. */
.making-action-icon{display:block;height:100%;width:auto;max-width:none;overflow:visible;color:#ecebe6;pointer-events:none}
.estimate-icon .making-action-icon{width:100%;height:100%}
[data-action]{outline-offset:10px;cursor:pointer}
[data-action]:focus-visible{outline:1px solid #ead2ac;border-radius:4px}
[data-action]:focus-visible:before{opacity:1}
.paint-band{opacity:0;clip-path:inset(100% 0 0);transition:opacity .3s,clip-path .65s cubic-bezier(.2,.7,.2,1);transition-delay:var(--delay)}
[data-action="paint"]:is(:hover,:focus-visible,.is-icon-active) .paint-band{opacity:1;clip-path:inset(0)}
.water-drop{opacity:0}
[data-action="water"]:is(:hover,:focus-visible,.is-icon-active) .water-drop{animation:making-water-drop 1.4s linear var(--delay) infinite}
.bulb-glass{fill:transparent;transition:fill .45s}
.bulb-filament{transition:stroke .3s,filter .3s}
[data-action="filament"]:is(:hover,:focus-visible,.is-icon-active) .bulb-glass{fill:#f7bc4029}
[data-action="filament"]:is(:hover,:focus-visible,.is-icon-active) .bulb-filament{stroke:#ffe69b;filter:drop-shadow(0 0 3px #ffc552) drop-shadow(0 0 9px #ffb735);stroke-width:3}
.oven-interior{opacity:0;transition:opacity .5s}
.oven-door{transform-box:view-box;transform-origin:70px 122px;transition:transform .7s cubic-bezier(.22,.7,.25,1)}
[data-action="oven"]:is(:hover,:focus-visible,.is-icon-active) .oven-interior{opacity:1;filter:drop-shadow(0 0 5px #f4b84966)}
[data-action="oven"]:is(:hover,:focus-visible,.is-icon-active) .oven-door{transform:skewX(-12deg) scaleY(.32)}
.leaf-fill{fill:transparent;transition:fill .65s,stroke .65s}
[data-action="green-leaf"]:is(:hover,:focus-visible,.is-icon-active) .leaf-fill{fill:#48a464;stroke:#a3d3a5}
.helmet-shell{fill:transparent;transition:fill .55s,stroke .55s}
.helmet-sticker{opacity:0;transition:opacity .4s}
[data-action="helmet"]:is(:hover,:focus-visible,.is-icon-active) .helmet-shell,[data-action="millwork"]:is(:hover,:focus-visible,.is-icon-active) .helmet-shell{fill:#f5c52e;stroke:#ffe8a0}
[data-action="helmet"]:is(:hover,:focus-visible,.is-icon-active) .helmet-sticker,[data-action="millwork"]:is(:hover,:focus-visible,.is-icon-active) .helmet-sticker{opacity:1}
.schedule-line{stroke-dasharray:45;stroke-dashoffset:0}
[data-action="schedule"]:is(:hover,:focus-visible,.is-icon-active) .schedule-line{animation:making-schedule-run 1.5s ease var(--delay) infinite}
.phone-screen{fill:#080808;transition:fill .25s,filter .25s}
.calling-label{opacity:0;transition:opacity .25s}
[data-action="calling"]:is(:hover,:focus-visible,.is-icon-active) .phone-screen{fill:#1875cf;filter:drop-shadow(0 0 5px #3b9bff88)}
[data-action="calling"]:is(:hover,:focus-visible,.is-icon-active) .calling-label{opacity:1}
[data-action="calling"]:is(:hover,:focus-visible,.is-icon-active) .calling-phone{animation:making-phone-ring .7s linear infinite;transform-origin:150px 92px}
[data-action="calling"]:is(:hover,:focus-visible,.is-icon-active) .calling-dot{animation:making-calling-dot 1.2s ease infinite}
.calling-dot:nth-of-type(2){animation-delay:.15s!important}.calling-dot:nth-of-type(3){animation-delay:.3s!important}
.sample-card{transform-box:view-box;transform-origin:28px 124px;transform:rotate(var(--fan));transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.sample-fill{transition:fill .5s var(--delay)}
[data-action="samples"]:is(:hover,:focus-visible,.is-icon-active) .sample-fill{fill:var(--sample)}
[data-action="samples"]:is(:hover,:focus-visible,.is-icon-active) .sample-card{transform:rotate(calc(var(--fan) * 1.12))}
.ink-signature{stroke:#f2dfb2;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;stroke-width:1.8}
[data-action="signature"]:is(:hover,:focus-visible,.is-icon-active) .ink-signature{opacity:1;animation:making-signature 1.1s .15s ease both}
[data-action="signature"]:is(:hover,:focus-visible,.is-icon-active) .signing-pen{animation:making-sign-pen 1.35s ease both;transform-origin:17px 104px}
.millwork-screen{fill:#eec335;opacity:0;transition:opacity .5s}
[data-action="millwork"]:is(:hover,:focus-visible,.is-icon-active) .millwork-screen{opacity:.75}
.flag-cloth{transform-origin:20px 40px}
[data-action="waving-flag"]:is(:hover,:focus-visible,.is-icon-active) .flag-cloth,[data-action="finish-flag"]:is(:hover,:focus-visible,.is-icon-active) .flag-cloth{animation:making-flag-wave 1.25s ease-in-out infinite}
[data-action="finish-flag"] .flag-front{fill:url(#making-finish-checks)}
[data-action="finish-flag"] .flag-tail{fill:#fff;fill-opacity:.2}
@keyframes making-water-drop{0%{opacity:0;transform:translateY(-9px) scale(.65);transform-origin:121px 81px}15%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translateY(25px) scale(.85);transform-origin:121px 81px}}
@keyframes making-schedule-run{0%{stroke-dashoffset:45;opacity:.3}45%,70%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-45;opacity:0}}
@keyframes making-phone-ring{0%,55%,100%{transform:none}8%,25%,42%{transform:translateX(-1.6px) rotate(-3deg)}16%,34%,50%{transform:translateX(1.6px) rotate(3deg)}}
@keyframes making-calling-dot{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes making-signature{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes making-sign-pen{0%,100%{transform:none}20%{transform:translate(59px,12px) scale(.7) rotate(-12deg)}40%{transform:translate(78px,5px) scale(.7) rotate(-6deg)}62%{transform:translate(105px,14px) scale(.7) rotate(-12deg)}80%{transform:translate(136px,4px) scale(.7) rotate(-5deg)}}
@keyframes making-flag-wave{0%,100%{transform:skewY(-3deg) scaleX(1)}35%{transform:skewY(6deg) scaleX(.92)}70%{transform:skewY(-5deg) scaleX(.98)}}
@media(prefers-reduced-motion:reduce){
 [data-action] *{animation:none!important;transition:none!important}
 [data-action="water"]:is(:hover,:focus-visible,.is-icon-active) .water-drop:first-of-type{opacity:1}
 [data-action="signature"]:is(:hover,:focus-visible,.is-icon-active) .ink-signature{stroke-dashoffset:0}
}

/* Design stages: measuring, discussing, drawing and specifying. */
.tape-clip{transform-box:fill-box;transform-origin:right center;transform:scaleX(0);transition:transform .75s cubic-bezier(.22,.7,.25,1)}
.tape-hook{transform:translateX(0);transition:transform .75s cubic-bezier(.22,.7,.25,1)}
[data-action="tape"]:is(:hover,:focus-visible,.is-icon-active) .tape-clip{transform:scaleX(1)}
[data-action="tape"]:is(:hover,:focus-visible,.is-icon-active) .tape-hook{transform:translateX(-76px)}
.chat-received,.chat-sent{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.chat-received>path:first-child,.chat-sent>path:first-child{fill:transparent;transition:fill .4s,stroke .4s}
.chat-lines{stroke-width:1.5;opacity:.35;transition:opacity .4s}
[data-action="chat"]:is(:hover,:focus-visible,.is-icon-active) .chat-received{transform:translate(3px,-3px)}
[data-action="chat"]:is(:hover,:focus-visible,.is-icon-active) .chat-sent{transform:translate(-2px,3px)}
[data-action="chat"]:is(:hover,:focus-visible,.is-icon-active) .chat-received>path:first-child{fill:#626770;stroke:#aeb3bb}
[data-action="chat"]:is(:hover,:focus-visible,.is-icon-active) .chat-sent>path:first-child{fill:#54ae66;stroke:#8de09e}
[data-action="chat"]:is(:hover,:focus-visible,.is-icon-active) .chat-lines{opacity:1}
[data-action="layout"] .plan-outer,[data-action="layout"] .plan-inner,[data-action="layout"] .plan-door,[data-action="architectural"] .plan-outer,[data-action="architectural"] .plan-inner,[data-action="architectural"] .plan-door{stroke-dasharray:1;opacity:.32;transition:opacity .3s}
[data-action="layout"]:is(:hover,:focus-visible,.is-icon-active) :is(.plan-outer,.plan-inner,.plan-door),[data-action="architectural"]:is(:hover,:focus-visible,.is-icon-active) :is(.plan-outer,.plan-inner,.plan-door){opacity:1;animation:making-plan-draw 1s ease both}
[data-action="layout"]:is(:hover,:focus-visible,.is-icon-active) .plan-inner,[data-action="architectural"]:is(:hover,:focus-visible,.is-icon-active) .plan-inner{animation-delay:.2s}
[data-action="layout"]:is(:hover,:focus-visible,.is-icon-active) .plan-door,[data-action="architectural"]:is(:hover,:focus-visible,.is-icon-active) .plan-door{animation-delay:.45s}
.architectural-dimensions{opacity:0;transition:opacity .35s}
[data-action="architectural"] .making-action-icon{transition:transform .5s;transform-origin:0 50%}
[data-action="architectural"]:is(:hover,:focus-visible,.is-icon-active){z-index:4}
[data-action="architectural"]:is(:hover,:focus-visible,.is-icon-active) .making-action-icon{transform:scale(1.5)}
[data-action="architectural"]:is(:hover,:focus-visible,.is-icon-active) .architectural-dimensions{opacity:1;transition-delay:.55s}
.concept-chair-photo{opacity:0;transition:opacity .45s}
.concept-chair-outline{opacity:1;transition:opacity .35s}
[data-action="concept-chair"]:is(:hover,:focus-visible,.is-icon-active) .concept-chair-photo{opacity:1}
[data-action="concept-chair"]:is(:hover,:focus-visible,.is-icon-active) .concept-chair-outline{opacity:0}
.process-card-icon[data-action="ordering-chair"] .ordering-chair-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:none!important;mix-blend-mode:normal;opacity:0;transform:scale(.9);transition:opacity .45s,transform .55s}
.ordering-chair-outline{transition:opacity .35s!important}
[data-action="ordering-chair"]:is(:hover,:focus-visible,.is-icon-active) .ordering-chair-outline{opacity:0}
.process-card-icon[data-action="ordering-chair"]:is(:hover,:focus-visible,.is-icon-active) .ordering-chair-photo{opacity:1;transform:scale(1.12)}
.render-wall{fill:#729889;opacity:0;transition:opacity .5s}
.render-floor{fill:#d9b98b;opacity:0;transition:opacity .5s .1s}
.render-chair{fill:transparent;transition:fill .5s .15s}
.render-lamp{transition:stroke .5s .2s}
.render-light{fill:#ffe6a5;opacity:0;transition:opacity .5s .3s}
[data-action="render-colour"]:is(:hover,:focus-visible,.is-icon-active) .render-wall,[data-action="render-colour"]:is(:hover,:focus-visible,.is-icon-active) .render-floor{opacity:.9}
[data-action="render-colour"]:is(:hover,:focus-visible,.is-icon-active) .render-chair{fill:#b76451}
[data-action="render-colour"]:is(:hover,:focus-visible,.is-icon-active) .render-lamp{stroke:#f0cc73}
[data-action="render-colour"]:is(:hover,:focus-visible,.is-icon-active) .render-light{opacity:.25}
.order-reveal-one,.order-reveal-two{transform-box:fill-box;transform-origin:left;transform:scaleX(0)}
.order-pen{transform:translate(125px,32px) rotate(10deg)}
[data-action="order-writing"]:is(:hover,:focus-visible,.is-icon-active) .order-reveal-one{animation:making-order-reveal .5s linear both}
[data-action="order-writing"]:is(:hover,:focus-visible,.is-icon-active) .order-reveal-two{animation:making-order-reveal .7s .6s linear both}
[data-action="order-writing"]:is(:hover,:focus-visible,.is-icon-active) .order-pen{animation:making-order-pen 1.5s linear both}
.delivery-truck{opacity:0;transform:translateX(30px)}
.delivery-parcels{transition:opacity .4s}
[data-action="delivery-truck"]:is(:hover,:focus-visible,.is-icon-active) .delivery-parcels{opacity:.45}
[data-action="delivery-truck"]:is(:hover,:focus-visible,.is-icon-active) .delivery-truck{animation:making-truck-leave 1.8s cubic-bezier(.3,.1,.3,1) both}
.truck-speed{opacity:0}
[data-action="delivery-truck"]:is(:hover,:focus-visible,.is-icon-active) .truck-speed{animation:making-truck-speed .45s .4s 3}
@keyframes making-plan-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes making-order-reveal{to{transform:scaleX(1)}}
@keyframes making-order-pen{0%{transform:translate(23px,55px)}33%{transform:translate(81px,55px)}40%{transform:translate(23px,83px)}87%{transform:translate(117px,83px)}100%{transform:translate(125px,32px) rotate(10deg)}}
@keyframes making-truck-leave{0%{opacity:0;transform:translateX(30px)}15%{opacity:1;transform:translateX(32px)}85%{opacity:1;transform:translateX(120px)}100%{opacity:0;transform:translateX(145px)}}
@keyframes making-truck-speed{0%,100%{opacity:0}50%{opacity:.7}}
@media(prefers-reduced-motion:reduce){
 [data-action="order-writing"]:is(:hover,:focus-visible,.is-icon-active) :is(.order-reveal-one,.order-reveal-two){transform:scaleX(1)}
 [data-action="delivery-truck"]:is(:hover,:focus-visible,.is-icon-active) .delivery-truck{opacity:1;transform:translateX(75px)}
}