/* Supplemental service content uses the typography and scenes of Web Design. */
#sweeple .s-services-actual > .s-hero { min-height: 850px; padding-bottom: 110px; }
#sweeple .s-services-actual > .s-address { margin-top: 120px; }
#sweeple .s-services-actual .s-services-choice { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 110px; align-items: center; overflow-anchor: none; }
#sweeple .s-services-content { min-width: 0; }
#sweeple .s-service-tabs { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 36px; }
#sweeple .s-service-tabs > button {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 17px;
  padding: 9px 17px;
  background: var(--lavender);
  color: var(--purple);
  font-family: Inter, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
#sweeple .s-service-tabs > button[aria-selected="true"] { background: var(--purple); color: #fff; box-shadow: inset 0 0 7px #ffffff55; }
#sweeple .s-service-tabs > button:hover { border-color: #b7a5fc; }
#sweeple .s-service-panel:focus-visible { outline: 2px solid #b7a5fc; outline-offset: 10px; border-radius: 5px; }
#sweeple .s-service-anchor { display: block; height: 0; scroll-margin-top: 120px; }
#sweeple .s-service-panels { min-height: 0; }
#sweeple .s-service-panel .s-title { font-size: 42px; line-height: 1.08; }
#sweeple .s-services-actual .s-address .s-copy { margin-top: 24px; font-size: 18px; line-height: 1.4; }
#sweeple .s-service-included { display: grid; gap: 11px; list-style: none; padding: 0; margin: 29px 0 0; }
#sweeple .s-service-included > li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.4; }
#sweeple .s-service-included > li::before { content: ''; position: absolute; top: .49em; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--purple); }
#sweeple .s-service-detail { margin-top: 24px; color: var(--muted); font-family: Inter, Arial, sans-serif; font-size: 13px; line-height: 1.5; }
#sweeple .s-services-content > .s-btn { margin-top: 30px; }
#sweeple .s-construction-link { display:block; width:fit-content; margin-top:16px; padding-block:8px; color:var(--purple); font-family:Inter,Arial,sans-serif; font-size:14px; text-underline-offset:5px; }
#sweeple .s-services-actual .s-services-construction { position:relative; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); margin-top:230px; gap:110px; }
#sweeple .s-services-construction>.s-service-anchor { position:absolute; top:0; left:0; }
#sweeple .s-services-construction .s-title { font-size:48px; }
#sweeple .s-construction-details { margin-top:22px; border-bottom:1px solid #e6e1f0; padding-bottom:14px; font-family:Inter,Arial,sans-serif; font-size:13px; line-height:1.5; color:var(--muted); }
#sweeple .s-construction-details summary { padding-block:5px; cursor:pointer; color:var(--ink); }
#sweeple .s-construction-details p { margin-top:12px; }
#sweeple .s-services-app-scene {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 48px 24px;
  border-radius: 30px;
  background: var(--lavender);
}
#sweeple .s-services-app-scene > img { display: block; width: min(100%, 280px); height: auto; border-radius: 30px; object-fit: contain; }
#sweeple .s-services-actual .s-services-extras { margin-top: 260px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 110px; }
#sweeple .s-services-extras-scene { background: #fff; }
#sweeple .s-services-extra-list { display: grid; list-style: none; padding: 0; margin: 28px 0 0; }
#sweeple .s-services-extra-list > li { padding: 13px 0; border-bottom: 1px solid #e6e1f0; font-size: 15px; line-height: 1.35; }
#sweeple .s-services-extra-list > li:first-child { padding-top: 0; }
#sweeple .s-services-extra-list > li:last-child { border-bottom: 0; }
#sweeple .s-services-visit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 65px; margin-top: 230px; padding: 60px 56px; background: var(--lavender); border-radius: 14px; }
#sweeple .s-services-visit h3 { margin: 0; font-size: 22px; font-weight: 500; line-height: 1.2; }
#sweeple .s-services-visit p { margin-top: 18px; color: var(--muted); font-size: 15px; line-height: 1.5; }
#sweeple .s-service-availability { display: inline-block; margin: 0 0 15px; font-size: 12px; line-height: 1.2; color: var(--purple); }
#sweeple .s-services-host { margin-top: 250px; }
#sweeple .s-services-host .s-title { font-size: 48px; }
#sweeple .s-services-host .s-copy { margin-top: 30px; font-size: 20px; line-height: 1.4; color: var(--muted); }
#sweeple .s-services-actual > .s-final { margin-top: 300px; }

@media (min-width: 992px) and (max-width: 1250px) {
  #sweeple .s-services-actual .s-services-choice,
  #sweeple .s-services-actual .s-services-extras { gap: 60px; }
  #sweeple .s-services-actual .s-services-construction { gap:60px; }
  #sweeple .s-services-construction .s-title { font-size:42px; }
  #sweeple .s-service-panel .s-title { font-size: 38px; }
  #sweeple .s-service-panels { min-height: 0; }
  #sweeple .s-services-visit { gap: 35px; padding: 45px 32px; }
  #sweeple .s-services-host .s-title { font-size: 42px; }
}

@media (max-width: 991px) {
  #sweeple .s-services-actual > .s-hero { min-height: 670px; padding-bottom: 100px; }
  #sweeple .s-services-actual > .s-address { margin-top: 70px; padding-inline: 30px; }
  #sweeple .s-service-tabs { justify-content: center; gap: 8px; margin-bottom: 32px; }
  #sweeple .s-service-tabs > button { padding: 9px 13px; font-size: 12px; }
  #sweeple .s-service-panel .s-title { max-width: 100%; font-size: 30px; }
  #sweeple .s-service-panels { min-height: 0; }
  #sweeple .s-services-actual .s-address .s-copy { max-width: 330px; margin-top: 20px; font-size: 14px; line-height: 1.4; }
  #sweeple .s-service-included { justify-items: start; width: fit-content; max-width: 100%; margin: 24px auto 0; gap: 10px; text-align: left; }
  #sweeple .s-service-included > li { font-size: 13px; padding-left: 18px; }
  #sweeple .s-service-detail { max-width: 340px; margin: 22px auto 0; font-size: 12px; }
  #sweeple .s-services-content > .s-btn { margin-top: 24px; }
  #sweeple .s-construction-link { margin-inline:auto; font-size:13px; }
  #sweeple .s-services-actual .s-services-construction { display:block; margin-top:160px; }
  #sweeple .s-services-construction .s-title { max-width:none; font-size:30px; }
  #sweeple .s-construction-details { text-align:left; max-width:340px; margin-inline:auto; font-size:12px; }
  #sweeple .s-services-app-scene { width: 100%; max-width: 370px; margin: 42px auto 0; padding: 34px 24px; border-radius: 24px; }
  #sweeple .s-services-app-scene > img { width: min(100%, 250px); border-radius: 27px; }
  #sweeple .s-services-actual .s-services-extras { display: flex; flex-direction: column; margin-top: 160px; gap: 0; }
  #sweeple .s-services-extras .s-services-content { order: 0; width: 100%; }
  #sweeple .s-services-extras-scene { order: 1; }
  #sweeple .s-services-extra-list { margin-top: 25px; text-align: left; }
  #sweeple .s-services-extra-list > li { font-size: 13px; padding-block: 12px; }
  #sweeple .s-services-visit { display: block; max-width: 560px; margin-top: 150px; padding: 35px 29px; }
  #sweeple .s-services-visit > div + div { margin-top: 38px; }
  #sweeple .s-services-visit h3 { font-size: 20px; }
  #sweeple .s-services-visit p { margin-top: 14px; font-size: 14px; line-height: 1.4; }
  #sweeple .s-services-host { margin-top: 155px; }
  #sweeple .s-services-host .s-title { font-size: 30px; }
  #sweeple .s-services-host .s-copy { margin-top: 22px; max-width: 330px; font-size: 14px; line-height: 1.4; }
  #sweeple .s-services-host .s-airbnb-scene { display: block; width: 100%; height: 500px; margin: 40px auto 0; border-radius: 28px; }
  #sweeple .s-services-actual > .s-final { margin-top: 170px; }
}

@media (max-width: 360px) {
  #sweeple .s-services-actual > .s-address { padding-inline: 22px; }
  #sweeple .s-service-tabs > button { padding-inline: 11px; font-size: 11px; }
  #sweeple .s-service-panels { min-height: 0; }
  #sweeple .s-service-panel .s-title { font-size: 27px; }
  #sweeple .s-services-construction .s-title { font-size:24px; }
  #sweeple .s-services-app-scene { padding-inline: 18px; }
}