/* Original Mellow Stays artwork, composed within the existing site design.
   Transparent PNG margins are cropped in CSS; the source files stay intact. */
.ms-art {
  --art-size: 140px;
  --art-turn: 0deg;
  position: relative;
  display: block;
  flex: none;
  width: var(--art-size);
  max-width: 100%;
  aspect-ratio: var(--art-ratio);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  transform: rotate(var(--art-turn));
}
.ms-art > img {
  position: absolute;
  width: var(--art-image-width);
  max-width: none;
  height: auto;
  left: var(--art-image-left);
  top: var(--art-image-top);
  margin: 0;
}

/* Make the drawings themselves fill the existing icon spaces. */
.illustration-icon { position: relative; overflow: hidden; }
.illustration-icon > img {
  position: absolute;
  width: var(--icon-image-width);
  height: auto;
  max-width: none;
  left: var(--icon-image-left);
  top: var(--icon-image-top);
  object-fit: initial;
}

/* Section openers have their own space for artwork, away from the copy. */
.illustrated-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  margin-bottom: var(--s-6, 64px);
}
.illustrated-heading > .section-head,
.illustrated-heading > .testimonials-head { margin-bottom: 0; }
.illustrated-heading > .ms-art {
  --art-size: 180px;
  --art-turn: -5deg;
  justify-self: center;
}
.services-head {
  grid-template-columns: minmax(0, 1fr) 310px;
  align-items: center;
}
.services-head > .ms-art { --art-size: 260px; --art-turn: 5deg; justify-self: center; }
.services-head .section-head > .btn { margin-top: 24px; }
.properties .illustrated-heading { grid-template-columns: minmax(0, 1fr) 310px; }
.properties .illustrated-heading > .ms-art { --art-size: 280px; }
.process .illustrated-heading { grid-template-columns: minmax(0, 1fr) 280px; }
.process .illustrated-heading > .section-head { margin-bottom: 0; }
.process .illustrated-heading > .ms-art { --art-size: 235px; --art-turn: 6deg; opacity: .85; }
.illustrated-heading--reviews {
  grid-template-columns: 190px minmax(0, 1fr) 190px;
  max-width: 1280px;
  margin-inline: auto;
  margin-bottom: var(--s-5, 48px);
  gap: 28px;
}
.illustrated-heading--reviews > .ms-art { --art-size: 160px; --art-turn: -8deg; }
.illustrated-heading--reviews::after { content: ""; }

/* Small drawings cross the photographic edge without covering its subject. */
.illustrated-photo { padding: 0 0 42px 32px; }
.illustrated-photo > .ms-art {
  --art-size: clamp(100px, 10vw, 136px);
  --art-turn: -5deg;
  position: absolute;
  left: -18px;
  bottom: 0;
  z-index: 1;
  background: var(--yellow-300);
  border-radius: var(--r-lg);
  box-shadow: 0 0 0 12px var(--yellow-300);
}
.approach-visual.illustrated-photo { padding: 0 32px 42px 0; }
.approach-visual.illustrated-photo > .ms-art { left: auto; right: -18px; --art-turn: 5deg; }
.pricing-visual.illustrated-photo { padding: 0 24px 38px 0; }
.pricing-visual.illustrated-photo > .ms-art { --art-size: 100px; left: auto; right: 0; --art-turn: -4deg; }
.ms-art--conversation { --art-size: 108px; --art-turn: -7deg; margin: 40px 0 0 30px; }
.ms-art--intro { --art-size: 90px; --art-turn: -5deg; margin: 36px 0 0 20px; }
.ms-art--price { --art-size: 76px; margin: 0 auto 24px; }

/* The owner-guide badge gives the house drawing most of the yellow circle. */
.hero-illustration {
  width: 160px;
  height: 160px;
  padding: 22px;
  display: grid;
  place-items: center;
}
.hero-illustration > .ms-art { --art-size: 116px; }

/* Invitation artwork shares a centered layout with the CTA copy. */
.illustrated-scene { position: relative; isolation: isolate; overflow: hidden; }
.illustrated-scene > .container,
.illustrated-scene > .narrow { position: relative; z-index: 1; }
.illustration-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.illustration-backdrop > .ms-art { position: absolute; max-width: none; }
.cta-block.illustrated-scene,
.cta.illustrated-scene {
  display: grid;
  grid-template-columns: minmax(0, 800px) 300px;
  justify-content: center;
  align-items: center;
  gap: clamp(32px, 4vw, 60px);
  padding-inline: var(--gutter);
  text-align: left;
}
.cta-block.illustrated-scene > .container,
.cta.illustrated-scene > .narrow {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  margin: 0;
}
.illustrated-scene:is(.cta-block, .cta) :is(h2, p) { margin-inline: 0; }
.illustrated-scene .cta-actions { justify-content: flex-start; }
.illustration-backdrop--invitation {
  position: relative;
  inset: auto;
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.illustration-backdrop--invitation > .ms-art {
  --art-size: 270px;
  --art-turn: 12deg;
  position: relative;
  right: auto;
  bottom: auto;
  opacity: .58;
}
.illustration-backdrop--invitation > .art-phone-cream {
  --art-size: 280px;
  --art-turn: -10deg;
  opacity: .65;
}
@media (max-width: 900px) {
  .illustrated-heading { grid-template-columns: minmax(0, 1fr) 130px; gap: 28px; }
  .illustrated-heading > .ms-art { --art-size: 122px; }
  .services-head,
  .properties .illustrated-heading,
  .process .illustrated-heading { grid-template-columns: minmax(0, 1fr) 210px; gap: 28px; }
  .services-head > .ms-art { --art-size: 190px; }
  .properties .illustrated-heading > .ms-art { --art-size: 200px; }
  .process .illustrated-heading > .ms-art { --art-size: 180px; }
  .illustrated-heading--reviews { grid-template-columns: 130px minmax(0, 1fr) 130px; gap: 20px; }
  .illustrated-heading--reviews > .ms-art { --art-size: 114px; }
  .illustrated-photo > .ms-art { left: -4px; }
  .approach-visual.illustrated-photo > .ms-art { left: auto; right: -4px; }
  .cta-block.illustrated-scene,
  .cta.illustrated-scene { grid-template-columns: minmax(0, 1fr) 220px; gap: 28px; }
  .illustration-backdrop--invitation > .ms-art { --art-size: 180px; }
  .illustration-backdrop--invitation > .art-phone-cream { --art-size: 198px; }
}
@media (max-width: 600px) {
  .illustrated-heading,
  .properties .illustrated-heading,
  .process .illustrated-heading { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-bottom: 40px; }
  .illustrated-heading > .ms-art { --art-size: 116px; justify-self: end; margin-right: 14px; }
  .services-head { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .services-head > .ms-art { --art-size: 156px; justify-self: end; margin-right: 14px; }
  .properties .illustrated-heading > .ms-art { --art-size: 180px; }
  .illustrated-heading--reviews > .ms-art { --art-size: 112px; justify-self: center; margin: 0; }
  .illustrated-heading--reviews::after { display: none; }
  .process .illustrated-heading > .ms-art { --art-size: 156px; }
  .illustrated-photo { padding: 0 0 30px 22px; }
  .illustrated-photo > .ms-art { --art-size: 84px; left: 0; box-shadow: 0 0 0 8px var(--yellow-300); }
  .approach-visual.illustrated-photo { padding: 0 22px 30px 0; }
  .approach-visual.illustrated-photo > .ms-art { right: 0; }
  .pricing-visual.illustrated-photo > .ms-art { --art-size: 76px; }
  .ms-art--conversation { --art-size: 78px; margin: 30px 16px 0 auto; }
  .ms-art--intro { --art-size: 74px; margin-top: 28px; }
  .hero-illustration { width: 132px; height: 132px; padding: 18px; }
  .hero-illustration > .ms-art { --art-size: 96px; }
  .cta-block.illustrated-scene,
  .cta.illustrated-scene { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .illustration-backdrop--invitation { grid-column: 1; grid-row: 1; }
  .cta-block.illustrated-scene > .container,
  .cta.illustrated-scene > .narrow { grid-row: 2; }
  .illustration-backdrop--invitation > .ms-art { --art-size: 140px; }
  .illustration-backdrop--invitation > .art-phone-cream { --art-size: 164px; }
}

/* Kickflip-inspired pairs occupy their own margins on wider screens. */
.side-illustrations[hidden] { display: none; }
.side-illustrations {
  --side-gutter: clamp(145px, 12vw, 220px);
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}
.side-art-pair { position: absolute; inset: 0; }
.side-art-piece {
  --art-size: min(184px, calc(var(--side-gutter) - 48px));
  position: absolute;
  opacity: 0;
  transition: opacity 1.05s cubic-bezier(.4, 0, .2, 1);
}
.side-art-pair.is-active > .side-art-piece { opacity: .58; }
.side-art-piece--left {
  --art-turn: -8deg;
  left: calc((var(--side-gutter) - var(--art-size)) / 2);
  top: 26vh;
}
.side-art-piece--right {
  --art-turn: 9deg;
  right: calc((var(--side-gutter) - var(--art-size)) / 2);
  bottom: 15vh;
}
@media (min-width: 1280px) {
  .has-side-illustrations section[data-illustrations] > .container {
    width: min(100% - (clamp(145px, 12vw, 220px) * 2), var(--maxw));
  }
  .has-side-illustrations :is(.services-head, .illustrated-heading) { grid-template-columns: minmax(0, 1fr); }
  .has-side-illustrations :is(.services-head, .illustrated-heading) > .ms-art,
  .has-side-illustrations .illustrated-heading--reviews::after,
  .has-side-illustrations .ms-art--conversation,
  .has-side-illustrations .ms-art--intro,
  .has-side-illustrations .contact-illustration { display: none; }
}
@media (max-width: 1279px), print {
  .side-illustrations { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .side-art-piece { transition: none; }
}

/* Per-asset bounds include a 10px clear margin around the original drawing. */
.art-bubbles-brown {
  --art-ratio: 255 / 371;
  --art-image-width: 218.43137%;
  --art-image-left: -61.96078%;
  --art-image-top: -49.86523%;
  --icon-image-width: 150.13477%;
  --icon-image-left: -26.95418%;
  --icon-image-top: -49.86523%;
}
.art-calendar-brown {
  --art-ratio: 429 / 289;
  --art-image-width: 209.79021%;
  --art-image-left: -57.57576%;
  --art-image-top: -68.16609%;
  --icon-image-width: 209.79021%;
  --icon-image-left: -57.57576%;
  --icon-image-top: -29.60373%;
}
.art-camera-brown {
  --art-ratio: 376 / 280;
  --art-image-width: 201.59574%;
  --art-image-left: -48.13830%;
  --art-image-top: -62.14286%;
  --icon-image-width: 201.59574%;
  --icon-image-left: -48.13830%;
  --icon-image-top: -33.51064%;
}
.art-coffee-brown {
  --art-ratio: 209 / 266;
  --art-image-width: 224.40191%;
  --art-image-left: -63.15789%;
  --art-image-top: -57.89474%;
  --icon-image-width: 176.31579%;
  --icon-image-left: -38.90977%;
  --icon-image-top: -57.89474%;
}
.art-graph-brown {
  --art-ratio: 218 / 250;
  --art-image-width: 213.76147%;
  --art-image-left: -59.63303%;
  --art-image-top: -46.80000%;
  --icon-image-width: 186.40000%;
  --icon-image-left: -45.60000%;
  --icon-image-top: -46.80000%;
}
.art-graph-cream {
  --art-ratio: 218 / 250;
  --art-image-width: 202.75229%;
  --art-image-left: -50.00000%;
  --art-image-top: -45.20000%;
  --icon-image-width: 176.80000%;
  --icon-image-left: -37.20000%;
  --icon-image-top: -45.20000%;
}
.art-house-brown {
  --art-ratio: 277 / 275;
  --art-image-width: 198.91697%;
  --art-image-left: -50.90253%;
  --art-image-top: -45.81818%;
  --icon-image-width: 198.91697%;
  --icon-image-left: -50.90253%;
  --icon-image-top: -45.12635%;
}
.art-house-cream {
  --art-ratio: 277 / 275;
  --art-image-width: 198.19495%;
  --art-image-left: -49.09747%;
  --art-image-top: -48.00000%;
  --icon-image-width: 198.19495%;
  --icon-image-left: -49.09747%;
  --icon-image-top: -47.29242%;
}
.art-passport-brown {
  --art-ratio: 192 / 259;
  --art-image-width: 284.37500%;
  --art-image-left: -89.06250%;
  --art-image-top: -53.66795%;
  --icon-image-width: 210.81081%;
  --icon-image-left: -53.08880%;
  --icon-image-top: -53.66795%;
}
.art-phone-brown {
  --art-ratio: 259 / 324;
  --art-image-width: 226.25483%;
  --art-image-left: -63.70656%;
  --art-image-top: -54.62963%;
  --icon-image-width: 180.86420%;
  --icon-image-left: -40.89506%;
  --icon-image-top: -54.62963%;
}
.art-phone-cream {
  --art-ratio: 259 / 324;
  --art-image-width: 233.20463%;
  --art-image-left: -69.11197%;
  --art-image-top: -60.49383%;
  --icon-image-width: 186.41975%;
  --icon-image-left: -45.21605%;
  --icon-image-top: -60.49383%;
}
.art-plant-brown {
  --art-ratio: 250 / 371;
  --art-image-width: 227.60000%;
  --art-image-left: -70.40000%;
  --art-image-top: -53.09973%;
  --icon-image-width: 153.36927%;
  --icon-image-left: -31.13208%;
  --icon-image-top: -53.09973%;
}
.art-surfboards-cream {
  --art-ratio: 304 / 532;
  --art-image-width: 264.80263%;
  --art-image-left: -82.56579%;
  --art-image-top: -56.57895%;
  --icon-image-width: 151.31579%;
  --icon-image-left: -25.75188%;
  --icon-image-top: -56.57895%;
}
.art-tools-brown {
  --art-ratio: 260 / 271;
  --art-image-width: 203.07692%;
  --art-image-left: -54.61538%;
  --art-image-top: -51.29151%;
  --icon-image-width: 194.83395%;
  --icon-image-left: -50.36900%;
  --icon-image-top: -51.29151%;
}
.art-towel-brown {
  --art-ratio: 211 / 227;
  --art-image-width: 222.74882%;
  --art-image-left: -63.98104%;
  --art-image-top: -59.47137%;
  --icon-image-width: 207.04846%;
  --icon-image-left: -55.94714%;
  --icon-image-top: -59.47137%;
}
.art-umbrella-chair-brown {
  --art-ratio: 519 / 462;
  --art-image-width: 208.09249%;
  --art-image-left: -54.14258%;
  --art-image-top: -63.63636%;
  --icon-image-width: 208.09249%;
  --icon-image-left: -54.14258%;
  --icon-image-top: -51.15607%;
}
.art-waves-brown {
  --art-ratio: 154 / 113;
  --art-image-width: 211.03896%;
  --art-image-left: -55.19481%;
  --art-image-top: -99.11504%;
  --icon-image-width: 211.03896%;
  --icon-image-left: -55.19481%;
  --icon-image-top: -59.41558%;
}
.art-waves-cream {
  --art-ratio: 154 / 113;
  --art-image-width: 211.03896%;
  --art-image-left: -55.19481%;
  --art-image-top: -99.11504%;
  --icon-image-width: 211.03896%;
  --icon-image-left: -55.19481%;
  --icon-image-top: -59.41558%;
}