/* Scenes: the hero sketch, the help chapters, "Choose what you need" and the
   work row, 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,13vw,200px);--ms-landing:#f6ebe5}
.ms-hero,.ms-chapters,.ms-compose{--ms-ink:#23241f;--ms-paper:#fff8ed}

/* Smooth scrolling: Lenis adds these classes to the root while it runs. */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}

/* 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 with the sketch of a homepage inside. */
.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}
/* A picture placed inside the sheet in the editor shows inside the drawn window instead of the sketch. */
.ms-sketch>.ms-sheet+*{position:absolute;z-index:1;left:1.4%;top:8.9%;width:97.2%;height:89.2%;margin:0;overflow:hidden;border-radius:0 0 14px 14px}
.ms-sketch>.ms-sheet+* img,.ms-sketch>.ms-sheet+img{display:block;width:100%;height:100%;max-width:none;margin:0;object-fit:cover;object-position:50% 0}
.ms-sketch>.ms-sheet~*:not(.ms-sheet+*){display:none}
.ms-sketch:has(>.ms-sheet+*) .ms-sheet :is(.ms-wire,.ms-fill){display:none}

/* Hero examples: buttons to pick a kind of business, a window showing an example
   homepage for it, and notes beside the window explaining its choices. On narrower
   screens the notes become a numbered list under the window, matched by numbers
   on the parts they explain. Without the page script the first example shows. */
.ms-sketch.has-studies{width:min(820px,calc(100vw - 600px));aspect-ratio:auto;margin-top:34px}
.ms-sketch.has-studies::before{display:none}
.mk-section.ms-hero .ms-pick-label{margin:0 auto 12px!important;font:italic 400 19px/1.3 var(--display,Georgia,serif)!important;color:#ffe6d6!important}
.ms-pick{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:26px}
.ms-pick-item{padding:9px 18px;border:1px solid #fff8ed8c;border-radius:40px;background:transparent;color:#fff8ed;font:500 15px/1.2 var(--sans,Arial,sans-serif);cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
button.ms-pick-item:hover{background:#fff8ed1f}
button.ms-pick-item[aria-pressed=true]{background:#fff8ed;border-color:#fff8ed;color:#23241f}
.ms-pick-item:focus-visible{outline:3px solid #fff8ed;outline-offset:3px}
.ms-sketch.has-studies:not(.is-picking) :is(.ms-pick,.ms-pick-label){display:none}
.ms-stagebox{position:relative;text-align:left}
.ms-window{position:relative;aspect-ratio:1000/625;container-type:inline-size;color:var(--ms-ink)}
.ms-window::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-window .ms-sheet g{stroke-width:2.4}
.ms-window .ms-sheet .ms-bar{stroke-width:7}

/* The example homepage, drawn inside the window (sizes in cqw of the window). */
.ms-demo{position:absolute;z-index:3;left:5%;right:5%;top:10.5%;height:62%;opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
.ms-demo.is-active{opacity:1;visibility:visible;transition:opacity .25s}
.ms-demo p{margin:0!important;max-width:none!important;color:inherit!important}
.ms-demo-nav{display:flex;align-items:center;gap:2.6cqw;padding-top:2.4cqw}
.ms-part--name{font:600 2.5cqw/1 var(--display,Georgia,serif);letter-spacing:-.02em}
.ms-demo-nav>i{width:5cqw;height:.3cqw;border-radius:1cqw;background:#23241f;opacity:.55}
.ms-demo-nav>b+i{margin-left:auto}
.ms-part--menu{padding:.9cqw 2cqw;border:.25cqw solid #23241f;border-radius:4cqw;font:600 1.45cqw/1 var(--sans,Arial,sans-serif)}
.ms-demo-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:4.4cqw;align-items:center;padding-top:4cqw}
.ms-part--headline{font:400 4.7cqw/1.03 var(--display,Georgia,serif)!important;letter-spacing:-.035em}
.ms-part--details{margin-top:2cqw!important;font:500 1.6cqw/1.4 var(--sans,Arial,sans-serif)!important;color:#23241fb8!important}
.ms-part--button{display:inline-block;margin-top:2.8cqw;padding:1.4cqw 2.8cqw;border-radius:4cqw;background:var(--red,#b84c55);color:#fff8ed;font:600 1.6cqw/1 var(--sans,Arial,sans-serif)}
.ms-part--photo{position:relative;aspect-ratio:4/3;overflow:hidden;border:.25cqw solid #23241f;border-radius:2cqw;background:#fffdf7;--ms-wash:#efd1aa}
.ms-part--photo svg,.ms-part--photo img{display:block;width:100%;height:100%;object-fit:cover}
.ms-part--photo g{stroke-width:2.8}
.ms-part--photo .ms-wash{fill:var(--ms-wash);stroke:none}
.ms-part--photo .ms-dot{fill:currentColor;stroke:none}
.ms-demo[data-study=garden] .ms-part--photo{--ms-wash:#c3d8ce}
.ms-demo[data-study=yoga] .ms-part--photo{--ms-wash:#d6cce6}
.ms-demo[data-study=community] .ms-part--photo{--ms-wash:#ebc8bf}
.ms-part{position:relative}
.ms-part--headline,.ms-part--details{width:fit-content}
.ms-part--photo .ms-mark{top:1.2cqw;right:1.2cqw}
.ms-part--headline .ms-mark,.ms-part--details .ms-mark,.ms-part--name .ms-mark{top:50%;right:auto;left:calc(100% + .8cqw);translate:0 -50%}
/* A part a note explains gets a highlighter stroke (text) or a soft ring (buttons, photo). */
.ms-part--headline.is-noted>span,.ms-part--details.is-noted>span,.ms-part--name.is-noted>span{background:linear-gradient(transparent 58%,#f6dc8ed9 0) no-repeat 0 0/100% 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ms-part--button.is-noted,.ms-part--menu.is-noted,.ms-part--photo.is-noted{box-shadow:0 0 0 .8cqw #f6dc8ecc}
.ms-mark{display:none;position:absolute;top:-1.8cqw;right:-1.8cqw;place-items:center;width:3.6cqw;aspect-ratio:1;border-radius:50%;background:#23241f;color:#fff8ed;font:700 2cqw/1 var(--sans,Arial,sans-serif)}

/* Notes: paper slips beside the window, each with an arrow pointing in. */
.ms-notes{position:absolute;inset:0;z-index:4;margin:0;padding:0;list-style:none;pointer-events:none}
.ms-notes:not(.is-active){visibility:hidden}
.ms-note{position:absolute;width:214px;margin:0;padding:11px 14px 12px;border-radius:3px;background:#fff8ed;color:#23241f;box-shadow:0 12px 26px -14px #2a0b1099;
 font:italic 400 17px/1.32 var(--display,Georgia,serif);text-align:left}
.ms-note.is-left{right:calc(100% + 62px);rotate:-1.6deg}
.ms-note.is-right{left:calc(100% + 62px);rotate:1.4deg}
.ms-note--name,.ms-note--menu{top:9%}
.ms-note--headline{top:24%}
.ms-note--photo{top:40%}
.ms-note--details{top:40%}
.ms-note--button{top:58%}
/* scenes.js moves each note level with its part and points the arrow at it (--arrow). */
.ms-note-num{display:none}
.ms-note-arrow{position:absolute;top:var(--arrow,50%);width:58px;translate:0 -50%;color:#23241f}
.ms-note.is-left .ms-note-arrow{left:calc(100% + 6px)}
.ms-note.is-right .ms-note-arrow{right:calc(100% + 6px);scale:-1 1}
.ms-note-arrow svg{display:block;width:100%;height:auto}
.ms-note-arrow g{stroke-width:2.6}

@media(prefers-reduced-motion:no-preference){
 .ms-js .ms-demo .ms-part{opacity:0;translate:0 .8cqw;transition:opacity .45s ease,translate .6s cubic-bezier(.2,.8,.2,1)}
 .ms-js .ms-sketch.is-live .ms-demo.is-active .ms-part{opacity:1;translate:none}
 .ms-js .ms-sketch.is-live .ms-demo.is-active .ms-part--name{transition-delay:.1s}
 .ms-js .ms-sketch.is-live .ms-demo.is-active .ms-part--menu{transition-delay:.2s}
 .ms-js .ms-sketch.is-live .ms-demo.is-active .ms-part--headline{transition-delay:.3s}
 .ms-js .ms-sketch.is-live .ms-demo.is-active .ms-part--details{transition-delay:.45s}
 .ms-js .ms-sketch.is-live .ms-demo.is-active .ms-part--button{transition-delay:.55s}
 .ms-js .ms-sketch.is-live .ms-demo.is-active .ms-part--photo{transition-delay:.4s}
 .ms-js .ms-demo .ms-part--photo .ms-ln{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s cubic-bezier(.55,.1,.3,1) calc(.5s + var(--i) * 45ms)}
 .ms-js .ms-sketch.is-live .ms-demo.is-active .ms-part--photo .ms-ln{stroke-dashoffset:0}
 .ms-js .ms-demo .ms-part--photo .ms-wash{opacity:0;scale:.85;transform-box:fill-box;transform-origin:center;transition:opacity .6s ease .4s,scale .9s cubic-bezier(.2,.8,.2,1) .4s}
 .ms-js .ms-sketch.is-live .ms-demo.is-active .ms-part--photo .ms-wash{opacity:1;scale:1}
 /* Notes follow one by one once the page has drawn; the highlight sweeps in with its note. */
 .ms-js .ms-note{opacity:0;translate:0 10px;transition:opacity .4s ease,translate .5s cubic-bezier(.2,.8,.2,1)}
 .ms-js .ms-sketch.is-live .ms-notes.is-active .ms-note{opacity:1;translate:none;transition-delay:calc(1s + var(--n) * .55s)}
 .ms-js .ms-note-arrow .ms-ln{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s ease}
 .ms-js .ms-sketch.is-live .ms-notes.is-active .ms-note-arrow .ms-ln{stroke-dashoffset:0;transition-delay:calc(1.25s + var(--n) * .55s)}
 .ms-js .ms-part.is-noted>span{background-size:0% 100%;transition:background-size .6s ease}
 .ms-js .ms-sketch.is-live .ms-demo.is-active .ms-part.is-noted>span{background-size:100% 100%;transition-delay:calc(1.3s + var(--n) * .55s)}
 .ms-js .ms-part--button.is-noted,.ms-js .ms-part--menu.is-noted,.ms-js .ms-part--photo.is-noted{box-shadow:0 0 0 0 #f6dc8e00}
 .ms-js .ms-sketch.is-live .ms-demo.is-active :is(.ms-part--button,.ms-part--menu,.ms-part--photo).is-noted{box-shadow:0 0 0 .8cqw #f6dc8ecc;transition:opacity .45s ease,translate .6s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease calc(1.3s + var(--n) * .55s)}
}

/* Narrower screens: the window takes the width, the notes become a numbered list on paper under it. */
@media(max-width:1200px){
 .ms-sketch.has-studies{width:min(760px,calc(100% - 40px))}
 .ms-mark{display:grid}
 .ms-notes{position:relative;inset:auto;margin-top:16px;padding:14px 18px;border-radius:12px;background:#fff8ed;box-shadow:0 14px 30px -18px #2a0b1080}
 .ms-notes:not(.is-active){display:none}
 .ms-note,.ms-note.is-left,.ms-note.is-right{position:static;width:auto;display:flex;gap:12px;align-items:baseline;padding:6px 0;background:none;box-shadow:none;rotate:none;font-size:17px}
 .ms-note+.ms-note{border-top:1px solid #23241f1f}
 .ms-note-arrow{display:none}
 .ms-note-num{display:inline-grid;flex:none;place-items:center;width:24px;height:24px;border-radius:50%;background:#23241f;color:#fff8ed;font:700 13px/1 var(--sans,Arial,sans-serif);font-style:normal}
}
/* As the page scrolls the sketch takes on colour: a picture where the cross was, and a filled button (scenes.js sets --fill). */
.ms-sheet .ms-fill{stroke:none}
.ms-sheet .ms-fill--sky{fill:#f4cdb9}
.ms-sheet .ms-fill--sun{fill:#f6dc8e}
.ms-sheet .ms-fill--hill{fill:#a9b892}
.ms-sheet .ms-fill--field{fill:#7f9a6e}
.ms-sheet .ms-fill--button{fill:var(--red,#b84c55)}
.ms-sheet .ms-x{opacity:0}

/* Chapters: the drawing stays beside the offers while they scroll past. */
.ms-chapters{--ms-tint:#f6ebe5;background:var(--ms-tint);transition:background-color .9s ease}
.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)}
/* Each drawing's wash, and the section tint while its offer is in view (read by scenes.js). */
.ms-panel[data-ms-panel=develop]{--ms-wash:#ebc8bf;--tint:#f6ebe5}
.ms-panel[data-ms-panel=content]{--ms-wash:#d2dac5;--tint:#eef0e5}
.ms-panel[data-ms-panel=build]{--ms-wash:#efd1aa;--tint:#f7ecdd}
.ms-panel[data-ms-panel=care]{--ms-wash:#c3d8ce;--tint:#e9f0eb}
.ms-panel[data-ms-panel=apps]{--ms-wash:#c6d9e0;--tint:#eaf1f3}
.ms-panel[data-ms-panel=assistants]{--ms-wash:#f0d79a;--tint:#f8f0dc}
.ms-panel[data-ms-panel=agents]{--ms-wash:#d6cce6;--tint:#efebf4}
.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 h3 a{text-decoration-color:color-mix(in srgb,currentColor 30%,transparent);text-decoration-thickness:1px}
.ms-chapters .me-service-line h3 a:hover{text-decoration-color:currentColor}
.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-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.is-live .ms-sheet .ms-ln{animation:ms-draw 1.1s cubic-bezier(.55,.1,.3,1) calc((var(--i) - 5) * 70ms) both}
 .ms-js .ms-sheet .ms-fill--sky,.ms-js .ms-sheet .ms-fill--button{opacity:clamp(0,var(--fill,0) * 2,1)}
 .ms-js .ms-sheet .ms-fill--sun{opacity:clamp(0,var(--fill,0) * 2.4 - .7,1)}
 .ms-js .ms-sheet .ms-fill--hill{opacity:clamp(0,var(--fill,0) * 2.4 - .5,1)}
 .ms-js .ms-sheet .ms-fill--field{opacity:clamp(0,var(--fill,0) * 2.4 - 1,1)}
 .ms-js .ms-sheet .ms-x{opacity:clamp(0,1 - var(--fill,0) * 1.6,1)}
 .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}
 /* Chapters follow the scroll position itself: each drawing draws in as its offer
    reaches the middle of the screen and draws out as it leaves (scenes.js sets
    --p, --o, --lo and the tint). */
 .ms-chapters.is-scrub,.ms-chapters.is-scrub .ms-stage{transition:none}
 .ms-chapters.is-scrub .ms-panel{opacity:var(--o,0);transition:none}
 .ms-chapters.is-scrub .ms-panel .ms-ln{stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0,var(--p,0) * 1.8 - var(--t,0) * .8,1))}
 .ms-chapters.is-scrub .ms-panel .ms-wash{transform-box:fill-box;transform-origin:center;scale:calc(.8 + .2 * var(--p,0));opacity:clamp(0,var(--p,0) * 2,1)}
 .ms-chapters.is-scrub .ms-panel .ms-dot,.ms-chapters.is-scrub .ms-panel .ms-solid{opacity:clamp(0,var(--p,0) * 3 - 2,1)}
 .ms-chapters.is-scrub .me-service-line{opacity:var(--lo,1)}
 @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}
 }
}
@keyframes ms-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@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}}

/* Choose what you need: pieces on two rings around a small website. The stage is
   3:2 and measured in cqw, so the rings, the pieces and the window keep their
   places at any width. Ring radii and angles come from includes/scenes.php. */
/* The section rises over the end of the chapters as a wide dome, echoing the rings. */
.mk-section.ms-compose{position:relative;z-index:1;isolation:isolate;overflow:clip;text-align:center;color:#fff8ed;
 margin-top:calc(-1 * var(--ms-dome));border-radius:50% 50% 0 0/var(--ms-dome) var(--ms-dome) 0 0;padding-top:calc(96px + var(--ms-dome) * .5);
 background:radial-gradient(70% 62% at 50% 62%,#a5434d,#76303a 48%,#4c1b22)}
body{--ms-dome:clamp(48px,9vw,130px)}
.mk-section.ms-chapters{padding-bottom:calc(96px + var(--ms-dome))}
.ms-compose h2{max-width:20ch;margin-inline:auto}
.mk-section.ms-compose .mk-wrap>p:not(.ms-mix){max-width:46ch;margin:18px auto 0;font-size:18px;color:#fde9de}
.ms-compose-stage{position:relative;width:min(100%,calc((100svh - 150px) * 1.5));aspect-ratio:3/2;margin:28px auto 0;container-type:inline-size;text-align:left}
.ms-rings{position:absolute;left:50%;top:33.333cqw;width:0;height:0;pointer-events:none}
.ms-rings i{position:absolute;left:0;top:0;width:calc(var(--d) * 1cqw);aspect-ratio:1;translate:-50% -50%;border-radius:50%;scale:var(--ring-scale,1)}
.ms-rings i:nth-child(1){--d:124;background:radial-gradient(closest-side,#ffe6d605 60%,#ffe6d60c)}
.ms-rings i:nth-child(2){--d:88;background:radial-gradient(closest-side,#ffe6d608,#ffe6d612);border:1px solid #ffe6d633}
.ms-rings i:nth-child(3){--d:62;background:radial-gradient(closest-side,#ffe6d608,#ffe6d614);border:1px solid #ffe6d63d}
.ms-rings i:nth-child(4){--d:44;background:radial-gradient(closest-side,#ffe6d61f,#ffe6d60a)}

/* The window: a crisp small website. Its own container, so its parts scale with it
   in cqw; on the window itself --wu is one hundredth of its width. */
.ms-site{--wu:.38cqw;position:absolute;left:31cqw;top:calc(33.333cqw - 14.44cqw);width:38cqw;aspect-ratio:100/76;container-type:inline-size;z-index:1;
 display:grid;grid-template-rows:calc(6.5 * var(--wu)) calc(8 * var(--wu)) 1fr calc(6 * var(--wu));background:#fff8ed;color:#23241f;border-radius:calc(2.8 * var(--wu));
 font:500 calc(2.6 * var(--wu))/1.3 var(--sans,Arial,sans-serif);text-align:left;
 box-shadow:0 2.4cqw 5cqw -1.6cqw #2a0b10b3,0 0 0 .1cqw #ffe6d633;transition:box-shadow .25s ease}
.ms-site p{margin:0!important;max-width:none!important;font:inherit!important;color:inherit!important}
.ms-site.is-over{box-shadow:0 2.4cqw 5cqw -1.6cqw #2a0b10b3,0 0 0 1.4cqw #ffe6d64d}
.ms-site-bar{display:flex;align-items:center;gap:1.4cqw;padding:0 3cqw;border-bottom:.3cqw solid #23241f14}
.ms-site-bar i{width:1.7cqw;aspect-ratio:1;border-radius:50%;background:#23241f2e}
.ms-site-bar span{flex:0 1 46cqw;height:3.4cqw;margin-left:3cqw;border-radius:3cqw;background:#23241f0f}
.ms-site-nav{display:flex;align-items:center;gap:3cqw;padding:0 4cqw}
.ms-site-nav b{width:13cqw;height:1.8cqw;border-radius:1cqw;background:#23241f}
.ms-site-nav i{width:6cqw;height:.8cqw;border-radius:1cqw;background:#23241f40}
.ms-site-nav b+i{margin-left:auto}
.ms-site-body{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1.15fr 1fr auto;gap:2.4cqw;padding:1cqw 4cqw 2cqw;min-height:0}

/* Slots: dashed while empty, the real part once a piece is in. */
.ms-slot{position:relative;min-height:0;border-radius:1.6cqw;outline:.35cqw dashed #23241f00;outline-offset:-.35cqw;transition:outline-color .2s,background-color .2s}
.ms-slot:not(.is-in){outline-color:#23241f30;background:transparent!important;box-shadow:none!important;border-color:transparent!important}
.ms-slot.is-off{visibility:hidden}
/* A part in the window can be taken out by clicking it: show a small cross on hover. */
.ms-compose.is-enhanced .ms-slot.is-in{cursor:pointer}
.ms-compose.is-enhanced .ms-slot.is-in::after{content:"\00d7";position:absolute;top:-1.6cqw;right:-1.6cqw;display:grid;place-items:center;width:4.4cqw;aspect-ratio:1;border-radius:50%;
 background:#23241f;color:#fff8ed;font:600 3.2cqw/1 var(--sans,Arial,sans-serif);opacity:0;scale:.6;transition:opacity .15s,scale .15s;pointer-events:none;visibility:visible}
.ms-compose.is-enhanced .ms-slot.is-in:hover::after{opacity:1;scale:1}
.ms-slot--chat.is-in::after{top:.8cqw!important;right:.8cqw!important}
.ms-slot:not(.is-in)>*{visibility:hidden}
.ms-slot.is-target{outline-color:var(--red,#b84c55);background:#b84c5514!important}
.ms-slot--words{grid-column:1/-1;display:grid;grid-template-columns:1.1fr .9fr;gap:3cqw;align-items:center}
.ms-slot--words div{display:grid;gap:1.4cqw;padding-left:1cqw}
.ms-slot--words b{height:2.7cqw;border-radius:1.4cqw;background:#23241f}
.ms-slot--words b+b{width:72%}
.ms-slot--words i{height:1cqw;border-radius:1cqw;background:#23241f40}
.ms-slot--words i:last-child{width:80%}
.ms-photo{align-self:stretch;border-radius:1.6cqw;
 background:radial-gradient(circle at 70% 34%,#f6dc8e 0 10%,#0000 11%),linear-gradient(162deg,#0000 58%,#a9b892 59% 74%,#7f9a6e 75%),linear-gradient(#f4cdb9,#e7a49c)}
.ms-slot--booking,.ms-slot--form{padding:2cqw 2.4cqw;background:#fff;border:.3cqw solid #23241f1a;display:flex;flex-direction:column;gap:1.3cqw}
.ms-slot--booking p,.ms-slot--form p,.ms-slot--newsletter p{font-weight:600!important}
.ms-cal{display:grid;grid-template-columns:repeat(7,2.7cqw);justify-content:space-between;gap:1.3cqw 0;margin-top:auto}
.ms-cal i{aspect-ratio:1;border-radius:50%;background:#23241f1c}
.ms-cal i.is-on{background:var(--red,#b84c55);box-shadow:0 0 0 .7cqw #b84c5533}
.ms-slot--form i{height:2.6cqw;border-radius:.8cqw;border:.3cqw solid #23241f26}
.ms-slot--form i.ms-area{flex:1}
.ms-slot--form span,.ms-slot--newsletter span{align-self:flex-start;padding:.6cqw 2.4cqw;border-radius:3cqw;background:var(--red,#b84c55);color:#fff8ed;font-weight:600}
.ms-slot--newsletter{grid-column:1/-1;display:flex;align-items:center;gap:2cqw;padding:1.6cqw 2.4cqw;background:#f1d8cf}
.ms-slot--newsletter i{flex:1;height:2.8cqw;border-radius:3cqw;background:#fff8ed}
.ms-slot--newsletter span{background:#23241f;align-self:auto}
.ms-slot--hosting{display:flex;align-items:center;gap:1.4cqw;margin:0 4cqw;border-radius:0;font-size:2.2cqw;color:#23241f99;border-top:.3cqw solid #23241f14}
.ms-slot--hosting span,.ms-slot--phone span{width:1.8cqw;aspect-ratio:1;border-radius:50%;background:#2f8f5b;box-shadow:0 0 0 .7cqw #2f8f5b2e}
.ms-slot--portal{margin-left:1cqw;padding:.6cqw 2.4cqw;border-radius:3cqw;border:.3cqw solid #23241f;font-weight:600;font-size:2.3cqw;white-space:nowrap}
/* Parts that work alongside the website sit over its edges. */
.ms-slot--chat,.ms-slot--phone,.ms-slot--agent{position:absolute;outline:0!important}
.ms-slot--chat:not(.is-in),.ms-slot--phone:not(.is-in),.ms-slot--agent:not(.is-in){visibility:hidden}
.ms-slot--chat{right:-6cqw;bottom:-7cqw;width:32cqw;overflow:hidden;border-radius:2.4cqw;background:#fff;box-shadow:0 2cqw 4cqw -1.6cqw #2a0b1099}
.ms-site .ms-chat-head{padding:1.4cqw 2.4cqw;background:#233f3b;color:#f5f0e6!important;font-weight:600!important}
.ms-chat-msg{margin:2cqw 2.4cqw 2.4cqw!important;padding:1.6cqw 2cqw;border-radius:2cqw 2cqw 2cqw .6cqw;background:#e9f0eb}
.ms-slot--phone{left:-9cqw;top:34cqw;display:flex;align-items:center;gap:1.6cqw;padding:1.6cqw 2.6cqw;border-radius:5cqw;background:#fff;white-space:nowrap;box-shadow:0 1.6cqw 3cqw -1.4cqw #2a0b1099}
.ms-slot--agent{right:4cqw;top:-5.5cqw;display:flex;align-items:center;gap:1.4cqw;padding:1.4cqw 2.6cqw;border-radius:5cqw;background:#23241f;color:#fff8ed;white-space:nowrap;box-shadow:0 1.6cqw 3cqw -1.4cqw #2a0b1099}
.ms-slot--agent span{color:#f0d79a}

/* Pieces: a drawing on a paper disc with its name underneath. Used pieces leave a dashed ring behind. */
.ms-tokens{margin:0;padding:0;list-style:none}
.ms-tokens-title{display:none}
.ms-tokens>li{position:absolute;left:calc(var(--x) * 1cqw);top:calc(var(--y) * 1cqw);z-index:2;width:12cqw;margin:0;translate:-50% -2.8cqw}
.ms-token{display:flex;flex-direction:column;align-items:center;gap:.8cqw;width:100%;padding:0;border:0;background:none;color:#fff8ed;
 font:500 max(13px,1.12cqw)/1.25 var(--sans,Arial,sans-serif);text-align:center;cursor:grab;-webkit-tap-highlight-color:transparent}
.ms-token.is-used{cursor:pointer}
.ms-token-art{display:grid;place-items:center;width:5.6cqw;aspect-ratio:1;border-radius:50%;background:#fff8ed;color:#23241f;
 box-shadow:0 1cqw 2cqw -1cqw #2a0b10b3;transition:scale .25s cubic-bezier(.2,.8,.2,1),background-color .2s,box-shadow .2s}
.ms-token-art svg{display:block;width:62%;height:auto}
.ms-token-art g{stroke-width:3}
.ms-token-art .ms-dot{stroke:none;fill:currentColor}
.ms-token-label{max-width:11cqw;text-wrap:balance;transition:opacity .2s}
button.ms-token:hover .ms-token-art{scale:1.07}
button.ms-token:focus-visible{outline:0}
button.ms-token:focus-visible .ms-token-art{box-shadow:0 0 0 3px #4c1b22,0 0 0 5px #fff8ed}
.ms-token.is-used .ms-token-art{background:#fff8ed14;color:#fff8ed;box-shadow:inset 0 0 0 2px #fff8ed;outline:2px dashed #fff8ed80;outline-offset:3px}
.ms-token.is-used .ms-token-art svg{opacity:.55}
.ms-token.is-used .ms-token-label{opacity:.85}
.ms-token.is-dragging{position:relative;z-index:5;cursor:grabbing}
.ms-token.is-dragging .ms-token-art{scale:1.12;box-shadow:0 2cqw 4cqw -1cqw #2a0b10cc}
.ms-tokens>li:has(.is-dragging){z-index:6}
.ms-compose.is-enhanced .ms-token{touch-action:none}

/* Under the stage: the mix in words, and the enquiry button that carries it. */
.ms-mix{min-height:1.7em;margin:26px auto 0!important;font-size:19px!important;color:#fff8ed!important}
.ms-mix-note{min-height:3.2em;max-width:52ch!important;margin:8px auto 0!important;font-size:16px!important;line-height:1.6!important;color:#fde9de!important}
.ms-compose .mk-actions{justify-content:center;align-items:center;gap:22px}
.ms-compose .mk-button{background:#fff8ed;border-color:#fff8ed;color:#24241f}
.ms-compose .mk-button:hover{background:#fff}
.ms-compose-reset{padding:6px 2px;border:0;background:none;color:#fde9de;font:500 15px/1.4 var(--sans,Arial,sans-serif);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.ms-compose-reset:focus-visible,.ms-compose .mk-button:focus-visible{outline:3px solid #fff8ed;outline-offset:3px}

/* Entering: the rings open out and the pieces swing into orbit (scenes.js sets --enter). */
@media(prefers-reduced-motion:no-preference){
 .ms-compose.is-enhanced .ms-rings{--ring-scale:calc(.82 + .18 * var(--enter,1));opacity:clamp(0,var(--enter,1) * 1.5,1)}
 .ms-compose.is-enhanced .ms-site{translate:0 calc((1 - var(--enter,1)) * 5cqw);opacity:clamp(0,var(--enter,1) * 1.8 - .2,1)}
 .ms-compose.is-enhanced .ms-tokens>li{opacity:clamp(0,var(--enter,1) * 2.2 - var(--k) * .1 - .2,1)}
}

/* Phones: the window on top, the pieces as two groups of buttons underneath. */
@media(max-width:720px){
 .ms-compose-stage{width:auto;aspect-ratio:auto;margin:30px -20px 0;padding:0 20px;container-type:normal}
 .ms-rings{top:calc(6vw + 32vw)}
 .ms-rings i{width:calc(var(--d) * 1.3vw)}
 /* The window stays in view while the pieces below scroll past it. */
 .ms-site{--wu:.84vw;position:sticky;left:auto;top:12px;z-index:3;width:84vw;margin:6vw auto 0;box-shadow:0 10px 30px -8px #2a0b10cc}
 body{--ms-dome:40px}
 .ms-slot--chat{right:-3cqw;bottom:-8cqw;width:40cqw}
 .ms-slot--phone{left:-4cqw;top:40cqw}
 .ms-slot--agent{right:3cqw;top:-6cqw}
 .ms-tokens-title{display:block;margin:34px 0 12px!important;font-size:14px!important;letter-spacing:.04em;text-transform:uppercase;color:#fde9de!important}
 .ms-tokens-title:first-of-type{margin-top:56px!important}
 .ms-tokens{display:flex;flex-wrap:wrap;gap:10px}
 .ms-tokens>li{position:static;width:auto;translate:none;opacity:1!important}
 .ms-token{flex-direction:row;gap:10px;width:auto;padding:5px 16px 5px 5px;border-radius:40px;background:#fff8ed14;font-size:15px;text-align:left}
 .ms-token-art{width:38px}
 .ms-token-label{max-width:none}
 .ms-token.is-used{background:#fff8ed;color:#23241f}
 .ms-token.is-used .ms-token-art{background:#23241f;color:#fff8ed;box-shadow:none;outline:0}
 .ms-token.is-used .ms-token-art svg{opacity:1}
 .ms-token.is-used .ms-token-label{opacity:1}
 .ms-compose.is-enhanced .ms-token{touch-action:manipulation}
 .ms-mix{font-size:17px!important;text-align:left}
 .ms-mix-note{text-align:left;min-height:0}
 .ms-compose .mk-actions{justify-content:flex-start}
}

/* 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 proximity;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}
.ms-carousel-progress{height:2px;margin-top:10px;border-radius:2px;background:#f5f0e626;overflow:hidden}
.ms-carousel-progress span{display:block;height:100%;background:#f5f0e6;transform-origin:left;scale:var(--fill,0) 1}
/* On wide screens the row is pinned while the page scrolls, and the scroll moves it sideways (scenes.js). */
/* The row moves about one and a half times as far as the page scrolls, so it passes quickly. */
.mk-section.ms-carousel.is-pinned{padding:0;height:calc(100vh + var(--travel,0) * .65px);height:calc(100svh + var(--travel,0) * .65px)}
.ms-carousel.is-pinned>.mk-wrap{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center}
.ms-carousel.is-pinned .me-project-grid{overflow:hidden;scroll-snap-type:none}
.ms-carousel.is-pinned .me-project-grid>.me-project{flex-basis:min(560px,78vw,calc((100svh - 380px) * 1.3))}
@media(max-width:760px){.ms-carousel .me-project-grid{gap:18px;scroll-snap-type:x mandatory}.ms-carousel-nav,.ms-carousel-progress{display:none}}

/* In the editor: the drawings show as pictures, and the circle's pieces as cards to edit. */
.editor-styles-wrapper .ms-sketch{position:relative;aspect-ratio:1000/740;min-height:0;margin-bottom:56px;border-radius:18px;background:url(../scenes/editor/frame.svg) center/100% 100% no-repeat,#fff8ed}
.editor-styles-wrapper .ms-sketch::before{display:none}
.editor-styles-wrapper .ms-sketch::after,.editor-styles-wrapper .ms-stage::after{position:absolute;left:0;right:0;top:calc(100% + 10px);font:500 13px/1.4 var(--sans,Arial,sans-serif);text-align:center}
.editor-styles-wrapper .ms-sketch::after{content:"Drawn website. Add an image block inside it to show that picture in the window instead.";color:#fff8edcc}
.editor-styles-wrapper .ms-sketch>*{position:relative;z-index:1}
/* Hero examples in the editor: one card per business, each field labelled. */
.editor-styles-wrapper .ms-sketch:has(.ms-study){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;aspect-ratio:auto;padding:0;background:none}
.editor-styles-wrapper .ms-sketch:has(.ms-study)::after{content:none}
.editor-styles-wrapper .ms-sketch:has(.ms-study)::before{content:"Hero examples: one card per kind of business. A note’s label says which part of the example it explains.";display:block;position:static;grid-column:1/-1;inset:auto;background:none;box-shadow:none;font:500 13px/1.4 var(--sans,Arial,sans-serif);color:#fff8edcc;text-align:center}
.editor-styles-wrapper .ms-sketch>.ms-field{grid-column:1/-1;margin:0!important;color:#fff8ed!important}
.editor-styles-wrapper .ms-study{padding:14px 16px;border-radius:12px;background:#fff8ed;color:#23241f;text-align:left}
.editor-styles-wrapper .ms-study .ms-field{margin:0 0 8px!important;font-size:15px!important;line-height:1.45!important;color:#23241f!important}
.editor-styles-wrapper .ms-field::before{content:attr(data-field);display:block;margin-bottom:2px;font:700 10px/1.2 var(--sans,Arial,sans-serif);letter-spacing:.08em;text-transform:uppercase;color:#9b3c45}
.editor-styles-wrapper .ms-field[data-field=note]::before{content:"note on the " attr(data-target)}
.editor-styles-wrapper .ms-stage{background:url(../scenes/editor/develop.svg) center/contain no-repeat;margin-bottom:40px}
.editor-styles-wrapper .ms-stage::after{content:"The drawing changes for each offer as visitors scroll.";color:#23241f99}
.editor-styles-wrapper .ms-compose-stage{position:relative;display:flex;flex-wrap:wrap;gap:10px;aspect-ratio:auto;padding:58px 16px 16px;border:1px dashed #fff8ed80;border-radius:12px;text-align:left}
.editor-styles-wrapper .ms-compose-stage::before{content:"Pieces in the circle. Bold text is the name, the sentence after it explains the piece. Delete a paragraph to take that piece out.";position:absolute;left:16px;right:16px;top:14px;font:500 13px/1.4 var(--sans,Arial,sans-serif);color:#fff8edcc}
.editor-styles-wrapper .ms-compose-stage>*{flex:1 1 300px;margin:0!important;padding:12px 14px;border-radius:10px;background:#fff8ed1a;color:#fff8ed;font-size:15px!important;line-height:1.5!important}
.editor-styles-wrapper .ms-hero{background:linear-gradient(112deg,#863d43,var(--red,#b84c55) 70%,#bc6d63)}
.editor-styles-wrapper .ms-compose{margin-top:0;border-radius:0;background:#76303a}
.editor-styles-wrapper .ms-chapters{padding-bottom:96px}