/* Scenes: the hero sketch and the help chapters, on ordinary blocks.
   Base styles are the finished state; motion only applies when the page script
   is running (.ms-js), and never with reduced motion. */
body{--ms-overlap:clamp(96px,19vw,280px);--ms-landing:#f5f0e6}
.ms-hero,.ms-chapters{--ms-ink:#23241f;--ms-paper:#fff8ed}

/* Hero */
/* The sheet crosses into the next section: the hero's lowest band is painted in that section's first colour. */
.mk-section.ms-hero{position:relative;isolation:isolate;overflow-x:clip;padding:72px 0 0;text-align:center;
 background:linear-gradient(to bottom,transparent calc(100% - var(--ms-overlap)),var(--ms-landing) 0),
  radial-gradient(110% 50% at 50% 72%,#d9876c66,transparent 62%),linear-gradient(112deg,#863d43,var(--red,#b84c55) 62%,#bf7064)}
.ms-hero::before{content:"";position:absolute;inset:-140px 0 var(--ms-overlap);z-index:-1;pointer-events:none;
 background:url(../scenes/doodles.svg) 0 0/720px 720px;opacity:.17;
 -webkit-mask-image:radial-gradient(ellipse 50% 40% at 50% 30%,transparent 40%,#000 82%);
 mask-image:radial-gradient(ellipse 50% 40% at 50% 30%,transparent 40%,#000 82%)}
.ms-hero>.mk-wrap{display:flex;flex-direction:column;align-items:center}
.mk-section.ms-hero h1{max-width:20ch;margin-inline:auto;font-size:clamp(48px,6.6vw,98px);font-weight:400;line-height:.98;letter-spacing:-.05em}
.ms-hero h1 em{display:block;font-style:italic;font-weight:300;letter-spacing:-.035em;color:#ffe6d6}
.mk-section.ms-hero>.mk-wrap>p{margin:26px auto 0;max-width:54ch;font-size:19px;line-height:1.6;color:#fff3e8}
.ms-hero .mk-actions{justify-content:center;margin-top:30px}

/* The sheet: a hand-drawn browser window holding a real screenshot, with two more pieces of work beside it. */
.ms-sketch{position:relative;z-index:2;width:min(1040px,calc(100% - 96px));aspect-ratio:1000/740;margin:60px auto 0}
.ms-sketch::before{content:"";position:absolute;inset:0;border-radius:18px;background:var(--ms-paper);
 box-shadow:0 40px 70px -30px #3a0d1270,0 14px 30px -18px #3a0d1255}
.ms-sheet{position:absolute;inset:0;z-index:2;color:var(--ms-ink);pointer-events:none}
.ms-sheet svg{display:block;width:100%;height:100%}
.ms-sheet g{stroke-width:2.4}
.ms-sheet .ms-bar{stroke-width:7}
.ms-sheet .ms-bar--big{stroke-width:12}
.ms-sheet .ms-wire{opacity:0}
.ms-sketch>img{display:block;margin:0;max-width:none}
.ms-sketch>img:first-of-type{position:absolute;z-index:1;left:1.4%;top:8.9%;width:97.2%;height:89.2%;object-fit:cover;object-position:50% 0;border-radius:0 0 14px 14px}
.ms-sketch>img:nth-of-type(n+2){position:absolute;z-index:3;width:31%;height:auto;aspect-ratio:880/612;object-fit:cover;object-position:50% 0;border-radius:10px;
 box-shadow:0 26px 50px -22px #2b0a0e80,0 0 0 1px #23241f1a}
.ms-sketch>img:nth-of-type(2){left:-11%;bottom:16%;rotate:-5deg}
.ms-sketch>img:nth-of-type(3){right:-10%;top:13%;rotate:4deg}

/* Chapters: the drawing stays beside the offers while they scroll past. */
.ms-chapters{--ms-tint:#f5f0e6;background:var(--ms-tint);transition:background-color .9s ease}
.ms-chapters[data-ms-active=develop]{--ms-tint:#f6ebe5}
.ms-chapters[data-ms-active=content]{--ms-tint:#eef0e5}
.ms-chapters[data-ms-active=apps]{--ms-tint:#eaf1f3}
.ms-chapters[data-ms-active=assistants]{--ms-tint:#f8f0dc}
.ms-chapters[data-ms-active=agents]{--ms-tint:#efebf4}
.ms-chapters[data-ms-active=build]{--ms-tint:#f7ecdd}
.ms-chapters[data-ms-active=care]{--ms-tint:#e9f0eb}
.ms-stage{position:relative;width:min(100%,440px);aspect-ratio:480/420;margin-top:30px;color:var(--ms-ink)}
.ms-panel{position:absolute;inset:0;opacity:0;transition:opacity .5s ease}
.ms-panel:first-child,.ms-chapters.is-enhanced .ms-panel.is-active{opacity:1}
.ms-chapters.is-enhanced .ms-panel:first-child:not(.is-active){opacity:0}
.ms-panel svg{display:block;width:100%;height:100%}
.ms-panel g{stroke-width:2.5}
.ms-panel .ms-bar{stroke-width:6.5}
.ms-panel .ms-wash{stroke:none;fill:var(--ms-wash,#e9c3bb)}
.ms-panel .ms-dot{stroke:none;fill:currentColor}
.ms-panel .ms-solid{stroke:none;fill:var(--ms-paper)}
.ms-panel[data-ms-panel=develop]{--ms-wash:#ebc8bf}
.ms-panel[data-ms-panel=content]{--ms-wash:#d2dac5}
.ms-panel[data-ms-panel=build]{--ms-wash:#efd1aa}
.ms-panel[data-ms-panel=care]{--ms-wash:#c3d8ce}
.ms-panel[data-ms-panel=apps]{--ms-wash:#c6d9e0}
.ms-panel[data-ms-panel=assistants]{--ms-wash:#f0d79a}
.ms-panel[data-ms-panel=agents]{--ms-wash:#d6cce6}
.ms-chapters .me-service-line{border-top:0}
.ms-chapters .me-service-line h3{font-size:clamp(29px,2.7vw,40px)}
.ms-chapters .me-service-line p{font-size:18px;max-width:40ch}

@media(min-width:761px){
 .ms-chapters .me-split{align-items:start}
 .ms-chapters .me-split>div:first-child{position:sticky;top:max(28px,calc(50vh - 320px))}
 .ms-chapters .me-service-line{min-height:48vh;display:flex;flex-direction:column;justify-content:center}
 .ms-chapters .me-service-line:last-child{padding-bottom:24px}
}
@media(max-width:760px){
 body{--ms-overlap:clamp(70px,24vw,150px)}
 .mk-section.ms-hero{padding-top:44px}
 .mk-section.ms-hero>.mk-wrap>p{font-size:17px}
 .ms-sketch{width:calc(100% - 40px);margin-top:44px}
 .ms-sketch>img:nth-of-type(n+2){width:42%}
 .ms-sketch>img:nth-of-type(2){left:-7%;bottom:-9%}
 .ms-sketch>img:nth-of-type(3){right:-6%;top:-7%}
 .ms-sheet g{stroke-width:3.6}
 .ms-sheet .ms-bar--big{stroke-width:15}
 .ms-chapters .me-split>div:first-child{display:contents}
 .ms-stage{position:sticky;top:0;z-index:2;width:auto;height:min(40vh,320px);aspect-ratio:auto;margin:6px -20px 0;padding:10px 0;background:var(--ms-tint);transition:background-color .9s ease}
 .ms-chapters .me-service-line{min-height:44vh;display:flex;flex-direction:column;justify-content:center}
}

/* Motion: only with the page script, and only for people who have not asked for less. */
@media(prefers-reduced-motion:no-preference){
 .ms-js .ms-sheet .ms-ln{stroke-dasharray:1;stroke-dashoffset:1}
 .ms-js .ms-sketch:not(.is-live)>img{opacity:0}
 .ms-js .ms-sketch.is-live .ms-sheet .ms-ln:not(.ms-wire){animation:ms-draw 1.1s cubic-bezier(.55,.1,.3,1) calc(var(--i) * 70ms) both}
 .ms-js .ms-sketch.is-live .ms-wire{animation:ms-wire 3.2s cubic-bezier(.55,.1,.3,1) calc(.35s + var(--i) * 55ms) both}
 .ms-js .ms-sketch.is-live>img:first-of-type{animation:ms-reveal 1.1s ease 2.5s both}
 .ms-js .ms-sketch.is-live>img:nth-of-type(2){animation:ms-arrive 1s cubic-bezier(.2,.8,.2,1) 3s both}
 .ms-js .ms-sketch.is-live>img:nth-of-type(3){animation:ms-arrive 1s cubic-bezier(.2,.8,.2,1) 3.25s both}
 .ms-js .ms-hero>.mk-wrap>*{animation:ms-rise .9s cubic-bezier(.2,.8,.2,1) both}
 .ms-js .ms-hero>.mk-wrap>:nth-child(2){animation-delay:.12s}
 .ms-js .ms-hero>.mk-wrap>:nth-child(3){animation-delay:.24s}
 .ms-js .ms-chapters.is-enhanced .ms-panel .ms-ln{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .95s cubic-bezier(.55,.1,.3,1) calc(var(--i) * 40ms)}
 .ms-js .ms-chapters.is-enhanced .ms-panel.is-active .ms-ln{stroke-dashoffset:0}
 .ms-chapters.is-enhanced .ms-panel .ms-wash{transform-box:fill-box;transform-origin:center;scale:.82;transition:scale 1s cubic-bezier(.2,.8,.2,1)}
 .ms-chapters.is-enhanced .ms-panel.is-active .ms-wash{scale:1}
 .ms-chapters.is-enhanced .ms-panel .ms-dot,.ms-chapters.is-enhanced .ms-panel .ms-solid{opacity:0;transition:opacity .4s ease .5s}
 .ms-chapters.is-enhanced .ms-panel.is-active .ms-dot,.ms-chapters.is-enhanced .ms-panel.is-active .ms-solid{opacity:1}
 .ms-chapters.is-enhanced .me-service-line{transition:opacity .5s ease}
 .ms-chapters.is-enhanced .me-service-line:not(.is-active){opacity:.38}
 @supports (animation-timeline:scroll()){
  .ms-js .ms-hero::before{animation:ms-drift linear both;animation-timeline:scroll(root);animation-range:0 110vh}
  .ms-js .ms-sketch{animation:ms-lift linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  .ms-js .ms-sketch.is-live>img:nth-of-type(2){animation:ms-arrive 1s cubic-bezier(.2,.8,.2,1) 3s both,ms-float-a linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 100vh}
  .ms-js .ms-sketch.is-live>img:nth-of-type(3){animation:ms-arrive 1s cubic-bezier(.2,.8,.2,1) 3.25s both,ms-float-b linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 100vh}
 }
}
@keyframes ms-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes ms-wire{0%{opacity:1;stroke-dasharray:1;stroke-dashoffset:1}38%{opacity:1;stroke-dashoffset:0}72%{opacity:1;stroke-dasharray:1;stroke-dashoffset:0}100%{opacity:0;stroke-dasharray:1;stroke-dashoffset:0}}
@keyframes ms-reveal{from{opacity:0;transform:scale(1.015)}to{opacity:1;transform:none}}
@keyframes ms-arrive{from{opacity:0;transform:translateY(46px)}to{opacity:1;transform:none}}
@keyframes ms-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes ms-drift{to{translate:0 130px}}
@keyframes ms-lift{to{translate:0 -36px}}
@keyframes ms-float-a{to{translate:-26px -150px}}
@keyframes ms-float-b{to{translate:22px -110px}}

/* How it comes together: steps on the left, a stage where the pieces of a
   website arrive from every side and settle into a drawn window. The static
   page shows the finished website and all steps as a list. */
.ms-assembly{background:#f5f0e6}
.ms-assembly-pin{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);gap:48px;align-items:center}
@media(min-width:761px){.ms-assembly-stage{width:min(calc(100% + max(0px,(100vw - 1180px) / 2 - 24px)),calc(118vh));justify-self:start}}
.ms-assembly-copy h2{max-width:12ch}
.ms-assembly-copy>p{margin-top:18px}
.ms-steps{margin-top:30px;display:grid;gap:22px}
.ms-step h3{font-size:26px}
.ms-step p{margin-top:8px;font-size:16px}
.ms-assembly-stage{position:relative;aspect-ratio:10/7;container-type:inline-size;color:var(--ms-ink);overflow:clip;overflow-clip-margin:3cqw}
.ms-assembly-art{position:absolute;inset:0;pointer-events:none}
.ms-assembly-art svg{display:block;width:100%;height:100%}
.ms-assembly-art g{stroke-width:2.6}
.ms-assembly-art .ms-bar{stroke-width:8}
.ms-assembly-art .ms-bar--big{stroke-width:13}
.ms-piece{position:absolute;left:calc(var(--fx) * 1cqw);top:calc(var(--fy) * 1cqw);width:calc(var(--fw) * 1cqw);
 font:500 1.55cqw/1.3 var(--sans,Arial,sans-serif);color:var(--ms-ink);
 transform:translate(calc(var(--dx,0) * 1cqw),calc(var(--dy,0) * 1cqw)) rotate(calc(var(--r,0) * 1deg)) scale(var(--s,1));opacity:var(--o,1)}
.ms-piece p{margin:0!important;max-width:none!important;font:inherit!important}
.ms-assembly:not(.is-enhanced) .ms-piece[data-end=fade]{display:none}
/* Human pieces look drawn; software pieces look like the software they are. */
.ms-piece--ask,.ms-piece--answer{padding:1.1cqw 1.4cqw;border:.2cqw solid var(--ms-ink);background:#fff8ed;border-radius:1.8cqw 2.1cqw 2cqw .5cqw/2cqw 1.7cqw 2.2cqw 1.9cqw;box-shadow:.5cqw .5cqw 0 #23241f14}
.ms-piece--answer{background:#f1d8cf;border-radius:2.1cqw 1.8cqw .5cqw 2cqw/1.7cqw 2cqw 1.9cqw 2.2cqw}
.ms-piece--sketch{padding:1cqw;background:#fffdf7;border:.15cqw solid #23241f33;border-radius:.6cqw;box-shadow:0 1.6cqw 3cqw -1.6cqw #23241f55}
.ms-piece--sketch svg{display:block;width:100%;height:auto}
.ms-piece--sketch g{stroke-width:2.4}
.ms-piece--sketch .ms-bar{stroke-width:6}
.ms-piece--swatches{display:flex;gap:.6cqw}
.ms-piece--swatches i{flex:1;aspect-ratio:1;border-radius:50%;border:.2cqw solid #fff8ed;box-shadow:0 .5cqw 1cqw -.4cqw #23241f66;background:var(--red,#b84c55)}
.ms-piece--swatches i:nth-child(2){background:#a9b892}
.ms-piece--swatches i:nth-child(3){background:#e2b067}
.ms-piece--note{padding:1.3cqw 1.2cqw 1.6cqw;background:#f4dc8a;font:italic 400 1.9cqw/1.15 var(--display,Georgia,serif);box-shadow:0 1.2cqw 2cqw -1.2cqw #23241f66}
.ms-piece--code{padding:1.3cqw 1.5cqw;border-radius:.9cqw;background:#23241f;color:#f5f0e6;box-shadow:0 1.6cqw 3cqw -1.6cqw #23241f99}
.ms-piece--code code{font:1.45cqw/1.55 var(--mono,monospace);background:none;padding:0;color:inherit}
.ms-piece--code b{font-weight:400;color:#e9a6a0}.ms-piece--code i{font-style:normal;color:#c3d8ce}.ms-piece--code s{text-decoration:none;color:#f0d79a}
.ms-piece--server,.ms-piece--phone{display:flex;align-items:center;gap:.9cqw;padding:.9cqw 1.3cqw;border-radius:5cqw;background:#fff;border:.15cqw solid #23241f22;box-shadow:0 .8cqw 1.6cqw -.8cqw #23241f55;white-space:nowrap}
.ms-piece-icon{flex:none;width:2cqw;height:2cqw;border-radius:50%;background:#233f3b}
.ms-piece--server .ms-piece-icon{border-radius:.4cqw;background:repeating-linear-gradient(#233f3b 0 .55cqw,#fff 0 .75cqw)}
.ms-piece--phone .ms-piece-icon{background:#2f8f5b}
.ms-piece--ai{padding:1cqw 1.3cqw;border-radius:1cqw;background:#fff;border:.15cqw solid #23241f22;box-shadow:0 .8cqw 1.6cqw -.8cqw #23241f55}
.ms-piece--ai span{display:inline-block;width:1.8cqw;color:#863d43}
.ms-piece--ai p+p span{color:#2f8f5b}
.ms-piece--button p{padding:1.1cqw 0;border-radius:5cqw;background:var(--red,#b84c55);color:#fff8ed;text-align:center;font-weight:600!important}
.ms-piece--calendar{padding:1.1cqw;border-radius:1cqw;background:#fff;border:.15cqw solid #23241f22;box-shadow:0 .8cqw 1.6cqw -.8cqw #23241f55}
.ms-piece--calendar p{font-weight:600!important;margin-bottom:.8cqw!important}
.ms-piece--calendar div{display:grid;grid-template-columns:repeat(7,1fr);gap:.55cqw}
.ms-piece--calendar i{aspect-ratio:1;border-radius:50%;background:#23241f1f}
.ms-piece--calendar i.is-on{background:var(--red,#b84c55);box-shadow:0 0 0 .35cqw #b84c5533}
.ms-piece--chat{overflow:hidden;border-radius:1.2cqw;background:#fff;border:.15cqw solid #23241f22;box-shadow:0 1.2cqw 2.4cqw -1.2cqw #23241f66}
.ms-chat-head{padding:.7cqw 1.2cqw;background:#233f3b;color:#f5f0e6;font-weight:600!important}
.ms-chat-msg{margin:1cqw 1.2cqw!important;padding:.8cqw 1cqw;border-radius:1cqw 1cqw 1cqw .3cqw;background:#e9f0eb}
.ms-chat-input{height:2cqw;margin:0 1.2cqw 1.1cqw!important;border-radius:1cqw;border:.15cqw solid #23241f26}
.ms-progress{display:flex;gap:6px;margin-top:28px}
.ms-progress span{flex:1;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--ms-ink) calc(var(--fill,0) * 100%),#23241f22 0)}

@media(min-width:761px){
 .ms-assembly.is-enhanced{padding:0}
 .ms-assembly.is-enhanced>.mk-wrap{height:430vh}
 .ms-assembly.is-enhanced .ms-assembly-pin{position:sticky;top:0;height:100vh;height:100svh}
}
.ms-assembly.is-enhanced .ms-steps{position:relative;display:block;min-height:8.5em}
.ms-assembly.is-enhanced .ms-step{position:absolute;inset:0 0 auto;opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.ms-assembly.is-enhanced .ms-step.is-active{opacity:1;transform:none;pointer-events:auto}
.ms-assembly.is-enhanced .ms-assembly-art .ms-ln{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--draw,0))}
.ms-assembly.is-enhanced .ms-assembly-art{opacity:min(1,calc(var(--draw,0) * 3))}
.ms-assembly.is-enhanced .ms-piece{will-change:transform,opacity}

@media(max-width:760px){
 .ms-assembly-pin{grid-template-columns:1fr;gap:20px}
 .ms-assembly-stage{width:calc(100% + 40px);margin:0 -20px}
 .ms-assembly.is-enhanced{padding:0;overflow-x:clip}
 .ms-assembly.is-enhanced>.mk-wrap{height:460vh}
 .ms-assembly.is-enhanced .ms-assembly-pin{position:sticky;top:0;height:100svh;align-content:center;gap:12px}
 .ms-assembly.is-enhanced .ms-assembly-copy h2{font-size:30px}
 .ms-assembly.is-enhanced .ms-assembly-copy>p{display:none}
 .ms-assembly.is-enhanced .ms-steps{margin-top:14px;min-height:7.5em}
 .ms-step h3{font-size:23px}
 .ms-piece{font-size:2.1cqw}
 .ms-piece--code code{font-size:1.9cqw}
}

/* Work: a row of examples that scrolls sideways, with the next one peeking in. */
.ms-carousel .me-project-grid{display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:max(24px,calc((100vw - 1180px) / 2));
 margin-inline:calc(50% - 50vw);padding:6px max(24px,calc((100vw - 1180px) / 2)) 22px;scrollbar-width:thin;scrollbar-color:#f5f0e655 transparent;
 --edge:max(14px,calc((100vw - 1180px) / 2 - 16px));
 -webkit-mask-image:linear-gradient(90deg,#0000,#000 var(--edge),#000 calc(100% - var(--edge)),#0000);mask-image:linear-gradient(90deg,#0000,#000 var(--edge),#000 calc(100% - var(--edge)),#0000)}
.ms-carousel .me-project-grid>.me-project,.ms-carousel .me-project-grid>.me-project:first-child{flex:0 0 min(560px,78vw);display:block;scroll-snap-align:start;grid-column:auto}
.ms-carousel .me-project-grid>.me-project:first-child .me-project-copy{padding-top:22px}
.ms-carousel .me-project-image{overflow:hidden;border-radius:8px}
.ms-carousel .me-project-image img{aspect-ratio:16/10;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.ms-carousel .me-project-image:hover img{transform:scale(1.03)}
.ms-carousel-nav{display:flex;gap:10px;margin-left:auto}
.ms-carousel .me-section-heading{align-items:center}
.ms-carousel-nav button{width:46px;height:46px;border-radius:50%;border:1px solid #f5f0e666;background:transparent;color:#f5f0e6;font-size:20px;cursor:pointer;transition:background .2s,opacity .2s}
.ms-carousel-nav button:hover:not(:disabled){background:#f5f0e61f}
.ms-carousel-nav button:disabled{opacity:.3;cursor:default}
.ms-carousel-nav button:focus-visible{outline:3px solid #f5f0e6;outline-offset:3px}
@media(max-width:760px){.ms-carousel .me-project-grid{gap:18px}.ms-carousel-nav{display:none}}

/* Editor: show the assembly as its finished website and the work as a plain row. */
.editor-styles-wrapper .ms-assembly-stage{min-height:120px;border:1px dashed #23241f55;border-radius:6px;display:grid;place-items:center}
.editor-styles-wrapper .ms-assembly-stage::after{content:"The pieces of a website come together here on the website";font:500 13px/1.4 var(--sans,Arial,sans-serif);color:#23241f99}
.editor-styles-wrapper .ms-carousel .me-project-grid{margin-inline:0;padding-inline:0}

/* In the editor the drawings are not shown; mark where they will appear. */
.editor-styles-wrapper .ms-stage{min-height:120px;border:1px dashed #23241f55;border-radius:6px;display:grid;place-items:center}
.editor-styles-wrapper .ms-stage::after{content:"Drawings appear here on the website";font:500 13px/1.4 var(--sans,Arial,sans-serif);color:#23241f99}
.editor-styles-wrapper .ms-sketch{aspect-ratio:auto;margin-bottom:40px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}
.editor-styles-wrapper .ms-sketch::before{display:none}
.editor-styles-wrapper .ms-sketch>img{position:static!important;width:100%!important;height:auto!important;rotate:none!important}
.editor-styles-wrapper .ms-hero{background:linear-gradient(112deg,#863d43,var(--red,#b84c55) 62%,#bf7064)}