/* Contain registered 2:1 service frames without changing WebGL cover mapping. */
@media (min-width:901px) {
 .service-page:is([data-service-id="23"],[data-service-id="24"],[data-service-id="25"],[data-service-id="26"]) .service-hero--object {
  --hero-group-shift:clamp(0px,calc((100vw - 1376px)/2),80px);
  background:linear-gradient(90deg,var(--paper) 0%,var(--paper) 38%,#f2ece3 70%,#eee7dc 100%);
 }
 .service-page:is([data-service-id="23"],[data-service-id="24"],[data-service-id="25"],[data-service-id="26"]) .service-hero--object .service-hero-inner {
  width:min(calc(100% - 96px),1280px);
 }
 .service-page:is([data-service-id="23"],[data-service-id="24"],[data-service-id="25"],[data-service-id="26"]) .service-hero--object .service-hero-art {
  inset:auto 0 auto auto;top:50%;transform:translateY(-50%);
  right:calc(clamp(0px,calc((100vw - 1120px)*.48),260px) - var(--hero-group-shift));
  width:min(100%,1324px,calc((100svh - 160px)*2));height:auto;aspect-ratio:2/1;
  mask-image:linear-gradient(90deg,transparent 24%,#000 47%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 4%,#000 90%,transparent);
  mask-composite:intersect;
 }
}
/* The nomad photo already blends into ivory on the left. Do not dissolve
   its foreground a second time with the broad architectural-frame mask. */
@media (min-width:901px) {
 .service-page[data-service-id="26"] .service-hero--object .service-hero-art {
  mask-image:linear-gradient(90deg,transparent 35%,#000 52%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 95%,transparent);
 }
}
@media(min-width:1201px) {
 .service-page:is([data-service-id="23"],[data-service-id="24"],[data-service-id="25"],[data-service-id="26"]) .service-hero-rail {
  width:112px;top:50%;transform:translateY(-50%);padding-left:14px;
  border-left:1px solid #486b5040;
 }
 .service-page:is([data-service-id="23"],[data-service-id="24"],[data-service-id="25"],[data-service-id="26"]) .service-hero-rail li {margin:0 0 10px}
 .service-page:is([data-service-id="23"],[data-service-id="24"],[data-service-id="25"],[data-service-id="26"]) .service-hero-rail li:last-child {margin-bottom:0}
 .service-page:is([data-service-id="23"],[data-service-id="24"],[data-service-id="25"],[data-service-id="26"]) .service-hero-rail a {
  display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:center;
  min-height:44px;font-size:11px;color:#435648;
 }
 .service-page:is([data-service-id="23"],[data-service-id="24"],[data-service-id="25"],[data-service-id="26"]) .service-hero-rail a span {margin:0;font-size:10px;color:#207052}
 .service-page:is([data-service-id="23"],[data-service-id="24"],[data-service-id="25"],[data-service-id="26"]) .service-hero-rail a:focus-visible {outline:2px solid #207052;outline-offset:4px}
}
/* Soften the letterbox edge while retaining the complete architectural scene. */
@media (min-width:761px) {
 .service-page:is([data-service-id="18"],[data-service-id="23"],[data-service-id="24"],[data-service-id="25"],[data-service-id="26"]) .home-story-art img {
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:auto;height:auto;max-width:100%;max-height:100%;
  mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
 }
}
@media (max-width:900px) {
 .service-page:is([data-service-id="23"],[data-service-id="24"],[data-service-id="25"],[data-service-id="26"]) .service-hero--object .service-hero-art {
  width:min(100%,520px);height:auto;aspect-ratio:2/1;align-self:flex-end;
  mask-image:linear-gradient(180deg,transparent,#000 4%,#000 90%,transparent),linear-gradient(90deg,transparent,#000 20%,#000 94%,transparent);
  mask-composite:intersect;
 }
}
@media (max-width:760px) {
 .service-page[data-service-id="26"] .service-hero--object .service-hero-art {
  mask-image:linear-gradient(180deg,transparent,#000 8%,#000 95%,transparent),linear-gradient(90deg,transparent,#000 8%,#000 94%,transparent);
 }
 .service-page:is([data-service-id="18"],[data-service-id="23"],[data-service-id="24"],[data-service-id="25"],[data-service-id="26"]) .home-story-art img {object-position:right center}
}
@media (min-width:761px) and (max-width:900px) {
 .service-page[data-service-id="26"] .service-hero--object .service-hero-art {
  mask-image:linear-gradient(180deg,transparent,#000 8%,#000 95%,transparent),linear-gradient(90deg,transparent,#000 8%,#000 94%,transparent);
 }
}
/* On phones the portrait has its own space, never behind the introduction. */
@media (max-width:600px) {
 .service-short_form .consultation--inviting .consultation-copy {
  display:flex;flex-direction:column;min-height:0;padding:0;gap:0;
 }
 .consultation--inviting .consultation-heading {order:0}
 .consultation--inviting .consultation-outcome {order:1}
 .service-page .service-section.service-short_form .consultation--inviting .consultation-heading .nexo-title,
 .service-short_form .consultation--inviting .consultation-intro,
 .consultation--inviting .consultation-outcome {max-width:none}
 .service-page .service-section.service-short_form .consultation--inviting .consultation-heading .nexo-title {font-size:clamp(30px,8vw,38px)}
 .consultation--inviting .consultation-portrait {
  position:relative;inset:auto;order:2;align-self:flex-end;
  width:220px;height:245px;margin:12px 0 -10px;
 }
 .consultation--inviting .consultation-portrait .service-media {height:100%}
 .consultation--inviting .consultation-portrait figcaption {right:0;bottom:10px;max-width:215px;font-size:7px}
}