/* Page chrome for service posts built with the static .ts template. They carry their own hero, so
   the theme's navy title bar goes, and the two recent blog posts under the
   article go with it: this is a service page, not a journal entry. The tile
   strip that follows, the other Advisory services, stays. Revisit when the
   services receive their own Elementor Theme Builder condition. */
body.trevi-service-page .elementor-54232 .elementor-element.elementor-element-fbb48cf,
body.trevi-service-page .elementor-54232 .elementor-element.elementor-element-944c5b9 { display: none; }

/* The article column is not centred in the page: it is a 65% container with 1%
   of padding on the left and 7% on the right. The sections break out with
   calc(50% - 50vw), which centres on the column, so every band was landing
   about 285px left of centre. Squaring the two containers to full width puts
   the midpoint back on the page.

   They are also a flex row: the article on the left, the enquiry form beside
   it. Widening the article alone pushed the form off the right edge, so the
   row becomes a column and the form sits underneath. */
body.trevi-service-page .elementor-54232 .elementor-element.elementor-element-fe58f8d { width: 100%; max-width: none; padding: 0; --width: 100%; --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; }
body.trevi-service-page .elementor-54232 .elementor-element.elementor-element-4ec33c2 { width: 100%; max-width: none; --width: 100%; }
body.trevi-service-page .elementor-54232 .elementor-element.elementor-element-1ac75cb { width: 100%; max-width: none; --container-widget-width: 100%; }
/* below 768px the widget box takes 3% of side padding, which showed as a white
   gutter down both edges of the navy bands */
body.trevi-service-page .elementor-54232 .elementor-element.elementor-element-1ac75cb > .elementor-widget-container { padding: 0; }
body.trevi-service-page .elementor-54232 .elementor-element.elementor-element-114aa51 { padding: 0; --flex-direction: column; --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; }
/* The site's content width is 1440px. On a wider monitor that left the whole
   page as a band down the middle with the body background showing either
   side. Lifting the cap on this one container lets the full width sections
   reach the edge of any screen; the reading column is still held at 1280 by
   .ts-wrap, so line length does not change. Site wide this is Arkady's to
   decide, which is why it is scoped to this post. */
body.trevi-service-page .elementor-54232 .elementor-element.elementor-element-114aa51 > .e-con-inner { max-width: none; }
body.trevi-service-page .elementor-54232 .elementor-element.elementor-element-98a0f23 { padding: 4rem 1.5rem; --padding-top: 4rem; --padding-bottom: 4rem; --padding-left: 1.5rem; --padding-right: 1.5rem; background: #fbf8f1; }

/* The column is set to justified text at template level. And with the two
   containers squared off above, the root no longer needs its 100vw breakout:
   100% of a full width column is the same width and does not count the
   scrollbar, which 100vw does. That was eight pixels of sideways scroll. */
body.trevi-service-page .ts { text-align: left; width: 100%; margin-left: 0; margin-right: 0; }

/* Belt and braces for anything inside that still measures itself in vw. Clip,
   not hidden: hidden would make the body a scroll container. */
body.trevi-service-page { overflow-x: clip; }

/* ---------------------------------------------------------------
   The tile strip of the other Advisory services. It is the theme's
   widget, so this only restyles what it renders: the band goes navy
   instead of black to meet the closing section, the pictures take a
   3:2 frame instead of the letterbox they had, the titles move to the
   page's own serif, and the card answers the pointer. The gesture is
   the one the rail cards use, a slow drift on the photograph and a
   gold hairline drawing in under the title, so the two rows of cards
   on the page behave the same way.
   --------------------------------------------------------------- */
body.trevi-service-page .elementor-54232 .elementor-element.elementor-element-cee2484::before { background-color: rgba(14, 17, 48, 0.9); }
/* the band had no top padding at all, so the tiles sat hard against the
   section above it, and its inner box is 1440 while this page runs full
   width. Holding it to the page's own reading width lines the tiles up with
   everything above them. */
body.trevi-service-page .elementor-54232 .elementor-element.elementor-element-cee2484 > .e-con-inner {
  max-width: 1280px; padding-top: 5rem; padding-bottom: 5.5rem;
  --padding-top: 5rem; --padding-bottom: 5.5rem;
}
body.trevi-service-page .elementor-54232 .elementor-element.elementor-element-f2fcc30 .elementor-post { background: transparent; border: 0; }
body.trevi-service-page .elementor-54232 .elementor-element.elementor-element-f2fcc30 .elementor-post__card { background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
body.trevi-service-page .elementor-54232 .elementor-element.elementor-element-f2fcc30 .elementor-post__thumbnail { padding-bottom: 66.67%; overflow: hidden; }
/* Elementor centres this image with a translate(-50%, -50%), so inset: 0
   alone pushed every picture up and left by half its own size. That is what
   the strip was showing. The transform has to be cleared, not fought. */
body.trevi-service-page .elementor-54232 .elementor-element.elementor-element-f2fcc30 .elementor-post__thumbnail img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  max-width: none; max-height: none; object-fit: cover; transform: none;
  transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
body.trevi-service-page .elementor-54232 .elementor-element.elementor-element-f2fcc30 .elementor-post:hover .elementor-post__thumbnail img { transform: scale(1.05); }
body.trevi-service-page .elementor-54232 .elementor-element.elementor-element-f2fcc30 .elementor-post__text { position: relative; padding: 18px 0 16px; margin: 0; }
body.trevi-service-page .elementor-54232 .elementor-element.elementor-element-f2fcc30 .elementor-post__text::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: #c9a875; transform: scaleX(0); transform-origin: left;
  transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
body.trevi-service-page .elementor-54232 .elementor-element.elementor-element-f2fcc30 .elementor-post:hover .elementor-post__text::after { transform: scaleX(1); }
body.trevi-service-page .elementor-54232 .elementor-element.elementor-element-f2fcc30 .elementor-post__title { margin: 0; }
body.trevi-service-page .elementor-54232 .elementor-element.elementor-element-f2fcc30 .elementor-post__title a {
  font-family: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  font-weight: 500; font-size: 1.375rem; line-height: 1.2; letter-spacing: 0.01em;
  color: #f3ead9; border: 0; text-decoration: none;
  transition: color 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
body.trevi-service-page .elementor-54232 .elementor-element.elementor-element-f2fcc30 .elementor-post:hover .elementor-post__title a { color: #e8d4ac; }
@media (prefers-reduced-motion: reduce) {
  body.trevi-service-page .elementor-54232 .elementor-element.elementor-element-f2fcc30 .elementor-post__thumbnail img,
  body.trevi-service-page .elementor-54232 .elementor-element.elementor-element-f2fcc30 .elementor-post__text::after { transition: none; }
}

/* Bitrix #8252: reserve form28 before its delayed loader inserts the form.
   Observed initial form height: 425.5px at 360/390, 410.5px at 1440.
   A minimum allows validation/conditional fields to grow without clipping. */
/* home-care-form-reserve:start */
body.postid-173464.trevi-service-page .elementor-element.elementor-element-b343220 {
  min-height: 430px;
}
/* home-care-form-reserve:end */